Building a Page Builder via Content Modeling Best Practices in Strapi 5

Introduction

Structuring content is hard when you’re starting a site or app, whether it’s a company website, an e-commerce app, or a landing page.

In this tutorial, you’ll design a scalable Strapi 5 content page builder using Strapi collection/single types, components, dynamic zones, and relations.

You’ll also see when to use each and how to accelerate with Strapi AI and Vercel v0.

Tutorial Outcomes

By completing this tutorial, you'll

• Understand content modeling fundamentals
• Know when to use different Strapi content types such as collection types, single types, components, relations, and dynamic zones
• Have a production-ready content model for company websites.
• Explore AI-powered workflows with Strapi AI and Vercel v0.

Prerequisites:

• Basic understanding of databases and content management
• Strapi 5 is installed and running
• Access to the Strapi admin panel

Content Modeling Fundamentals

What is Content Modeling

Content modeling is the process of defining and structuring content so it can be managed, reused, and delivered consistently across different platforms.

In simple terms, it’s about deciding what content you have, what fields it needs, and how it relates to other content.

As Marcelo Lewin, founder of Headless Creator puts it:

What are the benefits of content modeling? Why does it matter? Let's find out in the next section.

Key Benefits of Content Modeling

Content modeling benefits not only developers, but also editors, designers, and the business as a whole. It creates a shared foundation for how content is structured, stored, and delivered.

1. Content Reusability: A well-designed content model makes your content reusable across multiple channels.
2. Improved Editorial Experience: For content editors, a thoughtful model reduces friction.
3. Faster Development: Developers spend less time restructuring messy data, which accelerates builds and iterations.
4. Improved Collaboration: Aligns developers, editors, and designers around a common content framework.
5. Futuristic: Abstracting content from presentation makes it easier to adapt to new platforms and technologies.
6. Scalability: Content modeling can enable you to scale with growing datasets.
7. Reduced Costs Over Time: Avoids rework, duplication, and migration issues, ultimately saving time and money.

Traditional CMS vs Headless CMS

For content editors coming from tools like WordPress, content modeling in a headless CMS like Strapi can feel unfamiliar. The key difference lies in how content and presentation are handled.

Content vs. Presentation

• Traditional CMS: Content and presentation are tightly coupled (e.g., themes, templates).
• Headless CMS: Focuses only on the content structure and intent, leaving presentation to the frontend.

Focus on Intent

• Traditional CMS is built for looks and single-channel delivery.
• Headless CMS is built for intent and structure—making content reusable across websites, apps, and even IoT devices.

The "Headless Dilemma"

Editors familiar with traditional CMS tools often ask: “Where’s the page builder?”

The answer: a headless CMS isn’t about static page design. It’s about creating flexible content models that can power any channel, now or in the future.

Where do you start when designing your content model? Let's explore the basics of content modeling in a headless CMS like Strapi.

Strapi 5 Content Types Deep Dive

"A headless CMS is the technology that makes this new way of managing content possible. Content modeling is the practice that ensures that your content's purpose is clear."

Those are the words of Larry Swanson from "Content Strategy Insights".

Content modeling gives purpose, and a headless CMS like Strapi gives it omnichannel delivery.

Strapi 5 is a headless CMS that provides powerful native content modeling features that are ideal for implementing a flexible page builder.

Understanding Strapi Content Types

There are 2 different types of models in Strapi: 1. Content-types: For single and multiple entries. E.g., Collection types and Single types. 2. Components: Re-usable content structures in multiple content types.

Let's discuss them further.

1. Collection Types

A collection type is used for content that can have multiple entries (e.g., “Blog”, “Category”, "FAQ", "Page", etc., where you’ll have many instances).

2. Single Types

A single type is used for one-off content pieces that exist only once (e.g., a single “Homepage Settings” or “About Us” content).

3. Fields

Fields are the smallest units of content (often referred to as attributes).

Strapi fields can further be grouped into:

• Top-level fields (text, number, date, JSON, etc.)
• System fields (createdAt, createdBy, updatedAt, publishedAt)
• Media fields (images, files)
• Reference fields (relationships to other types)

Here are the fields you can find in your Strapi admin panel.

4. Components (Reusable Content Blocks)

Components in Strapi are collections of fields that serve as reusable building blocks.

Instead of recreating the same fields repeatedly, you bundle them together. For example, an SEO component with metaTitle, metaDescription, and image.

Components can also be nested (a “Button” inside a “Hero Section”). This promotes reuse and consistency.

5. Strapi Dynamic Zones

A Strapi dynamic zone is essentially a special field type that allows an entry to hold a mix of different components and arrange them in any order.

