Announcing beta.18 - build your pages on the fly with Dynamic Zones

Strapi powers content management and API creation for applications like ASOS, IBM, Société Générale, Mug & Snug and thousands of projects.

Strapi facilitates content management for all users. Our goal is to empower you to create any project you have in mind. For this reason, we are thrilled to announce the release of Strapi beta.18 with a highly requested feature, that will unleash your creativity even more!

A HUGE thanks to the 300+ individuals who have already contributed to the Strapi project, the team is super grateful for your help! We’d like to give a special shout out to @0LL1, @chriswinch, @Froelund and @derrickmehaffy. Well done guys!

As always the full changelog can be found in the repository here.

Introducing the Dynamic Zones feature

To be able to build dynamic pages or create complex data structures, it's often very helpful to create sections such as sliders and quotes or data structures such as meta fields so that you can reuse them whenever needed.

It is now possible with the Dynamic Zones! And in a way so flexible, that the only limit is your imagination!

Let's dive into it.

The most flexible way to create rich experiences

In this version, we are introducing a new data structure: the Components. Components allow you to create nested fields to organize your information, repeat this data structure to build arrays or to reuse this data structure across multiple Content-Types.

In other words, it means that you can pick on the fly any component, reorder them as you wish in the repeatable zone and create original content structure.

Let's explain this in detail.

Building a blog post data structure with the Dynamic Zones

For the sake of this example, we will create the data structure for a blog using Components and Dynamic Zones.

In this example, let's say that I'm Tim Cook, and I'm writing an article on my blog about the Release of the new MacBook Pro. Why not?

I want to add the following rich layouts to my article: a quote linking to my bio on Wikipedia and a slider, with 3 pictures of MacBooks Pro.

1. Creating the Blog Post Content-Type

Let's start by creating the Content-Type Blog Post.

This post will have the following fields:

• A text field Title
• A media field Cover
• A unidirectional one-to-many relation field Authors

2. Creating Components

Then, we'll create our first Component.

As said earlier, Components allow you to group fields to organize your structure. In our example, we will use Components to create differents elements needed for our blog post :

• Meta tags: a meta tag must have 2 fields: one name and one value
• Quote: the quote layout must include a quote, an author and a link to the biography of the author.
• Slider: a slider has a bit more depth: it is composed of slides, that each contains a picture and a caption. The Slide model must be repeatable and I want to be able to reorder my slides if needed.

So first, let's create the Meta Component.

Then, the Quote Component.

Last but not least, the Slider Component.

3. Creating a Dynamic Zone

Now that we created the needed Components, let's create a Dynamic Zone that will include them to build the content of our blog post. We will first add the Quote and Slider Components that we just created, then a Rich Text Component, that we will create on the fly in the Dynamic Zone.

Nice, uh?

Now, that we created the data structure, let's head to the Content Manager and manage our content.

In this video, you can see that adding a Component to a Dynamic Zone is super fast and easy.

A Dynamic Zone allows your editors to choose between any types of rich layouts. You just have to create and add them, it's as simple as that. Your Content Manager just has to pick them in the list and add them.

It works for any section with any combination of text, or image like sliders, quotes, testimonials, etc. The list is infinite and the only limit is your imagination!

Your writers have total control to add section by section the different part to build the post and to order them however they want.

And just in case you were wondering: you can also reorder the nested Components in a Component as you see fit!

Editing the layout

You may have noticed a little change in the Plugin section of the left menu: the Content Manager is gone.

The configuration of the Content Types' layouts can now be done through the Configure the View button directly in the Content Type Builder. Drag and drop your fields to reorder them and save, and you can visualize the result immediately in the List view of your Content Type.

Upgrade to beta.18

If you are already building your project with Strapi, we recommend that you upgrade to the latest version in order to benefit from these new features! Follow the detailed instructions in our migration guide.

Get started

If you are new to Strapi, just give it a try!

Take a look at the Getting Started guide to jump on board, or get started with the following command line:

yarn create strapi-app my-app --quickstart

Get involved

Check out our public product roadmap to see what features we’ll be working on next.

Don’t see a feature you’d like in the backlog? Feel free to submit new feature requests or even better, start contributing to Strapi on GitHub. All contributions and users are welcome!

Don’t take our word for it. Have a look at the tweet posted last week by Michele Riva, the creator of JSMonday and proud contributor of Strapi:

Happy hacking!