Skip to content

Commit 424836b

Browse files
caio-pizzolcaio-pizzol
committed
docs: rewrite Quick start as linear Install → Render → Load → Export → Next (SD-2873)
The previous quickstart (269 lines) opened with a Mermaid decision tree and split into three parallel sections (AI agent, backend SDK, browser editor). It worked as a map but front-loaded too much surface area before the reader had written any code. New shape is a single linear path for the most common audience (someone embedding the DOCX editor in a web app): 1. Install (npm / React / CDN tabs) 2. Render the editor (JS / React tabs) 3. Load a document (URL / File input / Fetch tabs) 4. Export it (Download / Upload tabs) 5. What are you building? table — routes to Custom UI, Built-in UI, Document Engine, AI, Collaboration based on the goal AI agents get an Info callout near the top with the npx @superdoc-dev/create one-liner — visible but out of the main flow. SDK/CLI moves to the routing table; agents and backend code aren't the primary quickstart audience. Result: ~140 lines, single read path, decision lives at the bottom once the reader has a working editor.
1 parent cc6f5a3 commit 424836b

1 file changed

Lines changed: 95 additions & 215 deletions

File tree

‎apps/docs/getting-started/quickstart.mdx‎

Lines changed: 95 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -3,265 +3,145 @@ title: Quick start
33
keywords: "superdoc quickstart, docx editor tutorial, word editor setup, javascript docx quick start, mcp docx, ai agent docx, llm document editing, superdoc init"
44
---
55

6-
## Pick your surface
6+
By the end of this page you'll have a working DOCX editor in your app — load a Word file, edit it, export it back as `.docx`.
77

8-
```mermaid actions={false}
9-
flowchart TD
10-
Start{What are you building?}
11-
Agent[AI agent or LLM tool<br/>that edits DOCX]
12-
Server[Server / script<br/>editing DOCX]
13-
Editor[Embedded DOCX editor<br/>in a web app]
14-
UI{Custom UI<br/>or built-in?}
8+
<Info>
9+
**Using an AI coding agent?** Run `npx @superdoc-dev/create` in your project. It writes an AGENTS.md with SuperDoc-specific instructions and MCP setup. Then see [AI > MCP](/ai/mcp/overview) for the full agent path.
10+
</Info>
1511

16-
Start -->|AI agents| Agent
17-
Start -->|Backend code| Server
18-
Start -->|Browser editor| Editor
19-
Editor --> UI
20-
UI -->|Built-in is fine| BuiltIn[SuperDoc + Modules]
21-
UI -->|My own React UI| BYO[SuperDoc + Bring Your Own UI]
22-
23-
Agent --> AgentTools["MCP server<br/>or @superdoc-dev/sdk"]
24-
Server --> SDK["@superdoc-dev/sdk<br/>or @superdoc-dev/cli"]
25-
```
26-
27-
Each branch below maps to a specific section.
28-
29-
## Using an AI coding agent?
30-
31-
Run this first. It generates an AGENTS.md that teaches your agent how to use SuperDoc.
32-
33-
```bash
34-
npx @superdoc-dev/create
35-
```
36-
37-
Then set up the MCP server so your agent can edit DOCX files directly:
12+
## 1. Install
3813

3914
<Tabs>
40-
<Tab title="Claude Code">
15+
<Tab title="npm">
4116
```bash
42-
claude mcp add superdoc -- npx @superdoc-dev/mcp
17+
npm install superdoc
4318
```
4419
</Tab>
45-
<Tab title="Cursor">
46-
Add to `~/.cursor/mcp.json`:
47-
48-
```json
49-
{
50-
"mcpServers": {
51-
"superdoc": {
52-
"command": "npx",
53-
"args": ["@superdoc-dev/mcp"]
54-
}
55-
}
56-
}
20+
<Tab title="React">
21+
```bash
22+
npm install @superdoc-dev/react
5723
```
5824
</Tab>
59-
<Tab title="Windsurf">
60-
Add to `~/.codeium/windsurf/mcp_config.json`:
61-
62-
```json
63-
{
64-
"mcpServers": {
65-
"superdoc": {
66-
"command": "npx",
67-
"args": ["@superdoc-dev/mcp"]
68-
}
69-
}
70-
}
25+
<Tab title="CDN">
26+
```html
27+
<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css" rel="stylesheet">
28+
<script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.min.js"></script>
7129
```
30+
`SuperDoc` becomes a global — use `new SuperDoc({...})` directly.
7231
</Tab>
7332
</Tabs>
7433