You can think of a Strapi dynamic zone as a placeholder in your content type (like a “Sections” field) where editors can insert any number of predefined components.

In the image below, you can see components Hero, Features, Testimonials, How_It_Works, Brands, and Pricing as components inside the dynamic zone field called dynamic_zone.

6. Relations

Relations connect content types together. They make content reusable across contexts without duplication.

There are 6 different types of relations in Strapi:

• One way: Content-type A has one Content-type B
• One-to-one: Content-type A has and belongs to one Content-type B
• One-to-many: Content-type A belongs to many Content-type B
• Many-to-one: Content-type B has many Content-type A
• Many-to-many: Content-type A has and belongs to many Content-type B
• Many-way: Content-type A has many Content-type B

Understanding & using relations without overusing components is very crucial to content modeling.

To learn more about Strapi content models, visit the documentation page for Models.

Choosing Between Types, Components & Zones in Strapi

When modeling content in Strapi, it’s not always obvious whether to use a collection type, a single type, a relation, a component, or a dynamic zone. Here’s a simple guide to help you decide.

• Use Collection Types when you need many entries of the same kind (e.g., Blog Posts, Team-Members, FAQs).
• Use Single Types when you need exactly one entry in the system (e.g., Global Settings).
• Use Components when you need to reuse structured fields across multiple content types (e.g., Address, SEO, Link).
• Use Relations when data will appear in multiple places.
• Use Dynamic Zones when you want editors to choose from different types of sections (Hero, Features, Testimonials, FAQ Block).

Step-by-Step: Building a Page Builder in Strapi 5

In this section, we’ll build a Company Website content model in Strapi 5 using content modeling best practices.

The goal is to design a Company Website content model in Strapi. Here are the key steps:

1. Create a Diagram of Content Model
2. Create Collection Types in Strapi
3. Create Reusable Components in Strapi
4. Create Single Types in Strapi.
5. Create Relations in Strapi.
6. Create Dynamic Zones in Strapi.

By following these steps, you’ll get a blueprint for building your own flexible and maintainable page builder.

Planning Your Content Model

The diagrams below outline all collection types, single types, components, and dynamic zones:

Collection types, Single Types, Components, and Dynamic Zones

Complete Diagram

Collection Types for Company Website

For a company website example, we will create the following collection types.

1. User: Represents people who interact with the system. This is required for blog post authorship and access control. You don’t need to redefine it. Strapi generates it automatically.
2. Blog: Stores blog posts or articles. Enables marketing and content publishing directly in the CMS. Related to User (author), Category, and Tag.
3. Tag: Adds labels to blog posts (e.g., “Headless CMS”, “Strapi 5”, “Content Modeling”). Supports flexible filtering and SEO-friendly content discovery.
4. Category: Groups blog posts by theme (e.g., “Tech”, “Culture”, “Events”). Makes it easier for readers to filter and explore content.
5. State: Stores consistent state/province values. Keeps addresses structured and normalized. Prevents editors from typing “CA”, “California”, or “Calif.” inconsistently.
6. Country: Stores reusable country entries. Ensures consistency for global businesses. Makes filtering, sorting, and querying content by location possible.
7. Pages: Used to manage individual website pages (e.g., Home, About, Services, Careers). Uses a dynamic zone for flexible sections. Great for page builder experience because editors can build flexible and structured pages without touching code.
8. FAQ: Stores individual frequently asked questions (question, answer).
9. FAQ-Category:: Groups FAQs for easier filtering (e.g., “Product”, “Pricing”, “Support”).
10. Team-Member: Profiles for employees displayed on the website. Separates team presentation content from the system User. Not all team members need Strapi accounts.
11. Feature: Represents product or service highlights (e.g., “Fast integration”, “Secure by default”). Keeps features reusable across multiple pages (Home, Pricing, Product). Prevents duplication.

Components for Company Website

• Address: This is a component because it keeps address data structured and consistent. It can be reused in multiple places. By separating State and Country into their own collection types, it enables filtering, sorting, and future scalability.
• Link: This is a component because it acts as a universal “link atom” for your site. The Link component can be reused in Header, Footer, CTAs, Social links, or anywhere links are needed. This eliminates redundancy and ensures consistent structure for links across the entire site.
• Footer: This is a component because it keeps footer content structured and editable in one place. Editors don’t need developer help to update footer links or CTAs.
• Header: This is a component because, like the footer, it centralizes header content for editors. Repeatable Link components make the navigation flexible but consistent. It also eliminates the need for a separate Navigation collection type since header navigation is managed right here.
• SEO: This is a component because it centralizes all SEO-related fields in one reusable block. Ensures every Page and Blog post has proper metadata.

