Rich Text Editor

RichTextEditor — a TipTap editor with a Silica-styled toolbar and content surface. Emits HTML via onValueChange; control it with value or run uncontrolled with defaultValue.

Real use · a full formatting toolbar over TipTap

Using Rich Text Editor

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class ProseMirror, with 6 modifiers:

.ProseMirror
.is-editor-empty
.rich-text-editor
.rich-text-editor-btn
.rich-text-editor-content
.rich-text-editor-sep
.rich-text-editor-toolbar

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-editor

import { RichTextEditor } from "@wizeworks/silicaui-editor";

Props

Prop	Type	Required	Description
value	string	no	Controlled HTML value.
defaultValue	string	no	Uncontrolled initial HTML.
onValueChange	(html: string) => void	no	Fires with the editor's HTML on every change.
placeholder	string	no	Empty-state placeholder text.
editable	boolean	no	Allow editing. Default true.
toolbar	boolean	no	Show the formatting toolbar. Default true.
className	string	no	—
contentClassName	string	no	Class for the editable content surface.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { RichTextEditor } from "@wizeworks/silicaui-editor";
import { Section } from "../lib/Section";

export function RichTextEditorDemo() {
    const [doc, setDoc] = useState(
        "<h2>Launch checklist</h2><p>Draft the announcement in <strong>rich text</strong> — headings, lists, and links all export as clean HTML.</p><ul><li>Write the copy</li><li>Add screenshots</li></ul>",
    );

    return (
        <Section title="Real use · a full formatting toolbar over TipTap">
            <RichTextEditor
                value={doc}
                onValueChange={setDoc}
                className="max-w-xl"
            />
        </Section>
    );
}

The full API for Rich Text Editor, on every path, is available through the Silica MCP server.