Understand the document model
Learn nodes, formatting and Schema, then choose a structure for articles or Word documents.
The previous chapter passed HTML to content. Core converts that input into a document tree describing the content; it does not store a page screenshot.
How a paragraph becomes a document
A paragraph containing “Hello, QuireKit” has this JSON representation:
{
"type": "doc",
"content": [
{
"type": "paragraph",
"content": [{ "type": "text", "text": "Hello, QuireKit" }]
}
]
}
doc, paragraph and text are nodes. Bold, italic and links are marks attached through a text node's marks. Extra information such as heading level belongs in attrs.
Commands can modify this structure, history can undo changes, and different views can display the same content. Page numbers and selection pixels are results of layout and display.
Schema defines allowed content
Schema is the set of structural rules: which headings exist, what a list may contain, and which marks text supports. Core builds it from the installed Node and Mark extensions.
StarterKit already supplies common structures and formatting. Add a Node when introducing a new content type, such as the note group.
Restoring saved content requires the matching extensions. Unknown nodes must not silently become ordinary paragraphs or disappear.
Choose articles or Word documents
| Product needs | Start with | Difference |
|---|---|---|
| Notes, articles, knowledge bases | StarterKit and the generic document model | Headings, paragraphs and lists follow content order |
| A Word workspace like Classic | Word extension preset and Word document model | Also stores sections, headers, footers, paragraph styles and numbering |
A Word heading may be a styled paragraph rather than a heading node. Wrapping ordinary paragraphs in a page border is not a Word document model, and switching renderers does not add its content rules.
In assembly/word.ts, createClassicWordPreset() supplies compatible extensions and createClassicWordDefaultDocument() supplies matching content. This does not create the Classic toolbar. The preset handles overlapping StarterKit nodes, so do not append a complete StarterKit again.
How the model relates to layout
The model describes the content. A document profile supplies its page, paragraph and table rules. View displays layout results and handles input.
Articles can use continuous layout; Word extensions supply section and pagination rules. Reuse the preset initially. The profile and layout API is for implementing new models or layout capabilities.
Read and save content
const document = editor.state.doc
const selection = editor.state.pm.selection
const backup = editor.getJSON()
Read structure through state.doc and selection through state.pm.selection. Use getJSON() at save boundaries rather than maintaining a second reactive document and replacing content on every edit.
Save your model version too. The complete example distinguishes generic-v1 and word-v1, validating version and Schema before restore. Switching Canvas/SVG changes presentation without changing the model.
Next: display the document with Canvas/SVG. Both complete assemblies are in the workspace reference.