Dynamic Zones for Company Website

Dynamic zones are what make Strapi feel like a page builder for non-technical editors. Instead of hardcoding fields into every content type, you give editors a flexible toolbox of components they can mix, match, and reorder.

• FAQBlock: The FAQBlock displays a list of frequently asked questions and their answers. It typically pulls its data from the FAQ collection type (through a relation). Why this is a dynamic zone is that FAQs aren’t required on every page. Editors may want to add or remove them based on context (e.g., show FAQs on the Pricing page, but not on the About page). By making it a dynamic zone component, editors can insert the FAQ section only where it makes sense, without developers having to hardcode it.
• HeroSection: The HeroSection is usually the large, visual section at the top of a page. It often includes a title, subtitle, image, and call-to-action button. We made this a dynamic zone because not every page needs a Hero Section, but many do (Home, Product, Careers). Each Hero may look different (different CTA, different imagery). By modeling it as a dynamic zone component, editors can easily drag and drop a Hero Section into any page they want and customize it independently.
• Testimonial: The Testimonial component highlights quotes or reviews from customers, users, or partners. It usually includes a quote, the author’s name, role, and photo. Testimonials are a dynamic zone because they are contextual. This means you might want them on the Home page, a Product page, or a dedicated Success Stories page. They’re not globally required, so making them a fixed field in every Page type would be overkill.

Single Types for Company Website

• GlobalSettings: Holds the site-wide configuration and content of the company, such as the site name, logo, etc. GlobalSettings exists because some content belongs to the entire site, not to individual pages. By making it a Single Type, Strapi enforces that rule and simplifies life for both developers and editors.

Now, let's design a company website content model in Strapi 5.

Implementing Company Website Model in Strapi 5

There are 3 ways to create content types in Strapi.

• Using the Content-Type Builder in the admin panel
• Using the Strapi CLI
• Manually editing schema files (schema.json) for content types in your project’s file structure, like the Category collection type below:

1{
2  "kind": "collectionType",
3  "collectionName": "categories",
4  "info": {
5    "singularName": "category",
6    "pluralName": "categories",
7    "displayName": "Category"
8  },
9  "options": {
10    "draftAndPublish": true
11  },
12  "pluginOptions": {},
13  "attributes": {
14    "name": {
15      "type": "string"
16    },
17    "slug": {
18      "type": "uid",
19      "targetField": "name"
20    },
21    "blogs": {
22      "type": "relation",
23      "relation": "oneToMany",
24      "target": "api::blog.blog",
25      "mappedBy": "category"
26    }
27  }
28}

For this article, we will use the Content-Type Builder in the Strapi admin panel.

Step 1: Creating Collection Types in Strapi

The User collection type is automatically created by Strapi. We'll create the remaining collection types.

1.1 Create Country Collection Types

Begin by creating the Country collection type, which holds the fields name and code.

To do this: 1. Navigate to Content-Type Builder in the admin panel 2. Click "COLLECTION TYPES +" 3. Enter "Country" as the display name

5. Click "Continue" 6. Add these fields: name (Short text) and code (Short text) 6. Click the "Save" button

You should now have the Country collection type as shown below:

1.2 Create Remaining Collection Types

Proceed to create other collection types.

Follow the same process and create these collection types:

NOTE: User comes from the users-permissions plugin; you don’t create it.

You should have the complete collection types created in your Strapi admin panel, as shown in the image below:

Step 2: Creating Reusable Components in Strapi

Let's move further with creating reusable components. Components require a name and category.

Categorizing components properly is key to keeping your Strapi content model organized and intuitive for editors.

2.1 Create Address Component

• Click the "COMPONENTS +" tab in Content-Type Builder
• Enter "Address" as the display name
• Set category as "shared"

• Click the "Continue" button
• Add these fields: streetNumber (Number), streetName (Short text, required), city (Short text, required)
• Click the "Save" button.

This is what the "Address" component should look like:

Proceed to create the other components.

2.2 Create Additional Components

This is a summary of the components you should create:

Step 3: Create Single Types

Single Types in Strapi are meant for singleton content. You should use single types when you only need one entry across the entire system.

• Click "SINGLE TYPES +" in Content-Type Builder
• Enter "GlobalSettings" as display name
• Add the fields and components in the table below:

Later on, we will add components such as a footer field for the Footer component, defaultSEO for the SEO component, and a few other components.

Here is what the GlobalSettings single type should look like:

Step 4: Create Dynamic Zone Components

Dynamic Zones in Strapi let you build flexible pages by stacking predefined page section components in any order.

