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.
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:
npm install @builder.io/reactIf 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:
npm run devWant 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:
npm install @builder.io/sdk-reactIf 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:
npm run devWant 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:
npm install @builder.io/reactIf 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:
npm run devAt the command line, at the root of your project, use npm to install the Builder SDK:
npm install @builder.io/sdk-reactIf 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:
npm run devAt the command line, use npm to install the Builder SDK:
npm install @builder.io/reactIf 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:
npm startAt the command line, use npm to install the Builder SDK:
npm install @builder.io/sdk-reactIf 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:
npm startAt the command line, use npm to install the Builder SDK:
npm install @builder.io/sdk-reactIf 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:
npm run devWant 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:
npm install @builder.io/reactIf 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:
npm run devAt the command line, use npm to install the Builder SDK:
npm install @builder.io/sdk-reactIf 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:
npm run devAt the command line, use npm to install the Builder SDK:
npm install @builder.io/reactIf 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:
npm run devAt the command line, at the root of your project, use npm to install the Builder SDK:
npm install @builder.io/sdk-svelteIf 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:
npm install @builder.io/sdk-vueIf 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:
<script>
import '@builder.io/sdk-vue/css';
</script>Start the development server:
npm run devAt the command line, use npm to install the Builder SDK:
npm install @builder.io/sdk-vueIf 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:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ['@builder.io/sdk-vue/nuxt'],
});Start the development server:
npm run devWant 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:
npm install @builder.io/sdk-qwikIf 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:
npm startAt the command line, use npm to install the Builder SDK:
npm install @builder.io/sdk-react-nativeIf 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:
npm run webInstall the Builder Angular SDK:
npm install @builder.io/sdk-angular
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:
ng serveInstall the Builder Angular SDK:
npm install @builder.io/sdk-angularIf 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:
ng serveAt the command line, use npm to install the Builder plugin for Gatsby and the React SDK:
npm install @builder.io/gatsby @builder.io/reactAdd the plugin to gatsby-config.js in your project's root directory, making sure to replace YOUR_API_KEY with your Public API Key.
// gatsby-config.js
const path = require('path');
module.exports = {
siteMetadata: {
title: `My Gatsby Site`,
siteUrl: `https://www.yourdomain.tld`,
},
plugins: [
{
resolve: '@builder.io/gatsby',
options: {
// Replace with your Public API Key
publicAPIKey: YOUR_API_KEY,
templates: {
// Render every `page` model as a new page using the
// src/templates/page.jsx template based on the URL provided in Builder.io
page: path.resolve('src/templates/page.jsx'),
},
},
},
],
};Start the development server:
npm run developThere'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.
node ./index.jsin 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:
npm install @builder.io/angularIf 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:
ng g c LandingPageIn 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.
...
import { BuilderModule } from '@builder.io/angular'; // <-- import here
import { LandingPageComponent } from './landing-page/landing-page.component'; // <-- import here
@NgModule({
declarations: [
...
LandingPageComponent // <-- declare landing page
],
imports: [
...
BuilderModule.forRoot(YOUR_API_KEY), // <-- import here and add API Key
RouterModule.forRoot([
{
path: '**',
component: LandingPageComponent, // <-- add LandingPageComponent here
},
]),
],
...
})
export class AppModule { }
Start the development server with the Angular CLI:
ng servePaste 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.
// pages/[...page].tsx
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Fetch the builder content for the given page
const page = await builder
.get("page", {
userAttributes: {
urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
},
})
.toPromise();
// Return the page content as props
return {
props: {
page: page || null,
},
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await builder.getAll("page", {
// We only need the URL field
fields: "data.url",
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages.map((page) => `${page.data?.url}`).filter(url => url !== '/'),
fallback: 'blocking',
};
}
// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!page && !isPreviewing) {
return <DefaultErrorPage statusCode={404} />;
}
// If the page content is available, render
// the BuilderComponent with the page content
return (
<>
<Head>
<title>{page?.data?.title}</title>
</Head>
{/* Render the Builder page */}
<BuilderComponent model="page" content={page || undefined} />
</>
);
}
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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
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.
export async function getStaticProps({ params }) {
const page = await builder
.get('page', {
userAttributes: {
urlPath: '/' + (params?.page?.join('/') || ''),
},
})
.toPromise();
return {
props: {
page: page || null,
},
revalidate: 5
};
}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
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.
export async function getStaticPaths() {
const pages = await builder.getAll('page', {
options: { noTargeting: true },
});
return {
paths: pages.map(page => `${page.data?.url}`),
fallback: true,
};
}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.
export default function Page({ page }) {
const router = useRouter();
const isPreviewing = useIsPreviewing();
if (router.isFallback) {
return <h1>Loading...</h1>
}
if (!page && !isPreviewing) {
return <DefaultErrorPage statusCode={404} />
}
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
<BuilderComponent model="page" content={page} />
</>
);
}
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.
// pages/[...page].tsx/**
// Catch all route to build and render content from Builder.io in SSG mode
import type { BuilderContent } from '@builder.io/sdk-react';
import {
Content,
fetchEntries,
fetchOneEntry,
isPreviewing,
} from '@builder.io/sdk-react';
import type { GetStaticProps } from 'next';
import DefaultErrorPage from 'next/error';
import Head from 'next/head';
import { useRouter } from 'next/router';
//TO DO: Add you public API Key here
const BUILDER_API_KEY = /* your API key here */;
// Define a function that fetches the Builder content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
const urlPath =
'/' +
(Array.isArray(params?.page) ? params.page.join('/') : params?.page || '');
// Fetch the builder content for the given page
const page = await fetchOneEntry({
apiKey: BUILDER_API_KEY,
model: 'page',
userAttributes: { urlPath },
});
return {
// Return the page content as props
props: { page },
// Revalidate the content every 5 seconds
revalidate: 5,
};
};
// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
// Get a list of all pages in Builder
const pages = await fetchEntries({
apiKey: BUILDER_API_KEY,
model: 'page',
// We only need the URL field
fields: 'data.url',
options: { noTargeting: true },
});
// Generate the static paths for all pages in Builder
return {
paths: pages.map((page) => `${page.data?.url}`),
fallback: 'blocking',
};
}
// Define the Page component
export default function Page(props: { page: BuilderContent | null }) {
const router = useRouter();
const canShowContent = props.page || isPreviewing(router.asPath);
// If the page content is not available
// and not in preview/editing mode, show a 404 error page
if (!canShowContent) {
return <DefaultErrorPage statusCode={404} />;
}
// If the page content is available, render
// the BuilderComponent with the page content
return (
<>
<Head>
<title>{props.page?.data?.title}</title>
</Head>
{/* Render the Builder page */}
<Content model="page" content={props.page} apiKey={BUILDER_API_KEY} />
</>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}In components/builder.tsx (create this directory and file if needed) and paste in the following code:
// components/builder.tsx
"use client";
import { ComponentProps } from "react";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
import { BuilderContent, builder } from '@builder.io/sdk';
import DefaultErrorPage from "next/error";
type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
export function RenderBuilderContent(props: BuilderPageProps) {
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();
// If `content` has a value or the page is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (props.content || isPreviewing) {
return <BuilderComponent {...props} />;
}
// If the `content` is falsy and the page is
// not being previewed in Builder, render the
// DefaultErrorPage with a 404.
return <DefaultErrorPage statusCode={404} />;
}
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:
// Example file structure, app/[...page]/page.tsx
// You could alternatively use src/app/[...page]/page.tsx
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
interface PageProps {
params: {
page: string[];
};
}
export default async function Page(props: PageProps) {
const model = "page";
const content = await builder
// Get the page content from Builder with the specified options
.get("page", {
fetchOptions: { next: { revalidate: 5 } },
userAttributes: {
// Use the page path specified in the URL to fetch the content
urlPath: "/" + (props?.params?.page?.join("/") || ""),
},
// Set prerender to false to return JSON instead of HTML
prerender: false,
})
// Convert the result to a promise
.toPromise();
return (
<>
{/* Render the Builder page */}
<RenderBuilderContent content={content} model={model} />
</>
);
}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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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:
/**
* Quickstart snippet
* snippets/nextjs-app-dir-client/app/[[...slug]].tsx
* Uses @builder.io/sdk-react
*/
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-react';
interface PageProps {
params: {
slug: string[];
};
searchParams: Record<string, string>;
}
const PUBLIC_API_KEY = 'YOUR_API_KEY';
export default async function Page(props: PageProps) {
const urlPath = '/' + (props.params?.slug?.join('/') || '');
const content = await fetchOneEntry({
apiKey: PUBLIC_API_KEY,
model: 'page',
userAttributes: { urlPath },
fetchOptions: { next: { revalidate: 3 } },
});
const canShowContent = content || isPreviewing(props.searchParams);
if (!canShowContent) {
return <p>Not Found</p>;
}
return <Content content={content} apiKey={PUBLIC_API_KEY} model="page" />;
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
import { useEffect, useState } from "react";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
// Put your API key here
builder.init(YOUR_API_KEY);
// set whether you're using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function CatchAllRoute() {
const isPreviewingInBuilder = useIsPreviewing();
const [notFound, setNotFound] = useState(false);
const [content, setContent] = useState(null);
// get the page content from Builder
useEffect(() => {
async function fetchContent() {
const content = await builder
.get("page", {
url: window.location.pathname
})
.promise();
setContent(content);
setNotFound(!content);
// if the page title is found,
// set the document title
if (content?.data.title) {
document.title = content.data.title
}
}
fetchContent();
}, [window.location.pathname]);
// If no page is found, return
// a 404 page from your code.
// The following hypothetical
// <FourOhFour> is placeholder.
if (notFound && !isPreviewingInBuilder) {
return <FourOhFour/>
}
// return the page when found
return (
<>
{/* Render the Builder page */}
<BuilderComponent model="page" content={content} />
</>
);
}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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
/**
* Quickstart snippet
* snippets/react/src/routes/IntegratingPages.tsx
*/
import {
Content,
fetchOneEntry,
isPreviewing,
type BuilderContent,
} from '@builder.io/sdk-react';
import { useEffect, useState } from 'react';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const MODEL_NAME = 'page';
// set whether you're using the Visual Editor,
// whether there are changes,
// and render the content if found
export default function App() {
const [notFound, setNotFound] = useState(false);
const [content, setContent] = useState<BuilderContent | null>(null);
// get the page content from Builder
useEffect(() => {
fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: window.location.pathname,
},
})
.then((content) => {
if (content) {
setContent(content);
}
setNotFound(!content);
})
.catch((err) => {
console.log('Oops: ', err);
});
}, []);
// If no page is found, return
// a 404 page from your code.
if (notFound && !isPreviewing()) {
return <div>404</div>;
}
// return the page when found
return (
<Content content={content} model={MODEL_NAME} apiKey={BUILDER_API_KEY} />
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}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.
// ($slug)._index.tsx
import {
Content,
fetchOneEntry,
getBuilderSearchParams,
isPreviewing,
} from '@builder.io/sdk-react';
import type { LoaderFunctionArgs } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { fetch as webFetch } from '@remix-run/web-fetch';
const apiKey = /* Add your Public API Key here */;
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
const url = new URL(request.url);
const urlPath = `/${params['slug'] || ''}`;
const page = await fetchOneEntry({
model: 'page',
apiKey: apiKey,
options: getBuilderSearchParams(url.searchParams),
userAttributes: { urlPath },
fetch: webFetch,
});
if (!page && !isPreviewing(url.search)) {
throw new Response('Page Not Found', {
status: 404,
statusText: 'Page not found in Builder.io',
});
}
return { page };
};
// Define and render the page.
export default function Page() {
// Use the useLoaderData hook to get the Page data from `loader` above.
const { page } = useLoaderData<typeof loader>();
// Render the page content from Builder.io
return <Content model="page" apiKey={apiKey} content={page as any} />;
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}Inside the routes directory, create a file named $.tsx. and paste in the code below:
// routes/$.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
// add your Public API Key here
builder.init(YOUR_API_KEY);
// Fetch contents of the page
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
// Fetch data content from Builder.io based on the URL path
const page = await builder
.get("page", {
userAttributes: {
urlPath: `/${params["*"]}`,
},
})
.toPromise();
// Verify the user is previewing or editing in Builder
const isPreviewing = new URL(request.url).searchParams.has("builder.preview");
// If the page is not found and the user is not previewing, throw a 404.
// The CatchBoundary component will catch the error
if (!page && !isPreviewing) {
throw new Response("Page Not Found", {
status: 404,
statusText:
"We couldn't find this page, please check your url path and if the page is published on Builder.io.",
});
}
return { page };
};
// Define and render the page.
export default function Page() {
// Use the useLoaderData hook to get the Page data from `loader` above.
const { page } = useLoaderData<typeof loader>();
// Render the page content from Builder.io
return <BuilderComponent model="page" content={page} />;
}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.
// vite.config.ts
export default defineConfig({
ssr: {
noExternal: ["@builder.io/react"],
},
// rest of your Vite configuration
});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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
/**
* Quickstart snippet
* snippets/hydrogen/app/components/app.tsx
*/
import {Content, fetchOneEntry, isPreviewing} from '@builder.io/sdk-react';
import type {LoaderFunction} from '@remix-run/node';
import {useLoaderData} from '@remix-run/react';
import {useNonce} from '@shopify/hydrogen';
const BUILDER_API_KEY = 'YOUR_API_KEY';
const model = 'page';
export const builderLoader: LoaderFunction = async ({params, request}) => {
try {
const pathname = `/${params['*'] || ''}`;
const url = new URL(request.url);
const content = await fetchOneEntry({
model,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: pathname,
},
});
return {content, model, searchParams: Object.fromEntries(url.searchParams)};
} catch (e) {
console.error(e);
return {content: null};
}
};
export default function BuilderPage() {
const {content, model, searchParams} = useLoaderData<{
content: any;
model: string;
searchParams: Record<string, string>;
}>();
const nonce = useNonce();
const canShowContent = content || isPreviewing(searchParams);
return (
<div>
{canShowContent ? (
<Content
model={model}
apiKey={BUILDER_API_KEY}
content={content}
nonce={nonce}
/>
) : (
<div>404</div>
)}
</div>
);
}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:
import { Link } from 'react-router'
function LinkComponent(props) {
return <Link {...props} to={props.href} />
}
function MyComponent() {
return <Content
content={content}
model={MODEL_NAME}
apiKey={BUILDER_API_KEY}
linkComponent={LinkComponent}
/>
}Inside the routes directory, create a file named $.tsx. and paste in the code below:
// routes/$.tsx
import { BuilderComponent, builder } from "@builder.io/react";
import type { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
// add your Public API Key here
builder.init(YOUR_API_KEY);
// Fetch contents of the page
export const loader = async ({ params, request }: LoaderFunctionArgs) => {
// Fetch data content from Builder.io based on the URL path
const page = await builder
.get("page", {
userAttributes: {
urlPath: `/${params["*"]}`,
},
})
.toPromise();
// Verify the user is previewing or editing in Builder
const isPreviewing = new URL(request.url).searchParams.has("builder.preview");
// If the page is not found and the user is not previewing, throw a 404.
// The CatchBoundary component will catch the error
if (!page && !isPreviewing) {
throw new Response("Page Not Found", {
status: 404,
statusText:
"We couldn't find this page, please check your url path and if the page is published on Builder.io.",
});
}
return { page };
};
// Define and render the page.
export default function Page() {
// Use the useLoaderData hook to get the Page data from `loader` above.
const { page } = useLoaderData<typeof loader>();
// Render the page content from Builder.io
return <BuilderComponent model="page" content={page} />;
}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.
// vite.config.ts
export default defineConfig({
ssr: {
noExternal: ["@builder.io/react"],
},
// rest of your Vite configuration
});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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>Add the following to src/routes/[...catchall]/+page.svelte. This code prefetches data from the server:
<!-- src/routes/[...catchall]/+page.svelte -->
<script>
import { isPreviewing, Content } from "@builder.io/sdk-svelte";
const apiKey = /* Put your Public API Key here */;
const model = 'page';
// this data comes from the function in `+page.server.js`, which runs on the server only
export let data;
// show unpublished content when in preview mode.
const canShowContent = data.content || isPreviewing();
</script>
<main>
<h1>Welcome to SvelteKit</h1>
<h2>Below is your Builder Content:</h2>
<!-- TO DO: Add your Public API Key in <Content/>-->
{#if canShowContent}
<div>page Title: {data.content?.data?.title || "Unpublished"}</div>
<Content
model={model}
content={data.content}
apiKey={apiKey}
/>
{:else}
Content Not Found
{/if}
</main>
Replace the placeholder YOUR_API_KEY with your Public API Key.
Fetch your Builder content in src/routes/[...catchall]/+page.server.js:
// src/routes/[...catchall]/+page.server.js
import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-svelte';
export async function load(event) {
// fetch your Builder content
const content = await fetchOneEntry({
model: 'page',
apiKey: // TO DO: Add your Public API Key HERE,
options: getBuilderSearchParams(event.url.searchParams),
userAttributes: {
urlPath: event.url.pathname || '/',
},
});
return { content };
}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:
// vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
// add this to fix SDK bundling errors.
optimizeDeps: { exclude: ["isolated-vm"] },
});
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.
<script setup lang="ts">
import type { BuilderContent } from '@builder.io/sdk-vue';
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
import { onMounted, ref } from 'vue';
const content = ref<BuilderContent | null>(null);
// Add your Public API Key below
const apiKey = PUT YOUR PUBLIC API KEY HERE;
const canShowContent = ref(false);
const model = 'page';
onMounted(async () => {
content.value = await fetchOneEntry({
model,
apiKey,
userAttributes: {
urlPath: window.location.pathname,
},
});
canShowContent.value = content.value ? true : isPreviewing();
});
</script>
<template>
<Content
v-if="canShowContent"
:model="model"
:content="content"
:api-key="apiKey"
/>
<div v-else>Content not Found</div>
</template>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:
<div>
<Head>
<!-- Make sure to give your page a title and description in Builder -->
<title v-if="content && content.data && content.data.title">{{ content.data.title }}</title>
<meta
name="description"
v-if="content && content.data && content.data.description"
:content="content.data.description" />
</Head>
<div>Below is Builder Content:</div>
<div v-if="canShowContent">
<div>
Page title:
{{ (content && content.data && content.data.title) }}
</div>
<Content
model="model"
:content="content"
:api-key="apiKey"
/>
</div>
</div>First, update your app.vue file to include a <NuxtPage /> component.
<template>
<NuxtPage />
</template>Then, create pages/[...app].vue and paste in the following code.
<!-- pages/[...app].vue -->
<script setup>
import { Content, fetchOneEntry, isPreviewing } from '@builder.io/sdk-vue';
import { ref } from 'vue';
const route = useRoute();
// TO DO: Add your Public API Key here
const apiKey = /* your API key here */;
const canShowContent = ref(false);
const model = 'page';
const { data: content } = await useAsyncData('builderData', () =>
fetchOneEntry({
model,
apiKey,
userAttributes: {
urlPath: route.path,
},
})
);
canShowContent.value = content.value ? true : isPreviewing(route.path);
</script>
<template>
<div v-if="canShowContent">
<Content :api-key="apiKey" :model="model" :content="content" />
</div>
<div v-else>Content not Found</div>
</template>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.
/**
* Quickstart snippet
* snippets/qwik-city/src/routes/[...index]/index.tsx
*/
import { component$ } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import { Content, fetchOneEntry } from '@builder.io/sdk-qwik';
// Define Builder's public API key and content model.
// TO DO: Replace with your Public API Key
export const BUILDER_PUBLIC_API_KEY = 'YOUR_API_KEY';
export const BUILDER_MODEL = 'page';
// Define a route loader function that loads
// content from Builder based on the URL.
export const useBuilderContent = routeLoader$(async ({ url }) => {
// Fetch content for the specified model using the API key.
const builderContent = await fetchOneEntry({
model: BUILDER_MODEL,
apiKey: BUILDER_PUBLIC_API_KEY,
userAttributes: {
urlPath: url.pathname,
},
});
// Return the fetched content.
return builderContent;
});
// Define a component that renders Builder content
// using Qwik's Content component.
export default component$(() => {
// Call the useBuilderContent function to get the content.
const content = useBuilderContent();
// Specify the content model, pass the fetched content,
// and provide the Public API Key
return (
<Content
model={BUILDER_MODEL}
content={content.value}
apiKey={BUILDER_PUBLIC_API_KEY}
/>
);
});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.
// App.tsx
import type { BuilderContent } from '@builder.io/sdk-react-native';
import { Content, fetchOneEntry } from '@builder.io/sdk-react-native';
import { useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { Text, View } from 'react-native';
const BUILDER_API_KEY = /* Put your Public API Key here */;
const MODEL_NAME = 'page';
export default function HomeScreen() {
const [content, setContent] = useState<BuilderContent | null>(null);
const { slug } = useLocalSearchParams<{ slug: string }>();
useEffect(() => {
fetchOneEntry({
model: MODEL_NAME,
apiKey: BUILDER_API_KEY,
userAttributes: {
urlPath: slug ? `/${slug}` : '/',
},
})
.then((data) => {
setContent(data);
})
.catch((err) => console.error('Error fetching Builder Content: ', err));
}, []);
return (
<View
style={{
// mimick body stylesheets from the web
display: 'flex',
flexDirection: 'column',
}}
>
{content ? (
<View
style={{
display: 'flex',
flexDirection: 'column',
}}
>
<Content
apiKey={BUILDER_API_KEY}
model={MODEL_NAME}
content={content}
/>
</View>
) : (
<Text>Not Found.</Text>
)}
</View>
);
}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:
ng g c landingPageIn app.routes.ts, add a wildcard route for the new component:
// app.routes.ts
import { Routes } from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component';
export const routes: Routes = [
{
path: '**',
component: LandingPageComponent,
},
];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.
// app/landing-page/landing-page.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Content, type BuilderContent } from '@builder.io/sdk-angular';
@Component({
selector: 'app-landing-page',
standalone: true,
imports: [Content, CommonModule],
templateUrl: './landing-page.component.html',
})
export class LandingPageComponent {
apiKey = 'YOUR_API_KEY';
model = 'page';
content: BuilderContent | null = null;
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.activatedRoute.data.subscribe((data: any) => {
this.content = data.content;
});
}
}In landing-page.component.html, remove the placeholder content and add markup to display Builder Pages:
<!-- app/landing-page.component.html -->
<ng-container *ngIf="content; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>Create a new standalone LandingPagecomponent:
ng g c landingPageIn app.routes.ts, add a wildcard route for the new component:
// app.routes.ts
import { Routes } from '@angular/router';
import { LandingPageComponent } from './landing-page/landing-page.component';
export const routes: Routes = [
{
path: '**',
component: LandingPageComponent,
},
];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.
// app/landing-page/landing-page.component.ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Content, type BuilderContent } from '@builder.io/sdk-angular';
@Component({
selector: 'app-landing-page',
standalone: true,
imports: [Content, CommonModule],
templateUrl: './landing-page.component.html',
})
export class LandingPageComponent {
apiKey = 'YOUR_API_KEY';
model = 'page';
content: BuilderContent | null = null;
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
this.activatedRoute.data.subscribe((data: any) => {
this.content = data.content;
});
}
}In landing-page.component.html, remove the placeholder content and add markup to display Builder Pages:
<!-- app/landing-page.component.html -->
<ng-container *ngIf="content; else notFound">
<builder-content
[model]="model"
[content]="content"
[apiKey]="apiKey"
></builder-content>
</ng-container>
<ng-template #notFound>
<div>404 - Content not found</div>
</ng-template>Add a resolver to fetch the content in landing-page.resolver.ts:
import type { ActivatedRouteSnapshot, ResolveFn } from '@angular/router';
import { fetchOneEntry, getBuilderSearchParams } from '@builder.io/sdk-angular';
export const landingPageResolver: ResolveFn<any> = (
route: ActivatedRouteSnapshot
) => {
const urlPath = `/${route.url.join('/')}`;
const searchParams = getBuilderSearchParams(route.queryParams);
return fetchOneEntry({
apiKey: 'YOUR_API_KEY',
model: 'page',
userAttributes: {
urlPath,
},
options: searchParams,
});
};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:
// src/templates/page.jsx
import * as React from 'react';
import { graphql } from 'gatsby';
import { builder, BuilderComponent } from '@builder.io/react';
// Initialize the Builder SDK with your organization's API Key
// Find the API Key on: https://builder.io/account/settings
builder.init(your_api_key)
// Your template populates your Gatsby pages with your Builder page content.
function PageTemplate({ data }) {
const models = data?.allBuilderModels;
const page = models.page?.content;
return <BuilderComponent name="page" content={page} />;
}
export default PageTemplate;
// pageQuery is a GraphQL query that
// fetches each page's content from Builder.
// Your content is rendered within the
// PageTemplate using BuilderComponent, provided by Builder's SDK.
export const pageQuery = graphql`
query ($path: String!) {
allBuilderModels {
page(target: { urlPath: $path }) {
content
}
}
}
`;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:
<BuilderComponent
model="page"
content={content}
renderLink={(props) => <CustomLink {...props} />}
/>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.
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.
app.get('*', async (req, res) => {
...
});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.
const encodedUrl = encodeURIComponent(req.url);
const { data: pageData } =
await fetch(`https://cdn.builder.io/api/v1/html/page?apiKey=${apiKey}&url=${encodedUrl}`)
.then((res) => res.json())
.catch(handleError);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.
const handleError = err => {
// The requested Builder content could not be found.
if (err.response.status === 404) {
return { data: null };
}
throw err;
};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.
const pageHtml = pageData.data.html;
res.send(`
<html>
<head> <!-- Your head content here --> </head>
<body>
${pageHtml}
</body>
</html>
`);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.
// add to a view file, such as ContentView.swift
// default Swift import
import SwiftUI
// Import BuilderIO wherever you need to use the SDK methods
import BuilderIO
struct ContentView: View {
@ObservedObject var content: BuilderContentWrapper = BuilderContentWrapper()
init() {
self.getContent()
}
// Define getContent as a method to fetch content from Builder.io
func getContent() {
Content.getContent(model: "page",
apiKey: YOUR_PUBLIC_API_KEY, // TO DO: Replace with Public API key
url: "/test-page", // TO DO: Create a Page in Builder called test-page
locale: "",
preview: "") { content in
// The completion block to be executed once getContent is completed
// Ideally in the main thread because it likely updates UI components
DispatchQueue.main.async {
// Calls changeContent on self.content with the new content
self.content.changeContent(content)
}
}
}
var body: some View {
VStack {
if let contentValue = content.content {
// Use the content to render your view
// TO DO: Replace with Public API key
RenderContent(content: contentValue, apiKey: YOUR_PUBLIC_API_KEY)
} else {
// Display a loading message if the content is not yet available
Text("Loading...")
}
// Handle live previewing
if Content.isPreviewing() {
// Display a 'Reload' button during content previews for manual refresh
Button("Reload") {
self.getContent()
}
// Listen for shake gesture notification to refresh content
.onReceive(NotificationCenter.default.publisher(for: deviceDidShakeNotification)) { _ in
self.getContent()
}
}
}
}
}
// Make sure `deviceDidShakeNotification` is defined as a Notification.Name
// This could be in the same file or in another part of your code
let deviceDidShakeNotification = Notification.Name("DeviceDidShakeNotification")
To use this code, you next need to get your Builder Public API Key and create a Builder Page.
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.
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:
<header>My header</header>
<router-outlet></router-outlet>
<footer>My footer</footer>In landing-page.component.ts, add the following property:
noBuilderPageForUrl: boolean = false;In landing-page.component.html, add markup to pull in Builder Pages:
<builder-component
*ngIf="!noBuilderPageForUrl"
model="page"
(load)="noBuilderPageForUrl = $event ? false : true"
(error)="noBuilderPageForUrl = true"
>
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>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.
ng generate component LandingPage
ng generate component PageNotFoundIn 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:
import { LandingPageComponent } from './landing-page/landing-page.component';
...
// replace default routes with one wildcard
// path that goes to LandingPageComponent
[
{
path: '**',
component: LandingPageComponent,
},
]Replace the placeholder content in landing-page.component.html with the following:
<builder-component
*ngIf="!noBuilderPageForUrl"
model="page"
(load)="noBuilderPageForUrl = $event ? false : true"
(error)="noBuilderPageForUrl = true"
>
<!-- Default content inside the tag shows while the builder content is fetching -->
<div class="spinner"></div>
</builder-component>
<app-page-not-found *ngIf="noBuilderPageForUrl"> </app-page-not-found>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:
noBuilderPageForUrl: boolean = false;In page-not-found.component.html, replace the contents with:
<h2>404 page from Angular app</h2>Replace the contents of app.component.html with:
<!-- Optional nav for demonstration -->
<div class="my-code-header">
<h2>This nav is from AppComponent:</h2>
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/mystery">Mystery (no Builder page exists here)</a></li>
</ul>
</div>
<!-- You need router-outlet here -->
<div class="main">
<h2>This section loads Builder pages unless page not found, in which case it loads the PageNotFoundComponent from the Angular app.</h2>
<router-outlet></router-outlet>
</div>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.
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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
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.
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 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.
- 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.
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:
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.
RenderContent(content: $content.content.wrappedValue!, apiKey: YOUR_API_KEY) { text, urlString in
print("Button clicked!", text, urlString ?? "empty url");
}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.
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.
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 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.
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<Content model="page" content={page} apiKey={BUILDER_PUBLIC_API_KEY} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<Content model="page" content={page} apiKey={BUILDER_PUBLIC_API_KEY} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<Content model="page" content={page} apiKey={BUILDER_PUBLIC_API_KEY} />
+ <MyFooter />
</>
);
}
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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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.
<!-- Import your header and footer -->
<script>
import MyHeader from './MyHeader.svelte';
import MyFooter from './MyFooter.svelte';
</script>
<!-- Header comes from your code -->
<MyHeader></MyHeader>
<main>
<!-- This content comes from Builder -->
<Content
...
/>
</main>
<!-- Footer comes from your code -->
<MyFooter></MyFooter>Add the header and footer components before and after Content.
<template>
<MyHeader />
<Content
...
/>
<MyFooter />
</template>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.
<template>
<div id="home">
<div>Hello world from your Vue project. Below is Builder Content:</div>
<div v-if="canShowContent">
<div>
Page title:
{{ (content && content.data && content.data.title) || 'Unpublished' }}
</div>
+ <MyHeader />
<Content
model="page"
:content="content"
:api-key="apiKey"
/>
</div>
<div v-else>Content not Found</div>
+ <MyFooter />
</div>
</template>
<script>
import Vue from 'vue'
import { Content, getContent, isPreviewing } from '@builder.io/sdk-vue'
+ import MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
// TODO: enter your public API key
const BUILDER_PUBLIC_API_KEY = 'YOUR_API_KEY'
export default Vue.extend({
name: 'DynamicallyRenderBuilderPage',
- components: { Content },
+ components: { Content, MyHeader, MyFooter },
data: () => ({
canShowContent: false,
content: null,
apiKey: BUILDER_PUBLIC_API_KEY,
}),
mounted() {
// Re-run this check on the client in case of SSR
this.canShowContent = this.content || isPreviewing()
},
async fetch() {
const content = await getContent({
model: 'page',
apiKey: BUILDER_PUBLIC_API_KEY,
userAttributes: {
urlPath: this.$route.path,
},
})
this.canShowContent = content || isPreviewing()
this.content = content
if (!this.canShowContent) {
if (this.$nuxt.context?.ssrContext?.res) {
this.$nuxt.context.ssrContext.res.statusCode = 404
}
}
},
})
</script>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.
import { component$, Slot } from '@builder.io/qwik';
import Header from '../components/header/header';
export default component$(() => {
return (
<>
<main>
<Header />
<section>
<Slot />
</section>
</main>
<footer>
<a href="https://www.builder.io/" target="_blank">
Made with ♡ by Builder.io
</a>
</footer>
</>
);
});Add the header and footer components before and after Content.
<View>
<MyHeader>
{content ? (
<Content
apiKey={BUILDER_API_KEY}
model="page"
content={content}
/>
) : (
<Text>Not Found.</Text>
)}
<MyFooter>
</View>In your template, place your header and footer components around the content fetched from Builder, as demonstrated in the following example:
+ <YourHeaderComponent></YourHeaderComponent>
<builder-content [model]="model" [content]="content" [apiKey]="apiKey">
</builder-content>
+ <YourFooterComponent></YourFooterComponent>In your template, place your header and footer components around the content fetched from Builder, as demonstrated in the following example:
+ <YourHeaderComponent></YourHeaderComponent>
<builder-content [model]="model" [content]="content" [apiKey]="apiKey">
</builder-content>
+ <YourFooterComponent></YourFooterComponent>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 MyHeader from '../components/my-header'
+ import MyFooter from '../components/my-footer'
export default function Page({ page }) {
...
return (
<>
<Head>
<title>{page?.data.title}</title>
</Head>
+ <MyHeader />
<BuilderComponent model="page" content={page} />
+ <MyFooter />
</>
);
}
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.
const pageHtml = pageData.data.html;
res.send(`
<html>
<head> <!-- Your head content here --> </head>
<body>
+ <header>...</header>
${pageHtml}
+ <footer>...</footer>
</body>
</html>
`);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.
...
+ import { MyHeaderComponent } from 'myHeader/my-header.component';
+ import { MyHeaderComponent } from 'myFooter/my-footer.component';
@NgModule({
declarations: [
AppComponent,
+ MyHeaderComponent,
+ MyFooterComponent
],
...
})
export class AppModule { }
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.
+ <app-my-header></app-my-header>
...
<div class="main">
<router-outlet></router-outlet>
</div>
+ <app-my-footer></app-my-footer>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.