Integrations
CDN integration
Load SVeditor via the official UMD CDN in hosts without a bundler, including auto-save and lifecycle cleanup.
CDN integration
Use the official CDN UMD bundle when you do not have webpack, Vite, or another bundler, such as legacy web apps, CMS embeds, and quick prototypes.
If you can use npm and a bundler, prefer the ESM package instead. ESM is the default integration path for new projects.
Integration path:
- Load
sv-editor-sdk.cssandsv-editor-sdk.umd.js. - Mount with
window.SVeditor.create(). - For persistence, implement
onFetch/onSaveContentunderextensionsOptions.autoSave(see Auto-save).
Minimal page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVeditor CDN</title>
<link
rel="stylesheet"
href="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.css"
/>
<style>
#editor {
min-height: 640px;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="editor"></div>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>
<script>
const { create } = window.SVeditor;
const editor = create({
el: "#editor",
content: "<p>SVeditor loaded from CDN</p>",
});
window.addEventListener("beforeunload", () => editor.destroy());
</script>
</body>
</html>With auto-save
Auto-save belongs under extensionsOptions.autoSave, not a top-level autoSave field.
<div id="editor"></div>
<p id="status"></p>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>
<script>
const { create } = window.SVeditor;
const statusEl = document.getElementById("status");
const docId = "my-doc";
const editor = create({
el: "#editor",
extensionsOptions: {
autoSave: {
onFetch: async () => {
const res = await fetch(`/api/docs/${docId}`, { cache: "no-store" });
if (!res.ok) {
throw new Error(`Fetch failed: ${res.status}`);
}
const data = await res.json();
return { content: data.content ?? "" };
},
onSaveContent: async (json) => {
const res = await fetch(`/api/docs/${docId}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content: json }),
});
if (!res.ok) {
throw new Error(`Save failed: ${res.status}`);
}
},
debounceMs: 1000,
onStatusChange: (status) => {
statusEl.textContent = {
idle: "",
saving: "Saving...",
saved: "Saved",
error: "Save failed",
}[status] ?? "";
},
},
},
});
window.addEventListener("beforeunload", () => editor.destroy());
</script>For a full Next.js document API walkthrough, see Auto-save.
With image upload
You implement storage; the SDK inserts a resizable image node on success:
const editor = create({
el: "#editor",
extensionsOptions: {
image: {
proxyUrl: "https://cdn.example.com",
onUpload: async (file, onProgress) => {
onProgress?.({ progress: 30 });
const form = new FormData();
form.append("file", file);
const res = await fetch("/api/upload/image", {
method: "POST",
body: form,
});
if (!res.ok) {
throw new Error("Upload failed");
}
const { url, width, height } = await res.json();
onProgress?.({ progress: 100 });
return {
src: url,
alt: file.name,
width: width ?? 800,
height: height ?? 600,
"data-keep-ratio": true,
};
},
},
},
});See Images & attachments.
Pin versions
Always pin the version segment in production URLs:
<link
rel="stylesheet"
href="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.css"
/>
<script src="https://static.editor.showverge.com/sdk/sveditor/0.2.16/sv-editor-sdk.umd.js"></script>Validate extensionsOptions in staging before bumping the CDN path.
Globals and options
| Item | Meaning |
|---|---|
window.SVeditor.create | Same as ESM SVeditor.create |
window.SVeditor.version | Loaded UMD build version |
extensionsOptions | Same shape as the ESM package; see Extension options |
Notes
- Load both CSS and JS; missing CSS breaks toolbar and layout.
- Remote Shiki grammars use dynamic
import(); adjust CSP if needed. See Code blocks. - Call
editor.destroy()before navigation to avoid leaking listeners and polls.