Integrations
Sandbox
Try auto-save, uploads, metadata, and AI online before wiring your own backend.
Playground
Use the online playground to see SVeditor with real extensionsOptions — auto-save, uploads, metadata, Shiki code blocks, and AI — before you implement your own API.
Entry points
| Entry | Login | What it shows |
|---|---|---|
| Playground | No | Auto-save with browser localStorage |
| Auto-save demo | Yes | Remote persistence, uploads, metadata, AI |
Open DevTools → Network to inspect fetch URLs and request bodies when adapting patterns to your backend.
What to copy into your app
The playground is not a production API. Copy configuration shapes, not URLs.
Auto-save
extensionsOptions: {
autoSave: {
enabled: true,
debounceMs: 1200,
onFetch: async () => ({ content: await loadBody() }),
onSaveContent: async (json) => {
await saveBody(json);
},
},
meta: {
onFetchMeta: async () => loadMeta(),
onSaveMeta: async (meta) => saveMeta(meta),
},
}Full walkthrough: Auto-save.
Image / attachment upload
extensionsOptions: {
image: {
proxyUrl: "https://your-cdn.example.com",
onUpload: async (file, onProgress) => {
onProgress?.({ progress: 30 });
const { url, width, height } = await uploadToYourStorage(file);
onProgress?.({ progress: 100 });
return { src: url, alt: file.name, width, height, "data-keep-ratio": true };
},
},
}See Images & attachments.
Media proxy
Documents may store /-prefixed keys as src. Set proxyUrl so the editor resolves display URLs without rewriting JSON:
extensionsOptions: {
image: { proxyUrl: "https://your-cdn.example.com" },
attachment: { proxyUrl: "https://your-cdn.example.com" },
}Docs map
| Topic | Playground | Documentation |
|---|---|---|
| Auto-save contracts | Live network calls | Auto-save |
| React mount | Working UI | React / Next.js |
| Editing features | Toolbar / menus | Editing |
Notes
- Replace playground API paths with your own routes in production.
- Add authentication and authorization on your document and upload endpoints.
- Local playground routes require
pnpm devand sign-in where noted.