Getting Started
Quick Start
Build a basic rich-text editor in 5 minutes
This guide walks you through building a working editor with formatting controls.
Set up the editor root
Every Typix editor starts with EditorRoot. It initializes the Lexical composer, sets up providers, and manages editor state.
import { EditorRoot, EditorContent } from '@typix-editor/react';
export function MyEditor() {
return (
<EditorRoot>
<EditorContent placeholder="Start writing..." />
</EditorRoot>
);
}Add a toolbar
Use the useTypixEditor hook to access the editor's fluent API. The useActiveFormats hook gives you reactive format state for button highlighting.
import { useTypixEditor, useActiveFormats } from '@typix-editor/react';
function Toolbar() {
const editor = useTypixEditor();
const { isActive } = useActiveFormats();
return (
<div style={{ display: 'flex', gap: 4 }}>
<button
onClick={() => editor.toggleBold()}
style={{ fontWeight: isActive('bold') ? 'bold' : 'normal' }}
>
B
</button>
<button
onClick={() => editor.toggleItalic()}
style={{ fontStyle: isActive('italic') ? 'italic' : 'normal' }}
>
I
</button>
<button onClick={() => editor.toggleUnderline()}>U</button>
<button onClick={() => editor.toggleStrikethrough()}>S</button>
</div>
);
}Compose the full editor
Place the toolbar inside EditorRoot so it has access to the editor context.
import { EditorRoot, EditorContent } from '@typix-editor/react';
export function MyEditor() {
return (
<EditorRoot>
<Toolbar />
<EditorContent placeholder="Start writing..." />
</EditorRoot>
);
}Save editor content
Use onContentChange to receive serialized JSON whenever the content changes.
import { EditorRoot, EditorContent } from '@typix-editor/react';
import type { SerializedEditorState } from 'lexical';
export function MyEditor() {
const handleChange = (content: SerializedEditorState) => {
// Save to your backend, localStorage, etc.
console.log(content);
};
return (
<EditorRoot onContentChange={handleChange}>
<Toolbar />
<EditorContent placeholder="Start writing..." />
</EditorRoot>
);
}Load saved content
Pass a content prop to EditorRoot to restore previously saved state.
<EditorRoot content={savedContent} onContentChange={handleChange}>
<Toolbar />
<EditorContent placeholder="Start writing..." />
</EditorRoot>Next steps
- Editor Setup — Learn about
createEditorConfigand custom nodes - Theming — Customize the editor's appearance
- Building a Toolbar — Full toolbar with all format controls