Rich text basics

SVeditor is built on Tiptap / ProseMirror. The features below work without extensionsOptions. Toolbars and bubble menus ship with the SDK; you mainly control appearance and read-only mode via editable, content, and optional extensionsOptions.theme.

For persistence, see Auto-save. This page covers what you can edit and default behavior.

Included by default

These capabilities ship in the default SVeditor extension set:

In the auto-save demo, built-in undo/redo applies.

Integrate in your app

1. Minimal setup

import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";

SVeditor.create({
  el: "#editor",
  content: "<h1>Title</h1><p>Body</p>",
  editable: true,
});

2. Read-only preview

SVeditor.create({
  el: "#preview",
  content: savedHtmlOrJson,
  editable: false,
});

3. Typography theme (optional)

extensionsOptions.theme registers body fonts, heading colors, default code-block Shiki theme, etc. Cover and canvas metadata work with extensionsOptions.meta.

SVeditor.create({
  el: "#editor",
  extensionsOptions: {
    theme: {
      // See ThemeExtensionOptions; register custom Theme objects
    },
    meta: {
      onFetchMeta: () => fetchMeta(docId),
      onSaveMeta: (meta) => saveMeta(docId, meta),
    },
  },
});

See also Presentation & themes.

Markdown paste

MarkdownPasteExtension converts pasted Markdown (GFM) into document structure when possible. Failures can surface through extensionsOptions.notifications (Sonner by default; see Notifications).

WeChat-rich paste can use extensionsOptions.wechatCopy alongside Markdown paste.

Common patterns

Initial content from the server

Pass JSON from a Server Component into a client host:

<SveditorMount
  options={{
    content: initialJsonFromServer,
    extensionsOptions: {
      autoSave: {
        onSaveContent: (json) => save(docId, json),
      },
    },
  }}
/>

Use your client mount component (see React / Next.js).

With autoSave.onFetch, fetched content overrides static content; see Auto-save.

Restrict editing

• editable: false: entire document read-only.
• Route-level auth decides whether to render the editor at all.

Options

Full list: EditorOptions.

Notes

1. Prefer JSON.stringify(editor.getJSON()) for storage, not getHTML(), to keep node structure (same as auto-save).
2. Custom nodes or disabling built-in extensions require SDK customization — not host extensionsOptions alone.

Next steps