Dashboard
View project on npmView project on GitHub

Convert Slate JSON to HTML

Config:   Default.

Default

slateToHtml

Demo

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

  • the Slate JSON value;
  • serialized HTML; and
  • re-serialized Slate JSON from the serialized HTML using htmlToSlate.
<h2>slateToHtml</h2><h3>Demo</h3><p>Try changing the contents of this editor. The rest of the page updates as you make changes to demonstrate:</p><ul><li>the Slate JSON value;</li><li>serialized HTML; and</li><li>re-serialized Slate JSON from the serialized HTML using <pre><code>htmlToSlate</code></pre>.</li></ul>
{
	children: [
		{
			text: 'slateToHtml'
		}
	],
	type: 'h2'
}
{
	children: [
		{
			text: 'Demo'
		}
	],
	type: 'h3'
}
{
	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: [
		{
			children: [
				{
					text: 'the Slate JSON value;'
				}
			],
			type: 'li'
		},
		{
			type: 'li',
			children: [
				{
					text: 'serialized HTML; and'
				}
			]
		},
		{
			type: 'li',
			children: [
				{
					text: 're-serialized Slate JSON from the serialized HTML using '
				},
				{
					text: 'htmlToSlate',
					code: true
				},
				{
					text: '.'
				}
			]
		}
	]
}
{
	type: 'h2',
	children: [
		{
			text: 'slateToHtml'
		}
	]
}
{
	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: 'serialized HTML; and'
				}
			]
		},
		{
			type: 'li',
			children: [
				{
					text: 're-serialized Slate JSON from the serialized HTML using '
				},
				{
					text: 'htmlToSlate',
					code: true
				},
				{
					text: '.'
				}
			]
		}
	]
}