slate-serializers
View project on npmView project on GitHub

slate-serializers

A collection of serializers to convert Slate JSON objects to various formats and vice versa. Designed to work in both Node.js and browser environments.

Getting started

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

Serializer configs use the same DOM model as htmlparser2 / domhandler, but you should not add domhandler as an app dependency for types or constructors. Import types such as ChildNode with import type { ChildNode } from '@slate-serializers/html' (or slate-serializers; see PR #215). Import the Element and Text constructors from the same packages when you build nodes in markTransforms / elementTransforms (see PR #218), e.g. import { Element, Text } from '@slate-serializers/html'.

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 across the monorepo; rarely needed directly unless you extend serializers.
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

Serializers target Slate's modern data model (≥ 0.50). This demo is built with Slate ~0.101 and slate-react ~0.101. The library README notes historical testing on older releases; for compatibility detail and parser choices, see Engineering decisions in the monorepo.