Start with JSON blocks

Code

<div id="entry"></div>

const app = Redactor('#entry', {
    data: [
        {
            type: 'heading',
            data: { level: 1, content: 'Article from JSON' }
        },
        {
            type: 'text',
            data: { content: 'This document starts as a JSON array of blocks passed through the <code>data</code> option.' }
        },
        {
            type: 'image',
            data: {
                src: '/uploads/img_686d56f2477786.jpg',
                alt: 'Sample image'
            }
        },
        {
            type: 'text',
            data: { content: 'After the image, you can mix regular paragraphs with structured blocks such as lists, todos, and tables.' }
        },
        {
            type: 'list',
            data: {
                items: [
                    { content: 'Load content as JSON blocks' },
                    { content: 'Edit each block in the editor' },
                    { content: 'Export HTML or JSON again' }
                ]
            }
        },
        {
            type: 'text',
            data: { content: 'Use a todo list when the article includes tasks or a publishing checklist.' }
        },
        {
            type: 'todo',
            data: {
                items: [
                    { content: 'Review draft', done: true },
                    { content: 'Add screenshots', done: false },
                    { content: 'Publish article', done: false }
                ]
            }
        },
        {
            type: 'text',
            data: { content: 'Tables work the same way — define rows in JSON and Redactor renders editable cells.' }
        },
        {
            type: 'table',
            data: {
                head: true,
                items: [
                    ['Block', 'Loaded from JSON'],
                    ['Heading', 'Yes'],
                    ['Image', 'Yes'],
                    ['Table', 'Yes']
                ]
            }
        },
        {
            type: 'text',
            data: { content: 'Finish with another text block to close the document.' }
        }
    ]
});