Dynamic Zone in Components
A
Alexandre Retourne
It could be great to add context or let the users create their contents with little constraints. For example, a grid could have differents components inside like download cards or profile cards. Making a grid component for each variation is not optimal so it would make the UI clearer with fewer components. Lastly, the front-end developer could develop a component manager from front-end and it would manage all content to build the website like legos. The developer would maintain the content builder from strapi POV and the users can immediately use the news components or make change on already launched content.
Aurélien Georget
Hey everybody,
I wanted to share a few updates regarding this initiative. We are actively exploring the design impacts as we want to provide an elegant way to ensure it scales even if the level of depths is greater than 4 or 5.
Here is a screenshot of a possible option; as you can see, we are also trying to harmonize the look & feel between the Dynamic Zones and Components.
We will keep you posted once the development starts. We have no ETA to share so far, we are 100% focused on v5.
Ciao ✌️
D
Davomyan
Anyone know a cms/tool that handles this already I can use seperately next to Strapi? I am creating a game where character skills, buffs and debuffs need to be created with dynamic zones and components with complex mechanics, I can't do that right now in Strapi, but I'm willing to use another tool or cms only for character creation, then request via strapi that cms' endpoints to gather the data and store it in memory
K
Kris Lunde
Davomyan Check out Directus (https://directus.io) which I know can do it, or Payload CMS (https://payloadcms.com) which I'm pretty sure can.
J
Julien Moulin
It’s been long time since the request for dynamic zones within components was raised, and the Strapi team has yet to address it. Given this limitation, we’ve implemented an alternative system using page templates as collections. Although this approach may not be the most optimal, it is a viable solution for managing flexible content structures.
Our implementation involves:
- Template Collections: Each template (e.g., one-column, two-column) is defined as its own collection type. This allows us to create flexible layouts without relying on dynamic zones inside components.
- Centralized Page Management: A dedicated page in the admin panel lists all available templates. From this interface, users can view, edit, and create new pages based on the predefined templates.
- Template Selection Modal: When creating a new page, users are presented with a modal to select a template. Each template is visually represented for better usability.
- Routing and Rendering: On the frontend, the system dynamically selects and renders the appropriate layout based on the page type, ensuring modular and maintainable code.
While this solution requires more manual setup, it provides the flexibility needed to manage different page structures within Strapi’s current limitations. I hope this approach helps others facing the same challenge. If anyone has further suggestions or improvements, feel free to contact me (materazu on github) ! 😊
Ekrem Mehmet Güven
If you're working with Next.js, you absolutely need to check out Payload CMS. It’s literally built on top of Next.js, turning it into a full-stack framework. With features like conditional fields and nested blocks, it’s a game-changer for managing complex content structures. Super customizable, developer-friendly, and perfect for modern web projects. Trust me, it’s worth a look! 😊
Douwe Pausma
Ekrem Mehmet Güven I've heard of Payload, it looks amazing. I wish I knew about it sooner when I built our website. We can't afford to move to payload right now. Even though I do like Strapi, I am sad I can't make my colleagues work lives better by improving their content-editing experience.
Ekrem Mehmet Güven
Douwe Pausma Migrations are always a headache! maybe try Payload on your next project? Their docs are straightforward, and once you get the hang of it, you’ll see how easily your current setup could map over later—without touching the frontend. It’s one of those "learn once, simplify forever" tools. Low risk, high reward. 😉
Tjerk Dames
Hey Aurélien Georget 👋
Since v5 is out, could you give us a short update on the ETA ?
This feature gets more important to us from day to day. I would like to know if its worth waiting, or if we should move to another headless cms :) If you recommend moving, perhaps you could also recommend another headless cms supporting this feature since you might know more ones than I do.
Thanks in advance.
D
Davomyan
Tjerk Dames
I'm pretty sure we're never getting this, Derrick's response:
"indefinite hold AFAIK
It's not a "no" but right now we have may more important stuff on our to-do list and the performance problems that come from this (even if you could deal with it) we would not be happy with.
It would require a metric ton of refactoring for basically the entire internal API to be able to have this and with very little gain. "
I don't think the team at Strapi understands how giga important this feature is lol
Tjerk Dames
Davomyan Do you know another headless CMS that has this feature ?
Ekrem Mehmet Güven
Tjerk Dames If nested blocks/content flexibility is critical, check out Payload CMS. It supports nested blocks out of the box, has a clean TypeScript API, and integrates effortlessly with modern frameworks. Migration is straightforward since it’s backend-focused—your frontend stays intact. Worth a look if deadlines are tight!
Tjerk Dames
Ekrem Mehmet Güven Looks like a great tool so far. Can it work with solid start too, do you know ?
Ekrem Mehmet Güven
Tjerk Dames The Payload admin panel is built with Next.js. If you want to make changes to the admin panel, you need to write React components, but most of the time, this won't be necessary. For the frontend, you can use any technology you want—it could even be vanilla JavaScript. Additionally, Payload provides local API support for direct database operations, which you can use in server components.
D
Davomyan
I'm begging you guys please focus on this Q1 2025
Douwe Pausma
This would be a huge help, I currently have to create a lot of specific components to solve an issue that for example a "columns" component would. Adding Dynamic Zone's in components would declutter my Strapi alot!
Maybe a way to limit performance issues, is by setting a max depth for nesting components?
Koen Cornelis
This is a pretty big problem for us as well, as the lack of this functionality is really impactful on a content editor's workflow. Basically, if we hadn't made a lot of stuff in strapi already i'd be vehemently arguing to switch to another CMS.
I hope this comes soon, but if this is such a big deal: can you at least make conditional fields a thing. I can work around this problem in a lot of use cases if we get conditional fields.
That'd allow me to show a specific component depending on the type of field a user wants to see.
Kayode Okusanya
Hi Aurélien Georget
Greetings! I'm excited to be back in touch. First off, we want to express our deep appreciation to everyone at Strapi for the fantastic work you're doing. Strapi truly stands out, and we're grateful for all the effort your team puts in.
Regarding the dynamic zone within a component, could you clarify the specific blocker that's preventing its implementation? I’m curious about why this feature hasn’t been addressed yet. Is there any possibility of introducing it with a feature flag, even if it’s not yet perfect? As a Full Stack Developer, I understand this might be complex, but releasing it experimentally and gathering telemetry could provide valuable, data-driven insights.
Given that this feature has around 475 votes, some feedback on why it’s not being prioritized would be really helpful. Again, thank you and the entire Strapi team for creating such an outstanding platform. Looking forward to your response!
Aurélien Georget
Kayode Okusanya I won't get into all the details about how the priorization works, however, the main issues that we face are performance issues. A Dynamic Zones is a relation, a component is a relation, the deeper we go, the more database requests it generates, the slower it is.
You are right about the flag system, and we are currently implementing feature flags to be able to release new experimental features under flags.
This feature is in our radar and we are committed to work more on community features this year as our monetization model is in better shape now :)
D
Davomyan
Aurélien Georget Why are you guys deciding for us to use or not use a feature, what if we are perfectly fine with the performance hit? It should be our choice to make certain necessary trade-offs. In my case it's data I will be fetching from the database and cache it for weeks, so it's 1 operation that will take ''long'', and not many of the same operations a day, the performance hit for me is negligible
Aurélien Georget
Davomyan Since we are the ones handling the support tickets, open issues, and complaints, we have seen how this can lead to challenges. Many users are beginners and may not notice performance issues until their app grows, at which point it can become a problem, and we're often the ones they turn to for help. That said, you’re absolutely right, we could offer an option to unlock this feature, but we believe it’s better if it’s not available by default to avoid those potential issues early on.
D
Davomyan
Aurélien Georget That should be our problem and we should fix our mistakes later, for example us developers learn postgres the hard way when our user base grows and we have suddenly 1million + rows and the database is slow, then we learn about database indexing. Please talk to your higher ups and make this ticket happen ASAP!!!
O
Ondrej Zraly
Still nothing? I love Strapi but still need to use directus just for this reason. Common guys I want to switch! :D
D
Davomyan
Strapi v5 just released and it's absolutely mental this hasn't been implemented yet, this issue has been talked about since 2020
Load More
→