75-
Done. Ask your agent to open a `.docx` file and make an edit.
76-
77-
[MCP setup guide →](/ai/mcp/overview) · [LLM tools →](/ai/agents/llm-tools)
78-
79-
---
80-
81-
## Edit DOCX from backend code
34+
## 2. Render the editor
8235

8336
<Tabs>
84-
<Tab title="Node.js">
85-
```bash
86-
npm install @superdoc-dev/sdk
37+
<Tab title="JavaScript">
38+
```html
39+
<div id="editor" style="height: 100vh"></div>
40+
41+
<script type="module">
42+
import { SuperDoc } from 'superdoc';
43+
import 'superdoc/style.css';
44+
45+
const superdoc = new SuperDoc({
46+
selector: '#editor',
47+
});
48+
</script>
8749
```
50+
</Tab>
51+
<Tab title="React">
52+
```jsx
53+
import { SuperDocEditor } from '@superdoc-dev/react';
54+
import '@superdoc-dev/react/style.css';
8855

89-
```typescript
90-
import { SuperDocClient } from '@superdoc-dev/sdk';
91-
92-
const client = new SuperDocClient({ defaultChangeMode: 'tracked' });
93-
const doc = await client.open({ doc: './contract.docx' });
94-
95-
// query, edit, format, comment, track changes...
96-
97-
await doc.save();
98-
await doc.close();
56+
export default function App() {
57+
return <SuperDocEditor />;
58+
}
9959
```
10060
</Tab>
101-
<Tab title="Python">
102-
```bash
103-
pip install superdoc-sdk
104-
```
61+
</Tabs>
10562

106-
```python
107-
from superdoc import SuperDocClient
63+
That's a blank editor. Give it a document.
10864

109-
client = SuperDocClient(default_change_mode="tracked")
110-
doc = client.open({"doc": "./contract.docx"})
65+
## 3. Load a document
11166

112-
# query, edit, format, comment, track changes...
67+
Pass a URL, a `File` from an input, or a `Blob` from your API to `document`.
11368

114-
doc.save()
115-
doc.close()
69+
<Tabs>
70+
<Tab title="URL">
71+
```javascript
72+
new SuperDoc({
73+
selector: '#editor',
74+
document: '/files/contract.docx',
75+
});
11676
```
11777
</Tab>
118-
<Tab title="CLI">
119-
```bash
120-
npm install -g @superdoc-dev/cli
78+
<Tab title="File input">
79+
```javascript
80+
document.getElementById('file-input').addEventListener('change', (e) => {
81+
new SuperDoc({
82+
selector: '#editor',
83+
document: e.target.files[0],
84+
});
85+
});
12186
```
122-
123-
```bash
124-
superdoc open contract.docx
125-
superdoc find --type text --pattern "ACME Corp"
126-
superdoc replace --target-json '...' --text "NewCo Inc." --change-mode tracked
127-
superdoc save && superdoc close
87+
</Tab>
88+
<Tab title="Fetch">
89+
```javascript
90+
const response = await fetch('/api/documents/123');
91+
const blob = await response.blob();
92+
93+
new SuperDoc({
94+
selector: '#editor',
95+
document: new File([blob], 'document.docx'),
96+
});
12897
```
12998
</Tab>
13099
</Tabs>
131100

132-
[SDK docs →](/document-engine/sdks) · [CLI docs →](/document-engine/cli)
133-
134-
---
135-
136-
## Embed a DOCX editor
137-
138-
<Steps>
139-
<Step title="Install">
140-
<Tabs>
141-
<Tab title="npm">
142-
```bash
143-
npm install superdoc
144-
```
145-
</Tab>
146-
<Tab title="CDN">
147-
```html
148-
<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css" rel="stylesheet">
149-
<script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.min.js"></script>
150-
```
151-
`SuperDoc` becomes a global — use `new SuperDoc({...})` directly.
152-
</Tab>
153-
</Tabs>
154-
</Step>
155-
156-
<Step title="Mount the editor">
157-
<Tabs>
158-
<Tab title="npm">
159-
```html
160-
<div id="editor" style="height: 100vh"></div>
161-
162-
<script type="module">
163-
import { SuperDoc } from 'superdoc';
164-
import 'superdoc/style.css';
165-
166-
const superdoc = new SuperDoc({
167-
selector: '#editor',
168-
});
169-
</script>
170-
```
171-
</Tab>
172-
<Tab title="CDN">
173-
```html
174-
<div id="editor" style="height: 100vh"></div>
175-
176-
<script>
177-
const superdoc = new SuperDoc({
178-
selector: '#editor',
179-
});
180-
</script>
181-
```
182-
</Tab>
183-
</Tabs>
184-
That's a blank editor. Now give it a file.
185-
</Step>
186-
187-
<Step title="Load a document">
188-
Pass a URL, a `File` from an input, or a `Blob` from your API.
189-
190-
<Tabs>
191-
<Tab title="URL">
192-
```javascript
193-
new SuperDoc({
194-
selector: '#editor',
195-
document: '/files/contract.docx',
196-
});
197-
```
198-
</Tab>
199-
<Tab title="File input">
200-
```html
201-
<input type="file" accept=".docx" id="file-input" />
202-
<div id="editor" style="height: 100vh"></div>
203-
204-
<script type="module">
205-
import { SuperDoc } from 'superdoc';
206-
import 'superdoc/style.css';
207-
208-
document.getElementById('file-input').addEventListener('change', (e) => {
209-
new SuperDoc({
210-
selector: '#editor',
211-
document: e.target.files[0],
212-
});
213-
});
214-
</script>
215-
```
216-
</Tab>
217-
<Tab title="Fetch">
218-
```javascript
219-
const response = await fetch('/api/documents/123');
220-
const blob = await response.blob();
221-
222-
new SuperDoc({
223-
selector: '#editor',
224-
document: new File([blob], 'document.docx'),
225-
});
226-
```
227-
</Tab>
228-
</Tabs>
229-
</Step>
230-
</Steps>
231-
232101
Tracked changes, tables, images, headers/footers — all working.
233102

234-
### Using React?
103+
## 4. Export it
235104

236-
```jsx
237-
import { SuperDocEditor } from '@superdoc-dev/react';
238-
import '@superdoc-dev/react/style.css';
105+
Default `superdoc.export()` triggers a browser download. To upload to your backend instead, ask for the raw `Blob`:
239106

