Build your own editor
Progress from a first editor to models, pagination, controls, extensions and file operations.
To build a product like Classic with your own toolbar and workspace, start with Core. This tutorial connects content, views and interface step by step; you do not need to understand a complete application first.
You should know Vue 3, TypeScript and basic package management. New to QuireKit? Start with your first editor.
Follow your current task
| Task | Chapter | What you learn |
|---|---|---|
| Put an editor on a page | Project | Create and destroy Editor in one Vue component |
| Decide what content stores | Document model | Understand nodes and marks; choose article or Word models |
| Display Canvas/SVG content | View | Register views and distinguish display size from pagination |
| Add your toolbar | Commands and interface | Run actions and update button state |
| Add new content | Content extension | Implement an editable, selectable, persistable note group |
| Extend Classic | Product plugins | Add ribbon actions, sidebars and file services |
| Save and open documents | Files | Save JSON, validate restores and integrate DOCX |
| Add images, fonts or collaboration | Resources | Find the integration layer for each capability |
Each chapter explains the problem before its code. The complete workspace reference lets you inspect full implementations by file.
What you will build
The final workspace below uses the Word model. Type, select, format and undo; switch Canvas/SVG, save in this browser or download JSON. Core and View provide the editor; the example owns its toolbar and file workflow.
Browser storage is local to this browser. Save edits before opening another file. Media storage, collaboration and review interfaces require separate integrations explained later.
Build a workspace or reuse Classic
With your own workspace, you own the interface, control state and storage workflow. Core manages content and commands; View manages display and input. Classic supplies an existing workspace and ribbon for you to configure and extend.
For an embedded product, see Classic quick start. To build your own, continue with your first editor.