Skip to content

Quickstart

Five minutes from a fresh install to rendered blocks on the frontend. This walkthrough uses a Tailor blueprint, but the same contenteditor field type works in any backend form (fields.yaml).

1. Add the field to a blueprint

Add a contenteditor field to a Tailor blueprint, for example app/blueprints/blog/post.yaml:

yaml
fields:
    content:
        label: Content
        type: contenteditor

That is all you need. Optionally you can restrict which blocks are available and how deeply layout blocks may nest:

yaml
fields:
    content:
        label: Content
        type: contenteditor
        allowBlocks: [heading, richtext, image, section]
        maxDepth: 2

Refresh Tailor so the blueprint change is picked up:

bash
php artisan tailor:refresh Blog\Post

2. Author some content

Open (or create) an entry in the backend. The content field renders the block editor:

  1. Click + Add block and pick Heading (in the text group) from the searchable picker. The block appears in the structure tree on the left — click it and type your headline in the inspector's Text field. The live preview in the middle follows as you type.
  2. Click + Add block again and pick Rich Text. Select the new tree row and write a paragraph in the inspector's rich-text editor (bold, italic, link, lists).
  3. Save the entry. The document is stored as JSON in the field.

3. Render it on the frontend

In a CMS page or theme partial, render the stored document with the Twig function:

twig
{{ content_render(record.content)|raw }}

…or attach the renickContent component to the page:

twig
[renickContent]
==
{% component 'renickContent' document=record.content %}

Both routes resolve each block's partial as theme override → plugin default → safe placeholder, so the page renders even before your theme provides any custom block markup.

4. See it

Visit the page: your heading and paragraph render as clean HTML with rc-* utility classes from the block settings.

Where to go next

Take the editor tour to learn nesting, drag & drop, copy/paste and the sidebar — or browse the default blocks.