Integrate Pages
As a developer, you can integrate Builder into your codebase and give other team members, such as content editors, marketers, and designers, the ability to build and manage pages without ever having to ping you.
This guide is detailed. If you're using React, Next.js, Remix, Angular with standalone components, or Qwik and you'd prefer a more automated process, visit Developer Quickstart, which uses Devtools to integrate for you.
Add Builder as a dependency
We highly recommend that you integrate Builder into an existing app, and these instructions assume you already have one. However, if you need to create an app, and would like instructions, visit Creating an App.
Want a shortcut? Get going right away with Builder and Next.js; use Builder's Devtools for Automatic Integration. Devtools fully automates your integration, so you don't have to take the steps in the rest of this document.
If you choose not to use the built-in Builder integration with Next.js with Devtools, continue with the instructions below.
At the command line, at the root of your project, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
Want a shortcut? Get going right away with Builder and Next.js; use Builder's Devtools for Automatic Integration. Devtools fully automates your integration, so you don't have to take the steps in the rest of this document.
At the command line, at the root of your project, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-react".
Start the development server:
Want a shortcut? Get going right away with Builder and Next.js; use Builder's Devtools for Automatic Integration. Devtools fully automates your integration, so you don't have to take the steps in the rest of this document.
If you choose not to use the built-in Builder integration with Next.js with Devtools, continue with the instructions below.
At the command line, at the root of your project, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
At the command line, at the root of your project, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-react".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-react".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
Want a shortcut? Get going right away with Builder and Remix; use Builder's Devtools for Automatic Integration. Devtools fully automates your integration, so you don't have to take the steps in the rest of this document.
If you choose not to use the built-in Builder integration with Remix with Devtools, continue with the instructions below.
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-react".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
Start the development server:
At the command line, at the root of your project, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-vue".
If you are using an SSR framework, you must import the CSS by adding the following to your entry point, before rendering Builder content:
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-vue".
Add the following to nuxt.config.js:
Start the development server:
Want a shortcut? Get going right away with Builder and Qwik; use Builder's Devtools for Automatic Integration. Devtools fully automates your integration, so you don't have to take the steps in the rest of this document.
If you choose not to use the built-in Builder integration with Qwik with Devtools, continue with the instructions below.
At the command line, install the Qwik Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-qwik".
Start the development server:
At the command line, use npm to install the Builder SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-react-native".
To run your React Native app in the browser, run the next command:
Install the Builder Angular SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-angular".
Start the development server with the Angular CLI:
Install the Builder Angular SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/sdk-angular".
Start the development server with the Angular CLI:
At the command line, use npm to install the Builder plugin for Gatsby and the React SDK:
Add the plugin to gatsby-config.js in your project's root directory, making sure to replace YOUR_API_KEY with your Public API Key.
Start the development server:
There's no Builder SDK package dependency when using the HTML API directly. You need an HTTP client to access the API, whether it's built into your framework or installed separately.
Start the dev server.
In beta
In Xcode:
- Go to the General tab to access the primary settings for your project.
- In Frameworks, Libraries, and Embedded Content, click the plus icon.
- At the bottom of the modal that opens, in the Add Other dropdown, select Add Package Dependency.
- Search for https://github.com/BuilderIO/builder-swift to find the Builder Swift SDK.
- Click on builder-swift.
- Select Up to Next Major Version for Dependency Rule, and for the Add to Project dropdown, select your project.
- Confirm your selections and click Add Package.
The video below shows this process:
These instructions use AppModule. For instructions on using the Angular SDK with standalone components, choose Gen 2 above.
Install the Builder Angular SDK:
If you're using Windows, be sure to use quotes when you install dependencies that use the @ operator; for example, npm install "@builder.io/angular".
With the Angular CLI, create a LandingPageComponent:
In AppModule:
- Add
BuilderModuleto theimportsarray withforRoot()and passing in your Public API Key, which you can find in the Account section of Builder. - Add
LandingPageComponentto thedeclarationsarray. - Add
RouterModule.forRoot()with a wildcard path toLandingPageComponent.
Start the development server with the Angular CLI:
Add a Builder component to your app
Paste the following code into a new file within the pages directory called [...page].tsx (you must include the brackets and dots), making sure to replace YOUR_API_KEY with your Public API Key.
If you don't have a pages directory, be sure to create one.
This code gets your Page from Builder and displays the page between the header and footer. As a best practice, the header and footer reside in the codebase, as in this example.
A later section in this tutorial guides you through getting your Public API Key from the Account section of Builder. When you have your Public API Key be sure to add it to the builder.init() method in this code snippet. The API Key is required for connecting your app to Builder.
If you don't have an index route, such as pages/index.tsx , use pages/[[...page.tsx]] with two sets of square brackets. The two square brackets means that Builder handles the app's home page.
The single set of square brackets, in this tutorial, assumes that you are keeping your home page.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Understand the code
After the imports, you specify the Builder Public API Key and, with builder.init(), connect your app to Builder.
Though it's not the syntax this example uses, if you're using the process.env syntax with Next.js for API keys and SDK initialization, be sure to prefix it with NEXT_PUBLIC_, as described in the Next.js documentation for Pages' Environment Variables.
Build paths with getStaticProps()
The getStaticProps() function tells you what paths the app is building. Here, Builder gets the page and creates the URL, otherwise, if there's no page, you'll get null and a 404.
revalidate: 5 means that Next.js attempts to re-generate the page under these conditions:
- When a request comes in
- At most once every 5 seconds
- To check if Builder has updates to the page
Get a list of pages with getStaticPaths()
The getStaticPaths() function returns a list of page URLs, omits unnecessary data for creating the list, and with fallback: true, checks Builder for any new pages you might have added.
The React component
The last section is a React component called Page(). It gets the page data and checks that Builder is present. If there's no page and no Builder, you get a 404. Otherwise, you get your Builder page.
Next, this snippet renders the title field to be the page title. You can also add your own custom fields to render other information; for example, for SEO metadata.
Paste the following code into a new file within the pages directory called [...page].tsx (you must include the brackets and dots), making sure to replace YOUR_API_KEY with your Public API Key, which you can find in the Account section of Builder.
Tip: If you don't have a pages directory, be sure to create one. If you prefer to use the App Router instead, read the guide for integrate the Next.js App Router.
This code gets your Page from Builder and displays the page between the header and footer. As a best practice, the header and footer reside in the codebase, as in this example.
A later section in this tutorial guides you through getting your Public API Key from the Account section of Builder. When you have your Public API Key be sure to add it to this code snippet. The API Key is required for connecting your app to Builder.
Tip: If you don't have an index route, such as pages/index.tsx , use pages/[[...page.tsx]] with two sets of square brackets. The two square brackets means that Builder handles the app's home page.
The single set of square brackets, in this tutorial, assumes that you are keeping your home page.
Though it's not the syntax this example uses, if you're using the process.env syntax with Next.js for API keys and SDK initialization, be sure to prefix it with NEXT_PUBLIC_, as described in the Next.js documentation for Exposing Environment Variables to the Browser.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
In components/builder.tsx (create this directory and file if needed) and paste in the following code:
Create an app directory at the root of your project if you don't already have one. In app/[...page], create a file called page.tsx and paste in the following:
Tip: If you don't have an app directory, be sure to create one.
A later section in this tutorial guides you through getting your Public API Key from the Account section of Builder. When you have your Public API Key be sure to add it to the builder.init() method in this code snippet. The API Key is required for connecting your app to Builder.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Create an app directory at the root of your project if you don't already have one. In the app/[...slug], create a file called page.tsx and paste in the following:
A later section in this tutorial guides you through getting your Public API Key from the Account section of Builder. When you have your Public API Key, be sure to add it to this code snippet. The API Key is required for connecting your app to Builder.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Paste the following code into your JavaScript.
A later section in this tutorial guides you through getting your Public API Key from the Account section of Builder. When you have your Public API Key be sure to add it to the builder.init() method in this code snippet. The API Key is required for connecting your app to Builder.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Paste the following code into your JavaScript.
A later section in this tutorial guides you through getting your Public API Key. The API Key is required for connecting your app to Builder.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Tip: When deploying the React Gen 2 SDK to an edge runtime, you must use the @builder.io/sdk-react/edge import instead of @builder.io/sdk-react. This is necessary to avoid importing code that only works on NodeJS runtimes.
Inside the routes directory, create a file called ($slug)._index.tsx and paste the following code into it. Replace YOUR_API_KEY with your Public API Key, which you can find in the Account section of Builder.
A later section in this tutorial guides you through getting your Public API Key from the Account Settings section of Builder. Be sure to replace YOUR_API_KEY with your Public API Key from your Space. The Public API Key is required for connecting your app to Builder.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Inside the routes directory, create a file named $.tsx. and paste in the code below:
To enable server-side rendering for the @builder.io/react package in your Vite project, you need to update your vite.config.ts file. Add the ssr property to the configuration object exported by defineConfig. Inside the ssr object, set the noExternal property to an array containing the "@builder.io/react" package name. This tells Vite not to externalize the @builder.io/react package during the SSR build process.
Make sure to place this configuration within the defineConfig function exported from your vite.config.ts file.
A later section in this tutorial guides you through getting your Public API Key from the Account Settings section of Builder. Be sure to replace YOUR_API_KEY with your Public API Key from your Space. The Public API Key is required for connecting your app to Builder.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Tip: When deploying the React Gen 2 SDK to an edge runtime, you must use the @builder.io/sdk-react/edge import instead of @builder.io/sdk-react. This is necessary to avoid importing code that only works on NodeJS runtimes.
Inside the routes directory, create a file called ($slug)._index.tsx and paste the following code into it. Replace YOUR_API_KEY with your Public API Key, which you can find in the Account section of Builder.
A later section in this tutorial guides you through getting your Public API Key from the Account Settings section of Builder. Be sure to replace YOUR_API_KEY with your Public API Key from your Space. The Public API Key is required for connecting your app to Builder.
The Content component accepts several props for customization. One important prop for client-side routing, is linkComponent, which which means you can implement custom routing. For more information on linkComponent and other props, visit the linkComponent entry in Using the Content Component.
Here's an example of how you might use the linkComponent prop:
Inside the routes directory, create a file named $.tsx. and paste in the code below:
To enable server-side rendering for the @builder.io/react package in your Vite project, you need to update your vite.config.ts file. Add the ssr property to the configuration object exported by defineConfig. Inside the ssr object, set the noExternal property to an array containing the "@builder.io/react" package name. This tells Vite not to externalize the @builder.io/react package during the SSR build process.
Make sure to place this configuration within the defineConfig function exported from your vite.config.ts file.
A later section in this tutorial guides you through getting your Public API Key from the Account Settings section of Builder. Be sure to replace YOUR_API_KEY with your Public API Key from your Space. The Public API Key is required for connecting your app to Builder.
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
Add the following to src/routes/[...catchall]/+page.svelte. This code prefetches data from the server:
Replace the placeholder YOUR_API_KEY with your Public API Key.
Fetch your Builder content in src/routes/[...catchall]/+page.server.js:
If your build is facing errors importing isolated-vm, exclude it from the pre-bundling step by adding the following code to vite.config.js:
Replace the placeholder YOUR_API_KEY with your Public API Key. The next section shows where to find your Public API Key.
In your script tag add the code in the snippet below.
Import fetchOneEntry, Content, isPreviewing from the Vue SDK.
Using fetchOneEntry(), specify the page model, your Public API Key, and the URL path. Builder then responds with the page content.
In your template, add Content along with directives for referencing your Public API Key and content.
Note the comment about adding your Public API Key. Whenever you integrate with Builder, you always need to provide it. The next section shows where to find your Public API Key.
In your template, add a Head component for metadata, a div that renders conditionally if there's content, and Content to display the contents:
First, update your app.vue file to include a <NuxtPage /> component.
Then, create pages/[...app].vue and paste in the following code.
A later section of this tutorial covers getting your Public API Key.
The template conditionally renders content based on the value of canShowContent. If canShowContent is true, it displays the page title and the <Content> component with the provided props. If canShowContent is false, it displays a Content not Found message.
The key to the template is <Content>, which takes several props:
:model: the name of the content’s Builder model:content: bound to the content data:apikey: bound to theapiKeydata
If the value of $route.path matches a the URL path of a Builder page, <Content> renders that page. Otherwise, the template renders a not found error.
For more details on <Content>, visit Using the Content Component.
Add Qwik SDK code to a route. Add the following code to src/routes/[...index]/index.tsx so that it renders all of your Builder pages.
Note the comment about adding your Public API Key. Whenever you integrate with Builder, you always need to provide it. The next section shows where to find your Public API Key.
Understanding the code
After the imports, this code:
- Adds your Public API Key, which the next section of this document covers.
- Specifies the model you want to work with, in this case
page. - Gets the page and creates the URL.
- Returns your page.
Tip: This example uses the package.json devDependencies @builder.io/qwik 0.21.0, @builder.io/qwik-city 0.5.3, and vite 4.1.4.
With Qwik apps generated with npm, Qwik sets the title metadata with RouterHead and then uses RouterHead in root.tsx.
For more information on Qwik, see Getting Started Qwikly and the Builder.io SDK for Qwik on npm.
Paste the following code into App.tsx.
A later section in this tutorial guides you through getting your Public API Key. When you have your Public API Key be sure to add it to this code snippet. The API Key is required for connecting your app to Builder.
Create a new standalone LandingPagecomponent:
In app.routes.ts, add a wildcard route for the new component:
Update landing-page.component.ts to fetch and display content from Builder. This code references your Public API Key, which the next section covers. Just paste this code into your file and continue on.
In landing-page.component.html, remove the placeholder content and add markup to display Builder Pages:
Create a new standalone LandingPagecomponent:
In app.routes.ts, add a wildcard route for the new component:
Update landing-page.component.ts to fetch and display content from Builder. This code references your Public API Key, which the next section covers. Just paste this code into your file and continue on.
In landing-page.component.html, remove the placeholder content and add markup to display Builder Pages:
Add a resolver to fetch the content in landing-page.resolver.ts:
In a new subdirectory called src/templates, create a file named page.jsx. Gatsby uses page template files to programmatically generate pages at build-time. Paste in the following:
The BuilderComponent accepts several props for customization. One important prop for client-side routing is renderLink, which means you can implement custom routing. For more information on renderLink and other props, visit the renderLink entry in Using BuilderComponent.
Here's an example of how you might use the renderLink prop:
There's no Builder SDK component to add to your code when integrating with the HTML API. Instead, you download your Builder page content as pre-rendered HTML and inject the HTML directly into your app's page.
The following explains at a high level how this process works using the example app above.
Understanding index.js
At the top of the file, the app imports Express and Axios, initializes the Express app, and defines the Builder API public key and server port.
The next step is to define a catchall route.
This route responds to any request for any URL path.
The route handler requests the pre-rendered HTML for the Builder page at that given path. For example, if the user visits your app at /about-us, then the handler requests HTML for the /about-us Builder page from the HTML API.
You can break down the request URL into the following parts:
- The start of the URL,
https://cdn.builder.io/api/v1/html, specifies the HTML API endpoint address. - The RESTful resource path
/pagespecifies the requested content's model—in this case, the Page model. - The
apiKeyquery parameter identifies your account. - The
urlquery parameter targets whichever Builder page has the given URL path, if any.
If a Builder page with the given URL path doesn't exist, the request returns a 404 HTTP status code and the error handler returns a { data: null } JSON response to the user.
If a Builder page with the given URL path does exist, then the pre-rendered HTML is injected into a template and the resulting page is sent to the user with the response.
In the view file where you want to render Builder content, import BuilderIO and add code to fetch Builder content. This example uses ContentView.swift in a minimal iOS app created using the instructions in the previous section.
Add the following code to import Builder and fetch content.
To use this code, you next need to get your Builder Public API Key and create a Builder Page.
Getting your API Key
To connect your Builder.io space to your application, add the Public API key to your code where the two TO DO comments are above.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key, as in the video below.
For more detail about the Public API Key, see Using Builder API Keys.
Creating a Page in Builder
In the code provided above that you pasted into your view, there's a line in the getContent() function that references a url, /test-page. To use this URL:
- Go to Content in Builder.
- Create a Page named
/test-page. - Add some content, for example, a button.
- Publish your Page.
In your component template, for example, AppComponent, paste in the following:
In landing-page.component.ts, add the following property:
In landing-page.component.html, add markup to pull in Builder Pages:
Add two new components for this demo: LandingPageComponent, which is where Builder content loads in your app and PageNotFoundComponent, to show what happens when you request a page that doesn't exist in Builder.
In app-routing.module.ts, import LandingPageComponent at the top with the other JavaScript imports and replace the default routes with an array with a single item:
Replace the placeholder content in landing-page.component.html with the following:
The BuilderComponent looks for the requested Builder page. If it exists, the page loads, if it doesn't, your PageNotFoundComponent loads instead.
In landing-page.component.ts, add the following property:
In page-not-found.component.html, replace the contents with:
Replace the contents of app.component.html with:
This gives you a nav with the homepage, an about page, and a mystery route that doesn't have a corresponding Builder page.
Though you don't have to create a nav to use Builder with your codebase, this demo features one so you can see how Builder and your code interact. You could opt to leave out the first div, .my-code-header and the app would still work.
The next section, .main, is where your Builder pages and PageNotFoundComponent render, so you need this part to see the Angular-Builder interaction.
Angular Universal requires a different 404 configuration. For more information, refer to the Builder Angular example.
Use your app with Builder
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Head over to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers the steps in this section of the tutorial all in one place to give you an idea of how it all works and the end result.
Get your API Key
To connect your Builder Space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Replace theYOUR_API_KEY placeholder in your code with your Public API Key . This location varies depending on your framework and is covered in the earlier sections of this tutorial. Make sure to wrap your Public API Key in quotes.
Set the model Preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the +New button near the top right of the screen.
- Create a new Page in Builder and name it
Home. Notice that Builder automatically generates the path as/home. - The Editor for your new Page loads automatically.
- In your new Page, drag in a Text or Image block (or anything really!).
- Click Edit and add content. This example uses an image.
- Click the Publish button in the upper right of the browser.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
Go to http://localhost:4200 and check out your work. Well done!
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Head over to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers the steps in this section of the tutorial all in one place to give you an idea of how it all works and the end result.
Get your API Key
To connect your Builder Space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Replace theYOUR_API_KEY placeholder in your code with your Public API Key . This location varies depending on your framework and is covered in the earlier sections of this tutorial. Make sure to wrap your Public API Key in quotes.
Set the model Preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the +New button near the top right of the screen.
- Create a new Page in Builder and name it
Home. Notice that Builder automatically generates the path as/home. - The Editor for your new Page loads automatically.
- In your new Page, drag in a Text or Image block (or anything really!).
- Click Edit and add content. This example uses an image.
- Click the Publish button in the upper right of the browser.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
Go to http://localhost:4200 and check out your work. Well done!
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Because you don't want unpublished content to render on your live app, you must use a service that lets you upload your Swift app and iterate on it in Builder. This document uses Appetize.io.
In Appetize.io
- Create an Appetize.io account.
- In Appetize, create a new app by going to Upload on the left side navigation.
- Run your app in the Xcode Simulator by clicking the run button at the top.
- Now, back in Xcode (not the Simulator), go to the Product menu at the top.
- Select Show Build Folder in Finder.
- Open the Products folder > Debug-iphonesimulator. The contents of Debug-iphonesimulator are the files and directories that make up your Swift app.
- Select all the contents within the Debug-iphonesimulator and compress (zip) it.
- Rename your
.zipfile if desired. - Drag and drop the
.zipfile into the Appetize Upload an app UI. - When the confirmation displays with the heading Upload successful, copy your Appetize publicKey so you can use it in Builder.
The image below shows the Appetize.io confirmation for a successful upload. In the content that displays, note the publicKey.
For more detail on this process in Appetize, visit the Appetize iOS documentation.
In Builder
Prerequisite: to complete this section, you need to have an Appetize field in your model. To request this feature, contact Builder support at support@builder.io.
With Appetize, you can edit your iOS app content entry in the Builder Visual Editor, and your unpublished edits render in the Mobile Sidecar.
- After Builder support has enabled this feature for you, go to the Page or Section model you'd like to use with Appetize and Xcode.
- Click on the Advanced tab.
- For the Appetize.io API Key entry, click the Edit button.
- In the dialogue that opens, enter your Appetize.io API Key that you copied earlier when you uploaded your app to Appetize.
- Click OK.
- Click Save for the model.
The following video shows this process:
Using custom action handlers
If you'd like to use a custom action handler, use a closure as the last argument to the RenderContent view as in the following example.
Inside your handler, you can define any custom behavior based on the actions triggered within the rendered content.
To use a custom action handler, use a closure as the last argument to the RenderContent view.
In the example below, the closure is the code enclosed in {}. This handler takes two parameters: text and urlString, which provide information about the action occurring within the rendered content.
The printed message includes the Button clicked! string with information about the action , the text associated with the action (if any), and the urlString (the URL associated with the action, if any).
Builder adds the ability for your team members–even those who don't code–to create and iterate on ideas with a drag-and-drop interface.
Go to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.
This next video covers demonstrates the entire process of following this tutorial. The end result is a local application connected to Builder. This example uses Next.js but all frameworks use the same process.
Get your API Key
To connect your Builder.io space to your application, add the Public API key to your code.
Find your Public API Key within Builder.io in one of two ways:
- Press
Cmd/Ctrl+kin Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard. - Go to Settings and copy your Public API Key.
For more detail about the Public API Key, see Using Builder API Keys.
Paste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework. Make sure to wrap your Public API Key in quotes.
The following video demonstrates how to copy your Public API Key from Settings and paste it into a Next.js app.
Set the model preview URL
To enable Builder to open your site in the Visual Editor, provide a URL that Builder can open which has the Builder rendering component in it.
- Go to Models and choose the Page model.
- Set the Preview URL to
http://localhost:<your-port>, where<your-port>is the port your app is using. Be sure to include thehttp://. - Click Save.
The following video shows these steps:
Create a Builder Page
Create a Builder Page to use with your integrated app.
- Go to Content.
- Click the + New Entry button near the top right of the screen.
- Create a new Page in Builder.
- The Editor for your new Page loads automatically.
- In your new Page, drag in Builder blocks.
- Click the Publish button in the upper right of the browser.
- After a few moments, your page will be available on localhost. Click the right arrow icon next to the Publish button and choose View live page to visit your page.
The next video shows creating a Page in a Builder-integrated app and dragging in an Image and Text block.
After you deploy your updates, be sure to update this to a public URL, such as your live site or your staging site; for example, https://your-site.com, so anyone on your team can connect to your site for visual editing.
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment istest-2. - Make sure that you've set the preview URL on the Page Model.
- For some frameworks, you might have to restart the dev server.
For more information regarding special use cases, visit Integration Tips.
Builder Pages best practice
We recommend that you place your Builder pages between your header and footer. A common use case is developers keeping headers and footers in their codebase while integrating page building. In this way, non-developer team members can iterate on pages, without having to rely on developers.
To use Builder pages between your header and footer, follow the guidance below for your framework:
Import your header and footer along with the other JavaScript imports at the top of [...page].jsx.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of [...page].jsx.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of [...page].jsx.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of [...page].jsx.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after BuilderComponent.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after Content.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after Content.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after Content.
Import your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.
Add the header and footer components before and after BuilderComponent.
In Svelte, create a component for the header and footer, import them at the top of App.svelte, and use them in the template.
The following example shows the import statements and then using the header and footer around the RenderContent component, which pulls in your Builder content.
Add the header and footer components before and after Content.
In _.vue, import your header and footer along with the other JavaScript imports in page.jsx.
Add the header and footer components before and after Content.
If you've used the Qwik CLI generated app, your app already has this structure in place, which you can edit in src/routes/layout.tsx.
Add the header and footer components before and after Content.
In your template, place your header and footer components around the content fetched from Builder, as demonstrated in the following example:
In your template, place your header and footer components around the content fetched from Builder, as demonstrated in the following example:
Import your header and footer along with the other JavaScript imports at the top of [...page].jsx.
Add the header and footer components before and after BuilderComponent.
With the HTML API, you can add your header and footer just as you would with standard HTML. In the following example, add your header and footer markup before and after ${pageHtml} as in the following example.
As a best practice, add your header and footer before and after your Builder Page content.
In AppModule, import and declare your header and footer components.
In app.component.html add your header and footer selectors before and after any content you'd like to display, such as in this example, the demo nav and the <router-outlet> where Builder pages render.
What's next
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part – add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part – add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
For more information on how to work with Models in Builder, refer to Understanding Content Models.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.