We use cookies to help our site work and to understand how it is used. By continuing to browse the site you're agreeing to our use of cookies.

Modular content fields

Everyone hates WYSIWYG editors: developers know they produce dirty code, designers fear the introduction of unwanted styling, editors struggle to use them. Sure, DatoCMS features a WYSIWYG editor since day one, but we want to keep it simple and lightweight: you cannot add inline images or other media you could regret in the future to have added in an unstructured way.

In DatoCMS you can achieve structured, rich-content editing using a specific type of field called Modular content:

The idea is to give your authors the choice to compose their content by alternating certain blocks (ie. text, images, videos, etc.), which are nothing more but "low-level" models. Authors, to compose a structured content, will be able to add and reorder these blocks as they prefer:

This gives authors a lot of freedom to organise their content, much like Medium editor does, while keeping the content clean and structured.

How to build a Modular content editor

Suppose we have an Article model, and we want to add a modular content field to manage its content. The first step is to decide which are the different kind of basic blocks you want your authors to alternate. In this case, we want our content to be a flexible composition of:

  • Text
  • Quotes
  • Videos
  • and Images

To achieve this result, first we create the Article model, and add a Modular content field to it:

foo foo

Under the Modular content field we just created, we can now add our blocks. There's a Add new block button for that, so we'll use it to create the Quote block:

foo foo

Blocks are just a composition of fields, just like ordinary models. In our case, we want quotes to be made of two fields: one containing the actual quote, the other containing the author.

You can click on the Settings button on the Quote block, to edit its fields: