Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required



Get StartedLogin





Made in Builder

Getting Started with Builder

You can customize to meet a variety of use cases, from minimal headless data models to building landing pages. You can allow complete free-form control of content or limit it to your design system components.

Get started with and Next.js

Use your React components in Builder

Give your team the ability to make landing pages

Unlock a ton of power by adding landing page building support with Builder. You can give users the power to create new pages with unique URLs for anything they need.

In this quick start example, we set up freeform landing page building for any site with just a few lines of code.

When a request to your site comes to a URL you don't have a route for, you can make a request to Builder's HTML API–or use a framework-specific SDK, such as React, Next.js, Gatsby, Angular–by passing in the requested URL and your API key.

If Builder matches a page for this URL, it returns the page contents between your header and footer. Otherwise, Builder sends, or redirects, to your 404 page.

All Builder spaces have a built in Page model that we use in the examples below.

Next, set up your page model's preview URL to point to your localhost for on-site previewing and editing. When you're ready to deploy, update the preview URL to your live or QA site.

Extending for SEO

You've just added the ability to create custom landing pages to your site. See this guide to extend this example for SEO optimizing your landing pages by requiring custom titles, descriptions, and other meta info.

Landing pages are just the beginning of what you can do with See Getting started with models to learn how to use on any page using component models, data models, or a number of other advanced techniques.

More resources

Was this article helpful?