4.1: Create Dynamic Zone Components

Start by creating the components below. Remember to categorize them as dynamic zones.

The title in the FAQBlock above represents the title for a FAQ, e.g., “Frequently Asked Questions”, “Need help?”, or “Your Questions Answered”.

Recall that we also have the FAQ collection type. This means we have to create a relational field between the FAQBlock component and the FAQ collection type, as we will see in the section for creating relations in Strapi.

Here is what the components for dynamic zones should look like:

Step 5: Add Dynamic Zones to Collection Types

We will add fields sections and dynamic_zones to the Page and Blog collection types. You can choose to name them based on naming conventions that are preferable to you.

In the table above, Blog posts only need the FAQBlock and don't need hero sections, features, and testimonials.

Later on, as the website grows, you can add more components to the dynamic zones.

5.1 Add Dynamic Zone to Page Collection Type

• Navigate to Page collection type in Content-Type Builder
• Click "Add another field to this collection type"
• Select "Dynamic Zone" field type

• Give the name of the field as sections
• Add components to the zone by clicking the "Add components to zone" button.
• Select the "Use an existing component".
• Ensure you select the "Use an existing component" option and select all the components under the dynamic-zone category.

This is what the Page collection type should look like after adding a dynamic zone.

👋 NOTE You can create a dynamic zone on the fly with new components without having to initially create components.

Next, create the dynamic zone for the Blog collection type.

5.2 Add Dynamic Zone to Blog Collection Type

