Getting Started
Choose an integration path
Pick ESM, CDN, or the online playground based on your stack and persistence needs.
Choose an integration path
SVeditor uses the same runtime everywhere. What changes is how you load it and where you save documents. Default to the ESM package when you have a bundler.
Decision table
| Your situation | Path | Notes |
|---|---|---|
| React / Next.js / Vite | ESM package | Default — @wztlink1013/sveditor |
| Next.js App Router | React / Next.js | SSR-safe mount + stable options |
| No bundler (legacy HTML, CMS) | CDN | window.SVeditor |
| Try before building APIs | Playground | Online auto-save examples |
| Your own REST storage | ESM or CDN + Auto-save | Recommended persistence model |
ESM package (default)
Best for: any new React or Next.js project.
- Full TypeScript types for
EditorOptionsandextensionsOptions. - Same configuration shape as CDN — pick one loading path and keep it.
- Requires npm install; see Installation.
Watch out: do not import the SDK in Server Components. Use client boundaries — ESM integration.
CDN (UMD)
Best for: hosts that cannot use a bundler.
- No build step; React is bundled in UMD.
- Pin versioned CDN URLs in production.
Configuration still uses SVeditor.create({ extensionsOptions: { ... } }). Upload and save callbacks call your HTTP endpoints.
Online playground
Best for: seeing auto-save, uploads, metadata, and AI wired end-to-end before you write backend routes.
- Playground — local storage, no login.
- Auto-save demo — signed-in remote persistence.
See Sandbox.
Persistence models
| Model | Who stores the body | Use when |
|---|---|---|
Static content | You pass content each mount | Read-only or preview |
autoSave | Your onSaveContent | Single editor, debounced saves |
autoSave + meta | Body + separate meta callbacks | Built-in title / cover UI |