Dashboard
View project on npmView project on GitHub

slateToHtml

All output.html file content on this page is generated with serializers.

Default

By default, slateToHtml incorporates transformation rules based on the example in Deserializing | Serializing | Slate.


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

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

const serializedToHtml = slateToHtml(slate)

output.html
<h1>Heading 1</h1><p>Paragraph 1</p>

Configuration

Slate JS has a schema-less core. It makes few assumptions the schema of the data you will be transforming. See Principles | Introduction | Slate

As a result, it is likely that you will need to create your own configuration file that implements your schema.

Starting point

Payload CMS

If you are using Slate Rich Text in Payload CMS, a dedicated configuration file is available. See slateToHtml: Payload CMS configuration.

Options

markMap

Map Slate JSON properties to HTML formatting element tags.


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

const slate = [
  {
    "type": "p",
    "children": [
      {
        "text": "Subscript and bold text",
        "bold": true,
        "subScript": true
      }
    ]
  }
]

const config = {
  ...slateToHtmlConfig,
  markMap: {
    // bold already in default configuration
    ...slateToHtmlConfig.markMap,
    subScript: ['sub'],
  },
}

const serializedToHtml = slateToHtml(slate, config)

output.html
<p><strong><sub>Subscript and bold text</sub></strong></p>

elementMap

Map Slate JSON type values to HTML element tags.


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

const slate = [
  {
    "type": "h1",
    "children": [
      {
        "text": "Heading 1"
      }
    ]
  },
  {
    "type": "heading-one",
    "children": [
      {
        "text": "Heading 1 (identified with our custom type)"
      }
    ]
  }
]

const config = {
  ...slateToHtmlConfig,
  elementMap: {
    // default configuration includes 'h1'
    ...slateToHtmlConfig.elementMap,
    ['heading-one']: 'h1',
  },
}

const serializedToHtml = slateToHtml(slate, config)

output.html
<h1>Heading 1</h1><h1>Heading 1 (identified with our custom type)</h1>

markTransforms

Define transform functions for Slate JSON properties.


import { slateToHtml, slateToHtmlConfig } from '@slate-serializers/html'
import { Element } from "domhandler"

const slate = [
  {
    "type": "p",
    "children": [
      {
        "bold": true,
        "fontSize": "96px",
        "text": "Paragraph"
      }
    ]
  }
]

const config = {
  ...slateToHtmlConfig,
  markTransforms: {
    ...slateToHtmlConfig.markTransforms,
    fontSize: ({ node }) => {
      return new Element('span', {
        style: `font-size:${node.fontSize};`
      })
    }
  },
}

const serializedToHtml = slateToHtml(slate, config)

output.html
<p><span style="font-size:96px;"><strong>Paragraph</strong></span></p>

elementTransforms

Map Slate JSON type values to HTML element tags.


import { slateToHtml, slateToHtmlConfig } from '@slate-serializers/html'
import { Element } from "domhandler"

const slate = [
  {
    "type": "p",
    "children": [
      {
        "text": "Paragraph"
      }
    ]
  },
  {
    "type": "image",
    "url": "https://picsum.photos/id/237/200/300"
  }
]

const config = {
  ...slateToHtmlConfig,
  elementTransforms: {
    ...slateToHtmlConfig.elementTransforms,
    image: ({ node }) => {
      return new Element('img', {
        src: node.url,
      })
    },
  },
}

const serializedToHtml = slateToHtml(slate, config)

output.html
<p>Paragraph</p><img src="https://picsum.photos/id/237/200/300">

elementAttributeTransform

Apply attribute transformations to every node.

Formatting

Control the way resulting HTML is encoded/formatted.

encodeEntities

See cheeriojs/dom-serializer - encodeEntities.

  • Default: true
alwaysEncodeBreakingEntities

Encode &, < and > regardless of other option settings.

  • Default: false
alwaysEncodeCodeEntities

Encode entities in <pre> tags regardless of other option settings.

  • Default: true
convertLineBreakToBr

Convert \n line breaks in Slate text nodes to an HTML <br> element.

defaultTag

Render a HTML element for Slate nodes that have no type.