Docsy HTML

The Docsy HTML package provides HTML import and export for the Docsy editor. It converts a DocumentRoot to HTML and parses HTML back into Docsy blocks.

Try it Live

Features

  • Export DocumentRoot to HTML
  • Import HTML back into Docsy
  • Supports paragraphs, headings, quotes, dividers, code blocks, lists, inline marks, and image embeds
  • Preserves image src, alt, width, and height
  • Uses the html package for parsing

Installation

Add this to your pubspec.yaml:

dependencies:
  docsy_html: ^0.1.3

Usage

import 'package:docsy/docsy.dart';
import 'package:docsy_html/docsy_html.dart';

void main() {
  final doc = DocumentRoot(
    blocks: [
      ParagraphNode(
        inlines: const [
          TextSpanNode('Hello '),
          TextSpanNode('world', marks: TextMarks(bold: true)),
        ],
      ),
      EmbedNode(
        kind: 'image',
        data: const {
          'src': 'https://example.com/image.png',
          'alt': 'Example image',
          'width': 320,
          'height': 180,
        },
      ),
    ],
  );

  final html = DocsyHtmlCodec().encode(doc);
  final roundTrip = DocsyHtmlCodec().decode(html);

  print(html);
  print(roundTrip.blocks.length);
}

Example

<p>Hello <strong>world</strong></p>
<img src="https://example.com/image.png" alt="Example image" width="320" height="180" />

License

MIT License. See LICENSE.

Libraries

docsy_html