Quick Start
Mount SVeditor, read and write content, enable auto-save, and destroy instances safely in React and Next.js.
Quick Start
This page covers the smallest useful integration: mount the editor, read and write content, enable auto-save when you have a backend, and destroy the instance when the page unloads.
These examples assume you completed Installation and import the SDK from @wztlink1013/sveditor (default ESM). CDN users can swap imports for window.SVeditor — see CDN integration.
Step 1: Mount the editor
Create a DOM container, then call SVeditor.create() (CDN: create()):
<div id="editor" style="min-height: 640px;"></div>import { SVeditor } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";
const editor = SVeditor.create({
el: "#editor",
content: "<p>Start writing</p>",
editable: true,
});content may be an HTML string or a Tiptap/ProseMirror JSON string.
Step 2: Read and set content
const html = editor.getHTML();
const json = editor.getJSON();
editor.setHTML("<p>New content</p>");
// or editor.commands.setContent(parsedJson);For server persistence, prefer JSON.stringify(editor.getJSON()), which is the same shape Auto-save passes to onSaveContent.
Step 3: Create and destroy in React
SVeditor owns DOM and Tiptap state. Always call destroy() on unmount, and avoid passing a fresh options object on every render because that recreates the editor.
"use client";
import { useEffect, useMemo, useRef } from "react";
import { SVeditor } from "@wztlink1013/sveditor";
import type { EditorOptions } from "@wztlink1013/sveditor";
import "@wztlink1013/sveditor/style.css";
type EditorInitOptions = Omit<EditorOptions, "el">;
export function MinimalEditor() {
const containerRef = useRef<HTMLDivElement>(null);
const options = useMemo<EditorInitOptions>(
() => ({
content: "<p>Hello</p>",
editable: true,
}),
[],
);
useEffect(() => {
if (!containerRef.current) {
return;
}
const editor = SVeditor.create({
el: containerRef.current,
...options,
});
return () => editor.destroy();
}, [options]);
return <div ref={containerRef} className="min-h-[640px]" />;
}For Next.js, extract a client mount component; see React / Next.js integration.
Step 4: Enable extensions when needed
All extension configuration lives under extensionsOptions, not top-level fields.
| Capability | Key | Guide |
|---|---|---|
| Auto-save body | extensionsOptions.autoSave | Auto-save |
| Title / emoji / cover | extensionsOptions.meta | Auto-save meta |
| Version history | extensionsOptions.versionHistory | Version history |
| Image / attachment upload | extensionsOptions.image / attachment | Images & attachments |
| AI writing | extensionsOptions.ai | AI |
For local trials without a backend, use the localStorage pattern in Auto-save browser-only prototype.
Common mistakes
| Symptom | Cause | Fix |
|---|---|---|
| Broken toolbar styling | Missing style.css / sv-editor-sdk.css | Follow Installation |
| Focus lost on every keystroke | New options each render | Stabilize with useMemo |
| Auto-save never runs | autoSave on the root instead of extensionsOptions | Move to extensionsOptions.autoSave |