240-
function App() {
241-
return <SuperDocEditor document={file} />;
242-
}
243-
```
107+
<Tabs>
108+
<Tab title="Download">
109+
```javascript
110+
await superdoc.export();
111+
```
112+
</Tab>
113+
<Tab title="Upload to backend">
114+
```javascript
115+
const blob = await superdoc.export({ triggerDownload: false });
116+
await fetch('/api/save', { method: 'POST', body: blob });
117+
```
118+
</Tab>
119+
</Tabs>
244120

245-
Install with `npm install @superdoc-dev/react`. [Full React guide →](/getting-started/frameworks/react)
121+
For HTML, JSON, or Markdown output, see [Import and export](/getting-started/import-export).
246122

247-
Want a custom toolbar, comments sidebar, or review panel instead of the built-in UI? See [Bring Your Own UI](/editor/custom-ui/overview).
123+
## What are you building?
248124

249-
---
125+
| You want to... | Start here |
126+
|---|---|
127+
| Embed Word editing in a web app | This page (already done) |
128+
| Build a custom toolbar/sidebar | [Custom UI](/editor/custom-ui/overview) |
129+
| Use SuperDoc's built-in toolbar/comments | [Built-in UI](/editor/built-in-ui/overview) |
130+
| Edit DOCX from backend code | [Document Engine SDK](/document-engine/sdks) or [CLI](/document-engine/cli) |
131+
| Let Claude/Cursor edit DOCX files | [AI > MCP](/ai/mcp/overview) |
132+
| Add real-time collaborative editing | [Collaboration](/editor/collaboration/overview) |
250133

251134
## What's next
252135

253136
<CardGroup cols={2}>
254-
<Card title="Document Engine" icon="screwdriver-wrench" href="/document-engine/overview">
255-
Architecture and how to choose a surface
256-
</Card>
257-
<Card title="Bring Your Own UI" icon="layout-dashboard" href="/editor/custom-ui/overview">
258-
Custom React toolbar, comments, review panel
137+
<Card title="Custom UI" icon="layout-dashboard" href="/editor/custom-ui/overview">
138+
Build your own React toolbar, comments sidebar, and review panel
259139
</Card>
260-
<Card title="LLM tools" icon="sparkles" href="/ai/agents/llm-tools">
261-
Build custom AI agents with the SDK
140+
<Card title="Document Engine" icon="screwdriver-wrench" href="/document-engine/overview">
141+
Programmatic DOCX editing from Node, Python, CLI, or AI agents
262142
</Card>
263143
<Card title="Framework guides" icon="code" href="/getting-started/frameworks/react">
264-
React, Vue, Angular, Vanilla JS
144+
React, Vue, Nuxt, Angular, Laravel, Vanilla JS
265145
</Card>
266146
<Card title="Examples" icon="arrow-up-right-from-square" href="https://github.com/superdoc-dev/superdoc/tree/main/examples">
267147
Working demos on GitHub

0 commit comments

Comments
 (0)