# Build a page builder with a sections array https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/page-builder-sections-array Add a sections array to your page document type so editors can compose pages from reusable section schemas. --- ## Navigation **Course:** [Migrating from Webflow to Sanity](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity) · [View as markdown](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity.md) **Previous:** [Map collections to Sanity document types](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/map-collections-to-schemas) · **Next:** [Model custom-template pages as singletons](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/custom-template-singletons) --- ## Course Contents 1. [Introduction](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/introduction-to-webflow-migration) 2. [Audit your Webflow content](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/audit-webflow-content) 3. [Recognize Webflow's content modeling patterns](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/recognize-content-modeling-patterns) 4. [Export from Webflow and connect the Data API](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/export-webflow-connect-api) 5. [Initialize Sanity and install the migration toolkit](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/initialize-sanity-migration-toolkit) 6. [Map collections to Sanity document types](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/map-collections-to-schemas) 7. **Build a page builder with a sections array** *(current)* 8. [Model custom-template pages as singletons](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/custom-template-singletons) 9. [Model navigation in Sanity](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/model-navigation) 10. [Create a siteSettings singleton](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/site-settings-singleton) 11. [Handle internal links in Portable Text](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/internal-links-portable-text) 12. [Fetch your collection items from the API](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/fetch-collection-items-api) 13. [Run the asset pre-upload pass](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/asset-pre-upload) 14. [Resolve reference fields from API data](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/resolve-reference-fields) 15. [Convert rich text to Portable Text](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/convert-rich-text-portable-text) 16. [Extract static page content using the page DOM API](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/extract-static-page-content) 17. [Import content with the two-pass pattern](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/two-pass-import) 18. [Validate your import in Studio](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/validate-import-studio) 19. [Set up forms, redirects, and sitemap](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/forms-redirects-sitemap) 20. [Set up draft mode and visual preview](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/draft-mode-visual-preview) 21. [Validate your import without a frontend](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/validate-migration) 22. [Launch checklist and DNS transfer](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/launch-checklist-dns) 23. [AI prompt library and resources](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity/appendix-prompt-library-resources) --- A sections array on a page document lets editors pick any defined section type, add sections in any order, and rearrange by drag-and-drop. AI generated your section schemas in the previous lesson. This lesson wires them into a page document. This lesson covers the page builder for **compositional pages**: ones built from repeatable section blocks (buckets (a) and (b) from the classification step). If your site has custom-designed pages that don't decompose into sections, an About page with bespoke layout, a Pricing page with a unique structure, those become singleton document types with their own schemas, covered in the next lesson. Both appear together in the Studio under a single "Pages" section, so the distinction is invisible to editors. **A note on scale. **With 50+ static pages, the value of the page builder isn't that you enumerate every page. It's that most pages share a small number of distinct section types. A 100-page marketing site probably has 12 to 18 unique section types. Focus the component inventory on section types, not page count. During migration, you don't reconstruct pages manually. `extract-static-pages.js` reads each page's DOM from the HTML export, matches component instances to their section types using the component type map, and seeds the `sections` array for every static page automatically. Chapter 4 covers this in detail. The long-term editorial benefit: once the section schemas and Next.js template are in place, adding a new page after launch is just creating a document in Studio and picking sections. ### Ask AI to build the page schema Before running this prompt, make sure you've completed the schema extraction step (Step 2) from the "Map collections to Sanity document types" lesson. That step may have already extracted a shared `seo` type. This prompt checks for it and references it rather than re-inlining the fields. ```text @webflow/api/components.json @webflow/api/pages.json @sanity/schemaTypes/objects/ @sanity/schemaTypes/documents/ Using the section types identified from the components file, write a page document type schema in TypeScript using defineType and defineField. The page should have: - A title field (string) - A slug field (no source) - A sections array that accepts all the section types you identified - An seo field — check /sanity/schemaTypes/objects/ first. If a shared seo type exists there, use type: 'seo' to reference it. If not, inline the object with metaTitle, metaDescription, ogImage, and noIndex fields. For each section type, write it as a separate object schema file saved to /sanity/schemaTypes/sections/. Save the page document type to /sanity/schemaTypes/documents/page.ts. Then update index.ts to import and register both the page type and all new section types. ``` ### What the output should look like If a shared `seo` type already exists in `objects/`, the page schema references it by name. If not, the fields are inlined. Both are valid. Consistency across schemas is what matters: ```typescript:sanity/schemaTypes/documents/page.ts // sanity/schemaTypes/documents/page.ts — with a shared seo type already extracted import { defineType, defineField } from 'sanity' export const page = defineType({ name: 'page', title: 'Page', type: 'document', fields: [ defineField({ name: 'title', type: 'string' }), defineField({ name: 'slug', type: 'slug' }), defineField({ name: 'sections', title: 'Page Sections', type: 'array', of: [ { type: 'heroSection' }, { type: 'featureGrid' }, { type: 'testimonialBlock' }, { type: 'ctaBanner' }, ] }), defineField({ name: 'seo', type: 'seo' }), ] }) ``` The type names in the `of` array (`heroSection`, `featureGrid`, etc.) must exactly match the `name` values in your section schemas from the previous lesson. If they don't match, Studio will show a validation error. Each section type should be `type: 'object'`. Sections are embedded in the page, not standalone documents with their own URLs. Confirm Studio compiles before moving on. The most common error here is a type name mismatch between the section type name in page.ts and the name value in the section's own schema file. Next, you’ll create singleton document types for custom-template pages, then wire everything into a single Pages section in the Studio. --- ## Related Resources - [Full course as markdown](https://www.sanity.io/learn/course/migrating-content-from-webflow-to-sanity.md) - [All courses and lessons](https://www.sanity.io/learn/sitemap.md) - [Complete content for LLMs](https://www.sanity.io/learn/llms-full.txt) ## Submitting Feedback If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback: POST https://www.sanity.io/learn/resource/feedback ```json { "path": "/learn/course/migrating-content-from-webflow-to-sanity/page-builder-sections-array.md", "feedback": "Description of the issue" } ``` Only submit feedback when you have something specific and actionable to report.