Structured Content Bridge

Latest workflow

Structured Content Bridge

The structured content bridge keeps standard rich text editing intact while adding semantic JSON, Markdown conversion, static HTML rendering, and validation on top of the browser editor.

Open live demo AI Toolkit docs

Basic setup

Load the bridge after the core editor bundle. The bridge augments the editor instance with JSON helpers and exposes Markdown/render helpers on RichTextEditor.

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<script src="/richtexteditor/plugins/structured-content-bridge.js"></script>

<script>
  RichTextEditorStructuredContent.installStructuredContentBridge();
  var editor = new RichTextEditor("#editor");
</script>

Editor methods

editor.getJSON() returns a semantic document tree plus compatibility fields.
editor.setJSON(documentModel) restores content from the node-based structure.

var documentModel = editor.getJSON();
editor.setJSON({
  type: "doc",
  version: 2,
  format: "richtexteditor-json",
  content: [
    {
      type: "paragraph",
      content: [{ type: "text", text: "Restored from JSON" }]
    }
  ]
});

Global helpers

RichTextEditor.fromMarkdown(markdown)
RichTextEditor.toMarkdown(documentModel)
RichTextEditor.renderHTML(documentModel)
RichTextEditor.validateStructuredContent(documentModel)

var restored = RichTextEditor.fromMarkdown("## Hello\\n\\nMarkdown works too");
var html = RichTextEditor.renderHTML(restored);
var validation = RichTextEditor.validateStructuredContent(restored);
var markdown = RichTextEditor.toMarkdown(restored);

Try it

Use the Structured JSON demo to inspect live HTML output, semantic JSON, Markdown round-tripping, static HTML rendering, and validation results side by side.

Documentation