Block Editor

Description

The Block Editor revolutionizes rich content authoring in dotCMS by turning static text fields into a modular, structured, block-based editing experience. Instead of wrestling with long HTML content blobs, content creators build with meaningful units — paragraphs, headings, lists, tables, images, videos, embedded contentlets, and more — each treated as an editable, reorderable “block.” This approach gives authors unprecedented flexibility and control over content structure while keeping output clean, predictable, and easy to render across channels.

Built on the powerful Tiptap framework, the Block Editor brings modern, intuitive interactions like drag-and-drop reordering, inline editing, and semantic block transformations to everyday content authoring. Every piece of content lives as structured JSON, making it inherently more portable, reusable, and ready for headless delivery — rendering beautifully in web apps, mobile screens, and beyond.

Benefits

For Content Teams

• Craft rich, media-mixed content with an intuitive visual experience that feels more like building with blocks than typing into a box.

• Drag and drop blocks to reorganize structure instantly.

• Treat images, videos, tables, code snippets, and embedded content as first-class elements that can be inserted and managed independently.

For Developers

• Store content as structured JSON rather than opaque HTML, simplifying parsing and rendering in headless front ends.

• Reduce front-end complexity with predictable block data that maps cleanly to UI components.

• Enable inline editing and block interactions in Edit Mode for a more cohesive authoring workflow.

Use Cases

Modern Article & Blog Publishing
Create long-form posts with headings, mixed media, and rich embed types using discrete blocks that make layout predictable and rendering consistent.

Headless Site Content
Deliver structured JSON to any client — React, Next.js, Angular, or native mobile — without post-processing or scraping HTML.

Reusable Content Patterns
Standardize complex content structures like product descriptions, feature pages, and educational tutorials by composing them out of modular block units.

Resources

• Block Editor Documentation

• Block Editor Blog Post

• Comparing Block Editor and WYSIWYG Fields