• Navigate to Blog collection type
• Add dynamic zone field named dynamic_zone like we mentioned earlier
• Add only the FAQBlock component (blog posts don't need hero sections or features)
• Save changes

As needs increase, you can add other components to this dynamic zone.

As mentioned earlier, we haven't added relations that should be present inside collection types, single types, components, and dynamic zone components. Let's do that in the next section.

Step 6: Add Components to Content Types

Now, we will add some components we have created to content types where they are needed.

6.1 Add Components to Components As discussed earlier, the Link component can be reused inside the Header, Footer, CTAs, Social links, or anywhere links are needed. So, let's add the Link component to the Header and Footer components we have created.

• Navigate to the Footer component in the Content-Type Builder.
• Click the "Add another field to this component" button.
• Select the Component field type.

• Select the "Use an existing component" option.
• Give the field the name links and select shared - Link as a repeatable component.
• And click the "finish" button.

Proceed and do the same for the Header component.

6.2 Add Components to Single Types Add the following components to the GlobalSettings single type.

These components belong in GlobalSettings because they represent structured, reusable global content blocks (SEO, footer, header, address, and social links) that ensure consistency and are managed centrally in one place.

6.3 Add Components to Collection Types Add the following components to collection types.

Step 7: Create Relations

Relations connect content types and enable content reuse.

7.1 Create FAQ to FAQ-Category Relation We will create a field called category inside the FAQ collection type that will be a many-to-one relation with FAQ-Category.

This means that many FAQs belong to one FAQ category.

• Navigate to FAQ collection type
• Click "Add another field"
• Select "Relation" field type
• Enter the field name as category for the FAQ collection type.
• Select the FAQ-Category as the target relation. Give the FAQ-Category field name as faqs (inverse name).
• Select "FAQ-Category has many FAQ". See image below:

• Click the "Finish" button.

This is what the FAQ and FAQ-Category should look like:

The FAQ collection type has a manyToOne relation with the FAQ-Category collection type. Whereas, the FAQ-Category has a oneToMany relation with the FAQ collection type.

6.2 Create All Relations Now, create the following relations.

Relations for Collection Types

NOTE: Ensure User is User (from: users-permissions)

Relations for Components

GitHub Repo

The complete content model for the company website example can be found here.

Let's explore some content modeling pitfalls and best practices.

Content Modeling Pitfalls and Best Practices

1. Plan Ahead Before Building Use diagrams or mapping tools (like Miro boards) to outline your content types and relationships.
2. Focus on Content Intent, Not Design Designing content structures around how they “look” (templates/themes) and not what the content does is not best practice. Always ask, "What does the content do?". And avoid tying data structures to visual presentation.
3. Use Relations for Reusable Content Avoid repeating the same content as components in multiple places. Instead, create a relation so content can be queried and reused across different contexts.
4. Use Components for Context-Specific Content People “make everything a component,” then can’t query or reuse it. Components are best for content that is unique to a single place and doesn’t need to be queried independently. Turning every structure into a collection type adds unnecessary relations and complexity.

1// BAD
2SEO (Collection Type)
3 - metaTitle
4 - metaDescription
5
6// GOOD
7SEO (Component)
8 - metaTitle
9 - metaDescription

5. Avoid Deep Nesting Limit nested relations or components to two or three levels. Deep nesting negatively impacts performance.

1// BAD: Deep nesting chain
2LandingPage
3  - pricing (Component)
4      - plans (repeatable Component)
5          - services (relation)
6          - link (Component)

If you hit the 2-level limit, reconsider the structure rather than forcing it in schema.json. 6. Optimize API Queries Query only the fields you need. Don’t fetch everything. Use filters, sorting, and population selectively to reduce performance costs.

1// BAD
2GET /api/blogs?populate=*
3
4// GOOD
5GET /api/blogs?populate=author

You can learn how to query, populate, and filter data in Strapi using this tutorial.

7. Use Single Types for global, one-off content Treating site-wide settings as a collection creates duplicates and confusion for editors.

1// BAD
2SiteSettings (Collection Type)  // multiple entries created by mistake
3
4// GOOD
5SiteSettings (Single Type)  // only one global entry

8. Choose Strapi Dynamic Zones for Page-builder Flexibility Treating dynamic zones as a dumping ground (many polymorphic components, each with nested structures) degrades performance. Reserve dynamic zones for editor-chosen sections (HeroSection, Testimonial, FAQBlock). Keep the set curated and avoid deep nesting inside those components.
9. Think Multi-Channel from the Start Even if you’re only building a website today, assume content will later be consumed by apps, IoT devices, or other platforms. Keep structures platform-agnostic to future-proof data.

With AI tools on the rise, can we speed up content modeling and development? The answer is "Yes!".

In the next section, you will use Strapi AI and Vercel v0 to speed up content modeling implementation in Strapi and frontend generation using Vercel v0.

AI-Powered Content Modeling with Strapi AI

With Strapi AI, which is basically for content modeling, you can build your content structure in minutes.

You can generate a complete content schema with Strapi AI in the following ways:

1. Chat with the Strapi AI
2. Upload your app
3. Import from Figma or upload an image

In this section, we will chat and upload an image of the content model we created earlier in this article.

Step 1: Import Content Model Diagram Images

In this tutorial, you will only upload the image diagram of the content models we have created in this tutorial and ask the Strapi AI to implement it.

• Navigate to the Content-Type Builder, where you will find the Strapi AI at the bottom-right corner.
• Click the Strapi AI icon to start a chat.
• Attach the images of your content type.

Step 2: Prompt Strapi AI

Chat with Strapi AI using the following prompt:

1Generate the content types for a company website using the attached images.

Strapi AI will go ahead to automatically create the content types for a company website, as shown in the GIF below.

You can take a step further to customize your content type by chatting with the Strapi AI.

Using Vercel v0 to Create the Frontend

With Vercel v0 you can do a whole lot of amazing things. For example, you can Build a Landing Page with AI and Next.js using v0.

Although this might not be the best approach, we can do it in 3 steps.

Step 1: Generate API Documentation

Install the Strapi API Documentation plugin from the Strapi plugin marketplace to create an OpenAPI Document and visualize your API with SWAGGER UI on port: http://localhost:1337/documentation/v1.0.0

Step 2: Visit v0 by Vercel to Type in your Prompt

Visit the v0 by Vercel page at v0.app.

Step 3: Enter your Prompt

We will ask v0 to create a frontend for the company website using the API documentation link and the image diagrams of the content models.

1Using the following documentation: http://localhost:1337/documentation/v1.0.0 
2and content model diagrams attached, create the frontend of a company website.

NOTE The localhost server isn't accessible from the v0 environment. You should have a production server so that v0 can access your documentation.

For production usecases, it is recommended to deploy your Strapi app to Strapi cloud as shown below. That way, you can preview your Strapi app live!:

v0 will take a while to create the frontend as shown above.

After successful generation, you can export your code through your console: npx shadcn@latest add <link to project> or as a ZIP file and customize the frontend to use your Strapi backend!

To learn more, visit the blog post: "Building the Future Web: Best Practices with Strapi, Nextjs, & v0".

Conclusion

Content modeling is the foundation for building scalable projects. By carefully structuring your data using collection types, single types, components, relations, and dynamic zones, you create a model that works for everyone and for the future.

In this tutorial, we walked through creating a complete company website model in Strapi 5. We also explored how Strapi AI can accelerate content modeling and how tools like Vercel v0 can instantly generate a frontend using your content model.

Next Steps:

• Populate your content types with sample data
• Set up proper permissions and workflows
• Integrate with your frontend application
• Implement performance optimizations

To learn more about content modeling and how to structure data, watch the video below: