# Save and open documents

Start with JSON, then add validation, asynchronous state and DOCX conversion.

Editor modifies content; your application decides where to store it. Start with JSON backups, then validate opened files and distinguish DOCX from your native backup format.

## 1. Read content when saving

```ts [Read JSON at save time]
const content = editor.getJSON()
```

Store the result in your database, API or browser storage. Include a version and model name, such as `version: 1` and `model: 'generic-v1'`, so future versions can recognize older files.

`files/repository.ts` uses `localStorage` for local drafts. Cross-device synchronization needs your own server.

## 2. Confirm which revision was saved

Users may keep typing while saving. Capture the starting document and clear the unsaved indicator only if the current content still matches that revision.

Keep content and unsaved state after failure, and show an error with retry. Browser storage can fail too. `session.ts` coordinates these states without creating a second editable document in Vue.

## 3. Validate before restoring

Check backup version and model, then validate nodes, marks, attributes and children against Schema. Only then replace the document:

```ts [Restore a validated document]
editor.commands.replaceDocument(content)
```

`replaceDocument()` restores the complete document, including top-level attributes; `setContent()` is for ordinary content replacement. On rejection, preserve the original file and draft rather than dropping unknown nodes and overwriting the backup.

See `files/backup.ts` for validation. The example requires saving edits before opening another file.

## 4. Reject outdated loads

By the time asynchronous reading or conversion finishes, users may have edited, opened another file, switched to read-only or left the page.

Before committing, confirm the instance, operation and document still match the starting state. `session.ts` centralizes this check for all file actions.

## 5. Add DOCX

JSON preserves your product model. DOCX requires separate conversion rules. The Word workspace loads public `@quirekit/classic-docx/docx` APIs on demand; `files/docx.ts` handles bytes and conversion results, while `session.ts` decides whether to commit them.

A custom workspace can reuse those conversion APIs. Classic can install `createClassicWordDocxPlugin()` and use `instance.importDocument()` and `exportDocument()`.

Keep and display conversion diagnostics. Images also require media storage: saving a JSON reference does not save the image bytes.

Inspect files by purpose in the [reference](/en/build/reference). Next: [images, fonts and product capabilities](/en/build/resources).