Live examples

Examples gallery and support matrix

The examples gallery lists every surface below on one page: single-line and multi-line rich text, each toolbar layout, capability sets from basic marks to tables, images and Markdown, notes, pages and the full editor. Each card lists its packages and its configuration code, and opens the live editor.

The element support matrix shows which elements and marks each configuration supports. It is generated from each configuration's extension registry and schema policy, and a test fails if it drifts from the editor.

Note examples use pageless paragraph editing and show different toolbar presentations. The content embed adds images and tables to the continuous editor. The full example uses paginated layout with the starter capabilities.

Typed editor surfaces

The typed DocumentEditor(controller:, surface:, chrome:) in each surface: one line (Enter submits), a rich-text field with a format bubble, pageless notes with a toolbar, and pages with the full chrome. See Editor widget.

Small embedded widget

Open the embedded widget: the same rich-text editor inside a 320 × 160 box, with natural wrapping and scrolling.

Rich-text note

Open a rich-text note: paragraphs and text marks with one toolbar row. The tutorial shows a complete widget using the same basic composition.

Images and tables inside an embedded widget

Open the content embed: a 520 × 320 pageless editor composing paragraph, text-editing, image and table extensions. Its schema admits paragraph text, block images and tables, including editable cell paragraphs. The toolbar follows those installed capabilities. Notes, page regions and other advanced content still require the paginated surface.

Two toolbar rows

Open two toolbar rows: the same note capabilities with more room for controls.

Floating controls

Open floating controls: formatting controls remain inside the editor viewport.

Collapsed controls

Open collapsed controls: start with a compact trigger and expand when needed.

Full document surface

Open the full document surface: the starter extensions with a configurable toolbar.

Open the complete playground to explore the broader document examples and review format support before choosing a document class.

Markdown import and export

Decode Markdown into a Document, edit it with the ordinary document editor, and export Markdown when needed. The file formats guide shows this conversion boundary. The playground's file controls provide Markdown import and export; they do not switch the editing session into a source editor.

Source examples

Compare the starting points in VitePress's native code tabs. Each tab includes the same source file used by its guide.

Rich-text note

import 'package:material_ui/material_ui.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';

void main() => runApp(
  MaterialApp(
    theme: DocumentEditorTheme.light().materialTheme,
    darkTheme: DocumentEditorTheme.dark().materialTheme,
    home: const RichNote(),
  ),
);

class RichNote extends StatefulWidget {
  const RichNote({super.key});

  @override
  State<RichNote> createState() => _RichNoteState();
}

class _RichNoteState extends State<RichNote> {
  late final controller = DocumentEditorController.richText(
    layoutMode: DocumentEditorLayoutMode.pageless,
    document: Document.empty(title: 'A note'),
  );

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    body: Center(
      child: SizedBox(
        width: 320,
        height: 160,
        child: DocumentEditor(
          controller: controller,
          configuration: DocumentEditorConfiguration.richText(
            toolbar: DocumentToolbarConfiguration(
              actionIds: {
                HistoryActionId.undo,
                HistoryActionId.redo,
                MarkActionId.bold,
                MarkActionId.italic,
                MarkActionId.underline,
              },
            ),
          ),
        ),
      ),
    ),
  );
}

Add tables

import 'package:flutter/widgets.dart';
import 'package:vyuh_document_editor/vyuh_document_editor.dart';
import 'package:vyuh_document_editor/document_editor_extensions.dart'
    show TableDocumentExtension;
import 'package:vyuh_document_extension_table/vyuh_document_extension_table.dart';

final controller = DocumentEditorController(
  layoutMode: DocumentEditorLayoutMode.pageless,
  document: Document.empty(),
  extensions: [...DocumentExtension.richText, const TableDocumentExtension()],
  schema: DocumentSchemaPolicy.restricted(
    blockTypes: {ParagraphBlock.schemaTypeValue, TableBlock.schemaTypeValue},
    inlineTypes: {TextRun.schemaTypeValue},
    markTypes: TextMark.values,
  ),
);

void addTable() => controller.insertTable(rows: 3, cols: 2);

Widget buildTableNote() => SizedBox(
  width: 520,
  height: 320,
  child: DocumentEditor(
    controller: controller,
    configuration: const DocumentEditorConfiguration(
      layoutMode: DocumentEditorLayoutMode.pageless,
    ),
  ),
);

Floating toolbar

import 'package:vyuh_document_editor/vyuh_document_editor.dart';

DocumentEditor buildToolbar(DocumentEditorController controller) =>
    DocumentEditor(
      controller: controller,
      configuration: DocumentEditorConfiguration(
        toolbar: DocumentToolbarConfiguration(
          rows: DocumentWorkspaceToolbarRows.doubleRow,
          placement: DocumentToolbarPlacement.floating,
          collapsible: true,
          initiallyExpanded: false,
          actionIds: {
            HistoryActionId.undo,
            HistoryActionId.redo,
            MarkActionId.bold,
            MarkActionId.italic,
            MarkActionId.underline,
          },
        ),
      ),
    );

Native Dart snippets throughout these guides are included from one set of source files:

Example	Guide
rich-text-field.dart	Tutorial: a rich-text field
notes-toolbar.dart	Tutorial: toolbar and structure
tutorial-document-editor.dart	Tutorial: a document editor
tutorial-pages.dart	Tutorial: pages, headers and footers
tutorial-review.dart	Tutorial: review and comments
tutorial-markdown-html.dart, tutorial-docx.dart, tutorial-pdf.dart	Tutorial: import and export
tutorial-graphics.dart	Tutorial: diagrams and math
tutorial-workspace.dart	Tutorial: workspace and inspector
typed-commands.dart	Typed Document API
collaboration.dart	Collaboration
agent-json.dart	Agents
note.dart	Tutorial: a rich-text field
content.dart	Read and edit content
tables.dart	Choose extensions
toolbar.dart	Toolbar shapes
authoring.dart	Atomic authoring
loading.dart	Loading and persistence
markdown.dart	Markdown import and export
workspace.dart	Compose workspace chrome
page-regions.dart	Author page headers and footers
link.dart	Links and focus
resources.dart	Fonts and assets
inspector.dart	Properties inspector
policy.dart	Behavior and configuration

They can be copied into a consumer project for Dart analysis. The extractor copies the exact displayed sources; it does not install or resolve packages.

Next

• Tutorial
• Installation