Getting Started

Textrix is a lightweight, powerful, and flexible rich-text editor built for modern web apps.
It's easy to set up, easy to theme, and easy to extend with your own features.

Textrix Editor

Textrix works in all modern browsers. Drop it into your frontend, pick the built-in features you need, and apply your preferred theme. (Only one theme available for now, but more are coming soon!)

Textrix comes with powerful, customizable plugins you can import and add to your editor, like: Bubble Menu 🫧, Floating Menu 🎈, Emoji Picker 😊, Code Block </> , and many more.

It supports multiple output formats:

JSON – To track user changes and document state
HTML – Generate static HTML from the JSON doc, to render articles, blogs and stories
Plain Text – Just the raw content

Textrix on the Backend

Textrix plays well with Node.js too!

Use it to:

Validate and manage rich-text documents
Extract metadata (like title, subtitle, or featured image)
Generate the HTML for publishing

All this thing also works well on the Editor, but you can use it on the backend to add a layer of security.

Great for headless CMSs, static site generators, and custom pipelines.

Textrix is modular and flexible. It works both in the browser and on the backend with Node.js. You can use as much or as little of the features on your editor as you want, and your bundle size will adapt.

Textrix is also Framework-Agnostic, use it on React, Vue, Svelte, or Plain Javascript

📦 Installation

To install Textrix, you can use a package manager like npm or a CDN

Using NPM

npm install textrix

Using CDN

Load Textrix directly from the CDN, available in both ESM and UMD formats.

ESM

import { Editor } from 'https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/es/index.js';
import { BubbleMenu, FloatingMenu, Media } from 'https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/es/features.js';

UMD

<script src="https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/umd/editor.min.js"></script>
 
<!-- Common features in one script: BubbleMenu, FloatingMenu, CodeBlock, Media, Emoji -->
<script src="https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/umd/features/common.min.js"></script>
 
<!-- and it's easy to individually load additional features -->
<script src="https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/umd/features/emoji.min.js"></script>

Common features will be available in CommonFeature var, use it like CommonFeature.Emoji

🎨 Themes

Textrix themes are provided as CSS files. You can:

Import them into your main CSS file
Import via JavaScript (if using a bundler like Vite)
Or load them directly from a CDN

Currently, only one theme is available: textrix.

Load via bundler (e.g. Vite)

import 'textrix/themes/textrix.min.css';

Load in CSS

@import 'textrix/themes/textrix.min.css';

Load in HTML (via CDN)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/textrix@0.1.6/dist/themes/textrix.min.css" />