Model-based rich-text editor — a CKEditor alternative with no execCommand. A schema-validated document model is the source of truth, so undo/redo is exact and serialized HTML is always clean. Marks, font family/size, color/highlight, headings, lists & to-dos, alignment, line height, case change; a rich link tool (Web/Email/Phone/Anchor + autolink + preview balloon), block & inline images (width/height/fit, align, server upload), model-based find & replace, special characters, VS-Code source view, fullscreen and resizable.
<link rel="stylesheet" href="https://cdn.get-set.it/gs-editor/latest/gs-editor.min.css"> <script src="https://cdn.get-set.it/gs-editor/latest/gs-editor.min.js"></script>
import Editor from '@get-set/gs-editor'; export default function App() { return ( <Editor> <div className="content">Your Editor content</div> </Editor> ); }
| Option | Type | Default | Description |
|---|---|---|---|
| reference | string | none | Stable instance key. Auto-generated when omitted. |
| value | string | '' | Initial content as an HTML string. |
| json | EditorDoc | none | Initial content as a GSEditor JSON document (takes precedence over `value`). |
| placeholder | string | 'Start writing…' | Placeholder shown while the document is empty. |
| readonly | boolean | false | Disable editing; render as static, selectable content. |
| autofocus | boolean | false | Autofocus the editor on mount. |
| spellcheck | boolean | true | Spellcheck attribute on the editing surface. |
| rtl | boolean | false | Right-to-left writing mode. |
| toolbar | boolean | 'minimal' | 'basic' | 'standard' | 'full' | GSEditorToolbarItem[] | true | Toolbar on/off, a named preset ('minimal' | 'basic' | 'standard' | 'full'), or an explicit ordered list of item ids ('|' = separator). |
| toolbarPosition | GSEditorToolbarPosition | 'top' | Where the toolbar sits relative to the editing area. |
| bubbleToolbar | boolean | false | Show a floating bubble toolbar over the current text selection. |
| sourceEditor | 'basic' | 'monaco' | 'basic' | Source (HTML) view editor: 'basic' (built-in, lightweight) or 'monaco' (lazy-loads the VS Code engine from a CDN for full IntelliSense). |
| footer | boolean | none | Show the word/character-count footer (default true). |
| resizable | boolean | none | Let the user drag the editor's bottom edge to resize its height (default false). |
| inputRules | boolean | true | Enable markdown-style autoformat input rules ("## ", "- ", "**x**", …). |
| keymap | boolean | true | Enable the built-in keyboard shortcuts (Mod-b, Mod-z, Enter, Tab, …). |
| maxLength | number | 0 | Hard limit on the number of characters (plain-text length). 0 = unlimited. |
| minHeight | number | 160 | Minimum editor height in px. |
| maxHeight | number | 0 | Maximum editor height in px before it scrolls. 0 = grow unbounded. |
| theme | GSEditorTheme | 'auto' | Visual theme. 'auto' follows prefers-color-scheme. |
| variant | GSEditorVariant | 'outlined' | Surface style. |
| accentColor | string | '#2563eb' | Accent color (any CSS color) used for links, focus and toolbar highlights. |
Deterministic transactions, not buggy DOM edits.
Model is truth → always well-formed HTML + JSON.
Link balloon + typed modal; block/inline images with fit & upload.
Model-based (match case / whole word) — never corrupts markup.