slate-serializers
View project on npmView project on GitHub

Convert Slate JSON to React JSX

Change configuration

Default

Edit Slate content

slateToReact

Demo

Try changing the contents of this editor. The rest of the page updates as you make changes to demonstrate:

  • the Slate JSON value;
  • content rendered using the <SlateToReact> component.

SlateToReact output

slateToReact

Demo

Try changing the contents of this editor. The rest of the page updates as you make changes to demonstrate:

  • the Slate JSON value;
  • content rendered using the &lt;SlateToReact&gt; component.

Slate value

{
	type: 'h2',
	children: [
		{
			text: 'slateToReact'
		}
	]
}
{
	type: 'h3',
	children: [
		{
			text: 'Demo'
		}
	]
}
{
	type: 'p',
	children: [
		{
			text: 'Try changing the contents of this editor. The rest of the page updates as you make changes to demonstrate:'
		}
	]
}
{
	type: 'ul',
	children: [
		{
			type: 'li',
			children: [
				{
					text: 'the Slate JSON value;'
				}
			]
		},
		{
			type: 'li',
			children: [
				{
					text: 'content rendered using the '
				},
				{
					text: '<SlateToReact>',
					code: true
				},
				{
					text: ' component.'
				}
			]
		}
	]
}