slate-serializers
View project on npmView project on GitHub

slate-serializers

slate-serializers helps Slate.js apps turn editor content into HTML and back, render it as React components, walk an intermediate DOM tree, or emit template-style output (e.g. JSX or partial HTML). Works in Node.js and the browser.

Machine-readable overview for AI tools: llms.txt.

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, and template / custom serializers for non-HTML targets.

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 packageRole
@slate-serializers/htmlslateToHtml, htmlToSlate, and shared configs (depends on DOM internally).
@slate-serializers/domslateToDom — 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/templateslateToTemplate — top-level nodes as HTML strings or custom serializers (e.g. JSX). Docs
@slate-serializers/utilitiesSmall helpers (e.g. style object handling) used by the serializers; rarely needed directly unless you extend them.
slate-serializersMeta 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

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} />
}

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.7.0.