slateToTemplate

From @slate-serializers/template. Renders each top-level Slate node to either a string of HTML (via the same pipeline as slateToHtml) or a custom value from your configuration. Framework-agnostic: custom serializers can return React/Vue/Astro nodes or any value your app knows how to mount.

• Default config: packages/template/src/lib/config/default.ts
• Payload CMS: packages/template/src/lib/config/payload.ts

Basic usage

Without custom serializers, each block becomes an HTML string (same idea as serializing one top-level node at a time with slateToHtml).

import { slateToTemplate, slateToTemplateConfig } from '@slate-serializers/template'

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

const out = slateToTemplate(slate, slateToTemplateConfig)
// string[] e.g. ["<h1>Heading 1</h1>", "<p>Paragraph 1</p>"]

customElementSerializers

Map a Slate type to a function that returns a non-HTML value (for example JSX). Unmapped types fall back to slateToHtml([node], config) for that node.

import {
  slateToTemplateConfig,
  type SlateToTemplateConfig,
} from '@slate-serializers/template'

const config: SlateToTemplateConfig = {
  ...slateToTemplateConfig,
  customElementSerializers: {
    button: ({ node }) =>
      `<button class="${node.buttonType ?? 'primary'}">${node.children?.[0]?.text ?? ''}</button>`,
  },
}

Custom serializers may return a string, JSX, or another value your app knows how to render from the resulting array.

Relationship to other packages

• slateToHtml — always produces an HTML string for the whole document.
• SlateToReact — React component output: flat config with the same keys as slateToHtml, plus elementTransforms.
• slateToTemplate — one output slot per top-level node; mix HTML strings and custom outputs.

Try the interactive demo.