Svelte Rich Text Editor
SvRichText is a small WYSIWYG editor over a contentEditable region. It emits HTML through bind:value, takes a configurable toolbar, and adds no third-party dependency to your bundle. It covers the formatting most applications actually need: bold, italic, underline, strikethrough, headings, lists, quotes, code blocks, alignment, links and undo.
It is deliberately not a document editor. There is no collaborative editing, no comment threads and no change tracking. For a notes field, a description box or a comment form, that is the right amount of editor.
Install
npm i @svgrid/gridFree and MIT-licensed in @svgrid/grid: no license key, no row cap, no watermark.
The code
<script lang="ts">
import { SvRichText } from '@svgrid/grid'
let html = $state('<p>Hello</p>')
</script>
<SvRichText
bind:value={html}
placeholder="Write something..."
minHeight="120px"
tools={['bold', 'italic', 'underline', '|', 'ul', 'ol', '|', 'link', 'clear']}
/>What you get
- HTML through bind:value - The value is a plain HTML string in and out, so storing it, sanitizing it and rendering it elsewhere are all your normal code.
- A toolbar you choose - The tools array names exactly the buttons you want, with a pipe for a separator. Leave it out and you get a sensible default set.
- No dependency - It ships inside @svgrid/grid and pulls in nothing else, so a notes field does not cost you a document-editor bundle.
- Sensible defaults - Placeholder text, a minimum height, disabled and read-only states, and an onChange callback if you would rather not bind.
- Works in a form - It follows the same field contract as the other editors, so labels, hints, validation and RTL behave as they do everywhere else.
- Free and MIT - SvRichText is part of @svgrid/grid with no license key.
Live examples
- Rich text editor (WYSIWYG) - SvRichText: a lightweight WYSIWYG over a contentEditable region - bold/italic/underline/strike, headings, lists, quote, code block, alignment, links, undo/redo - emitting HTML via bind:value, with a configurable toolbar. Parity: Smart editor.
- Form: rich field types - SvForm reaching the whole input suite from one schema - phone, country, mask, combobox, radio, slider, tags, datetime and file - plus per-field help text, a readonly field, column span, and a promise toast on submit.
- Input editors: text, textarea, OTP, duration, multi-select - The Tier-1 editors on the shared contract: SvTextInput, SvTextArea (auto-grow + counter), SvOtpInput (segmented code, paste-distribute), SvDurationInput ("1h 30m" <-> minutes) and SvMultiSelect (portalled checkbox dropdown with search + chips). Standalone or as grid cell editors.
Documentation
- SvRichText - A lightweight WYSIWYG editor: a formatting toolbar over a contentEditable region that emits HTML through a bindable value.
- Inputs - Typed text controls. Each emits a clean value and themes from --sg-*.
Related articles
- SvGrid UI Components Tips and Tricks: Svelte 5 Buttons, Inputs, Tree, Forms - Practical tips for the SvGrid UI component kit - SvButton states, a Cmd+K command palette, a virtualized searchable tree, schema-driven forms, a parsing date/time field, and the shared field contract - each with a code snippet.
Frequently asked questions
How do I add a rich text editor to a Svelte app?
Import SvRichText from @svgrid/grid and bind a string with bind:value. The editor emits HTML and needs no other package.
Can I customize the toolbar?
Yes. Pass a tools array naming the buttons you want, in order, using a pipe string for a separator.
Does it support collaborative editing?
No. It is a single-user WYSIWYG field with no collaboration, comments or change tracking, and none are planned. For a document editor, use a dedicated one.
Is it free?
Yes. SvRichText is MIT-licensed in @svgrid/grid and dependency-free.