@slate-serializers/dom

@slate-serializers/dom

Convert Slate JSON to a domhandler document tree (the same DOM model used by htmlparser2 / html-entities).

It is used by @slate-serializers/html (slateToHtml) before serializing to an HTML string. Use slateToDom directly when you want to inspect or manipulate the tree (e.g. with domutils) before calling dom-serializer yourself.

Live examples: slateToDom on the demo site.

Install

npm install @slate-serializers/dom

Usage

import { slateToDomConfig, slateToDom } from '@slate-serializers/dom'

const slate = [
  {
    type: 'h1',
    children: [{ text: 'Heading 1' }],
  },
]

const dom = slateToDom(slate, slateToDomConfig)

Configuration

• SlateToDomConfig — markMap, elementMap, elementTransforms, markTransforms, elementAttributeTransform, and formatting options. See slateToDom configuration in the repo and the interactive docs.

DOM helpers from this package

Element and Text are re-exported from domhandler so you can use new Element(...) without adding domhandler only for the constructor:

import { Element, type SlateToDomConfig } from '@slate-serializers/dom'

ChildNode is available as import type { ChildNode } only.

Engineering

See Engineering decisions.