slate-serializers

Turn Slate.js editor content into HTML and back, render it as React components, walk an intermediate DOM tree, emit template-style output, or export Markdown. Works in Node.js and the browser.

Machine-readable overview for AI tools: llms.txt

slateToHtml
@slate-serializers/html
@slate-serializers/html on npm @slate-serializers/html on GitHub
Convert Slate JSON to HTML.
Docs Demo
htmlToSlate
@slate-serializers/html
@slate-serializers/html on npm @slate-serializers/html on GitHub
Convert HTML to Slate JSON.
Docs Demo
slateToReact
@slate-serializers/react
@slate-serializers/react on npm @slate-serializers/react on GitHub
Convert Slate JSON to React.
Docs Demo
slateToTemplate
@slate-serializers/template
@slate-serializers/template on npm @slate-serializers/template on GitHub
Convert Slate JSON to an array of HTML strings mixed with custom serializers (e.g. JSX).
Docs Demo
slateToMarkdown
@slate-serializers/markdown
@slate-serializers/markdown on npm @slate-serializers/markdown on GitHub
Convert Slate JSON to GitHub Flavored Markdown.
Docs Demo
slateToDom
@slate-serializers/dom
@slate-serializers/dom on npm @slate-serializers/dom on GitHub
Convert Slate JSON to a htmlparser2 DOM before serializing to HTML—useful when you need to manipulate the tree first.
Docs

Getting started

If you use Slate.js and need to store or display rich text outside the editor, these packages cover the common paths: HTML round-trip, React rendering, a DOM stage before HTML, template / custom serializers for non-HTML targets, and Markdown export.

Install only the packages you need. Each serializer is published under @slate-serializers/ on npm. The umbrella package slate-serializers re-exports the HTML and DOM serializers and their default configs—useful if you want a single dependency for server-side HTML ↔ Slate workflows.

DOM types and constructors

When you write custom transforms, import DOM types and constructors from the serializers — not from domhandler directly:

import type { ChildNode } from '@slate-serializers/html'
import { Element, Text } from '@slate-serializers/html'

// Use Element / Text in markTransforms and elementTransforms

The same exports are available from slate-serializers and @slate-serializers/dom.

Packages at a glance

npm package	Role
@slate-serializers/html	`slateToHtml`, `htmlToSlate`, and shared configs (depends on DOM internally).
@slate-serializers/dom	`slateToDom` — `htmlparser2` DOM nodes before stringifying to HTML. Use when you need to inspect or tweak the DOM first. Docs
@slate-serializers/react	`<SlateToReact />` for React output: same top-level keys as `slateToHtml`, plus `elementTransforms` for React nodes.
@slate-serializers/template	`slateToTemplate` — top-level nodes as HTML strings or custom serializers (e.g. JSX). Docs
@slate-serializers/markdown	`slateToMarkdown` — Slate JSON to a GitHub Flavored Markdown string. Docs
@slate-serializers/utilities	Small helpers (e.g. style object handling) used by the serializers; rarely needed directly unless you extend them.
slate-serializers	Meta package: re-exports `htmlToSlate`, `slateToHtml`, `slateToDom`, and related configs from the HTML/DOM packages.

Install

npm install @slate-serializers/html slate slate-react
# or, for React output:
npm install @slate-serializers/react slate slate-react
# or, for Markdown output:
npm install @slate-serializers/markdown

Minimal examples

HTML round-trip:

import { slateToHtml, htmlToSlate } from '@slate-serializers/html'

const slate = [{ type: 'p', children: [{ text: 'Hello' }] }]
const html = slateToHtml(slate)
const back = htmlToSlate(html)

React output:

import { SlateToReact } from '@slate-serializers/react'

export function RichText({ value }: { value: any[] }) {
  return <SlateToReact node={value} />
}

Markdown output:

import { slateToMarkdown } from '@slate-serializers/markdown'

const slate = [{ type: 'p', children: [{ text: 'Hello ' }, { text: 'world', bold: true }] }]
const markdown = slateToMarkdown(slate) // 'Hello **world**'

Slate version

These packages target Slate's modern document model (Slate ≥ 0.50). This site uses Slate ~0.101 and slate-react ~0.101 with @slate-serializers/* ^2.8.2.

Packages

slateToHtml

htmlToSlate

slateToReact

slateToTemplate

slateToMarkdown