Minimal, copy-pasteable examples organized to mirror the docs: Getting Started, Editor, Document API, Document Engine, AI, and Advanced.
Examples answer: "How do I use this one SuperDoc primitive or integration pattern?"
If you want a composed app, a product workflow, or something polished enough to record as a customer scenario, use demos/ instead.
The machine-readable index lives in manifest.json.
Use examples/ when the code should be small enough to copy into a new project and adapt. A good example has one lesson, neutral UI, a short README, a manifest entry, and a local build command.
Use demos/ when the value comes from multiple SuperDoc features working together. Demos can include realistic panels, fake backend data, library state, gallery metadata, and product-specific copy.
Examples may overlap with demos. That is expected when the example is the smallest readable form of a primitive that a demo composes into a larger workflow. The example should still stand on its own as a focused reference.
- Teach one concept or one integration pattern.
- Keep UI and state management only as large as the lesson requires.
- Name folders by API or pattern, not by a customer scenario, when possible.
- Add a README with what it teaches, how to run it, and related demos or docs.
- Add an entry to
manifest.jsonand this README. - Run the package build for the touched workspace.
Framework starters. Pick one, run pnpm install && pnpm dev.
| Example | Description |
|---|---|
| react | React + TypeScript with Vite |
| vue | Vue 3 + TypeScript with Vite |
| vanilla | Plain JavaScript with Vite |
| cdn | Zero build tools, just an HTML file |
| angular | Angular setup |
| nextjs | Next.js (SSR-safe) |
| nuxt | Nuxt setup |
| laravel | Laravel + Inertia |
Patterns for the browser editor surface.
| Example | Docs |
|---|---|
| comments | docs |
| track-changes | docs |
| toolbar | docs |
| responsive-zoom | docs |
| Example | Docs |
|---|---|
| selection-capture | docs |
| configurable-toolbar | docs |
| Example | Docs |
|---|---|
| theming | docs |
| Example | Docs |
|---|---|
| spell-check | docs |
Realtime provider examples for the browser editor.
| Example | Description |
|---|---|
| providers/yhub | SuperDoc + YHub client (advanced attribution and revision-history workflows; beta) |
| providers/liveblocks | SuperDoc + Liveblocks managed service |
| providers/hocuspocus | SuperDoc + Hocuspocus self-hosted Yjs server |
| providers/superdoc-yjs | SuperDoc Yjs minimal reference server (not production infrastructure) |
Backend automation and local infrastructure.
| Example | Description |
|---|---|
| backends/node-sdk | Node backend that joins and mutates a live collaboration room |
| backends/fastapi | FastAPI backend that joins and mutates a live collaboration room |
| backends/fastapi/yjs-hub | Local YHub server used by the YHub and backend examples |
The operation contract for reading and editing documents. Same shape in the browser, in Node SDKs, in the CLI, and behind AI tool wrappers.
Put operation-level examples here even when the browser editor hosts the example through editor.doc.*. Document API is not editor-only and should not be nested under Document Engine just because an operation can run headless.
| Example | Pattern |
|---|---|
| content-controls/tagged-inline-text | The smallest content-control workflow: wrap a word, find by tag, update value. |
| metadata-anchors | The smallest metadata-anchor workflow: attach a JSON payload to a span, then list, get, resolve, and remove it. |
Engine-level workflows that are not a single Document API operation primitive. Keep new Document API examples in document-api/; use this folder for workflows such as diffing and engine-driven redlining.
| Example | Docs |
|---|---|
| diffing | docs |
| ai-redlining | docs |
Document editing through models and agents.
| Example | Description |
|---|---|
| bedrock | AWS Bedrock Converse API with tool use |
| streaming | Stream model output into a visible editor |
| redlining | LLM-driven tracked-change review (browser) |
| footnote-tool-agent | Real LLM tool-use loop: model picks addFootnoteCitation, browser executes against editor.doc |
Edge cases and infrastructure-level patterns. Most consumers won't need these.
| Example | Notes |
|---|---|
| extensions/custom-mark | Custom mark authoring |
| extensions/custom-node | Custom node authoring |
| headless-toolbar | Framework-agnostic toolbar substrate |
cd <path-to-example>
pnpm install
pnpm devFor the CDN example, open index.html directly or run npx serve ..
Example backend servers (editor/collaboration/backends/node-sdk, editor/collaboration/providers/superdoc-yjs, editor/collaboration/providers/hocuspocus, ai/footnote-tool-agent, ai/streaming, editor/collaboration/backends/fastapi) are for local development only. They listen on plain HTTP or unencrypted WebSocket and have no TLS configuration.
Never expose these servers directly to the internet. If you need to run an example in a non-local environment, terminate TLS at a reverse proxy in front of the server.
Risk acceptance: HTTP-only transport is an accepted trade-off for local example servers. Production deployments must add TLS termination externally.