Vyuh Document

Tutorial ​

Start with the smallest editor, a rich-text field, and grow it into a full document editor. Each step adds one capability and names the packages it needs.

The tutorial, step by step Eight steps grow a rich-text field into a full document editor. Steps one and two use the typed API: a rich-text field with vyuh_document and vyuh_document_editor, then toolbar and structure with vyuh_document_elements. Steps three to eight use the editor runtime: a document editor adds the table, list and image extensions; pages add the field extension; review adds no packages; import and export add the Markdown, HTML, DOCX and PDF codecs; diagrams and math add the Mermaid, KaTeX and diagram editor packages; the workspace adds no packages. STEP · YOU ADD NEW PACKAGES TYPED API EDITOR RUNTIME A rich-text field typed controller and a growing field vyuh_document vyuh_document_editor 1 Toolbar and structure headings, lists, tables, a toolbar row vyuh_document_elements 2 A document editor editor runtime, images, action toolbar extension_table · _list · _image 3 Pages, headers and footers page numbers and footnotes extension_field 4 Review and comments suggesting, comments, accept or reject no new packages 5 Import and export Markdown, HTML, DOCX and PDF md_codec · codec_html codec_docx · codec_pdf 6 Diagrams and math Mermaid, KaTeX, Vyuh diagrams extension_mermaid_editor _katex_editor · _diagram_editor 7 Workspace and inspector scaffold, Properties, rulers no new packages 8 From step 3, names drop the vyuh_document_ prefix.
Eight steps, and the packages each adds
StepYou add
1. A rich-text fieldA typed controller and a field that grows with its text
2. Toolbar and structureHeadings, lists, tasks, tables, a toolbar row, commands from code
3. A document editorThe editor runtime, chosen extensions, images, the action toolbar
4. Pages, headers and footersPages, header and footer stories, page numbers, footnotes
5. Review and commentsSuggesting mode, comments, accept and reject
6. Import and exportMarkdown, HTML, DOCX and PDF
7. Diagrams and mathMermaid, KaTeX equations and Vyuh diagrams
8. Workspace and inspectorWorkspace scaffold, Properties inspector, rulers

Two levels of API

Steps 1 and 2 use the typed API: DocumentController and DocumentEditor(controller:, surface:, chrome:). It is pure Dart, so the same controller also runs headless for servers and agents. From step 3 you use the editor runtime, DocumentEditorController, for host bindings: images, fonts, links, review, export and Properties. Both share one engine and one document model.

Prefer to see it first? Open the field, notes and pages surfaces in the playground.

Before you start ​

Follow Installation to add a registry token. Every step assumes a Flutter app with MaterialApp at the root.

Next ​

Start with step 1: a rich-text field.