GPT-Crawler/output.json

[
  {
    "title": "Make a Landing Page: Step 6 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-6",
    "html": "Make a Landing Page with Builder: Step 6\n\nThis step builds upon the previous video in this series, Make a Landing Page with Builder: Step 5, where you learn how to reuse styles and add copy on top of pictures. This section of the tutorial shows you how to do the following:\n\nView your page on a variety of screen sizes\nTweak styles by screen size\nPublish your page\nUse the page URL for sharing with teammates\n\nThe main video provides more explanation, but here's a 30-second video of the steps to test for mobile and publish.\n\nClick the Tablet icon and scroll through your page.\nTest using the Phone icon.\nMake any adjustments. For example, change the padding and font size of the large text quote for phone screens. Changes made while in Tablet or Phone view apply only to those size screens.\nTo publish, click the green Publish button at the top of the editor. The View Live Page option is now available.\nWhat's next\n\nNow that you've created a beautiful page and are familiar with the fundamentals of Builder, you're ready to dive deeper and learn about the features that can make building pages even faster:\n\nReusable Blocks: learn about the options for creating reusable elements in Builder that you can use across pages and Spaces.\n\nStart Building: find lots of tutorials for specific use cases and learn all about Builder's blocks."
  },
  {
    "title": "Make a Landing Page: Step 5 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-5",
    "html": "Make a Landing Page with Builder: Step 5\n\nThis step builds upon the previous video in this series, Make a Landing Page with Builder: Step 4, where you learn how to edit multiple columns at the same time. This section of the tutorial shows you how to do the following:\n\nSave time by using styles from existing elements\nAdd text on top of an image\nVertically center text on an image\nPreview the current draft\n\nThe video for this step in the series finalizes the page we're building. The following sections show the steps in written form.\n\nAdding header and columns\n\nHere we will copy a header, add another row of columns, and add photos.\n\nSelect the previous full-width header and right-click Copy.\nSelect the bottom Columns block and paste the header there.\nDrag a Columns block under the new header.\nAdd a photo to each column.\nAdding text over photos\n\nIn this video we will add centered text over the photos, use Copy Style, and preview our new page.\n\nHere are the steps:\n\nDrag the left-hand bottom Text block over the photo.\nOn the Style tab, change the font color and size, and click the Center Vertically icon.\nDrag the right-hand Text block onto its photo.\nSelect the left photo's Text block and right-click Copy Style.\nOn the right Text block, paste the style.\nClick the Preview eye at the top of the editor and choose View Current Draft to preview your page."
  },
  {
    "title": "Make a Landing Page: Step 4 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-4",
    "html": "Make a Landing Page with Builder: Step 4\n\nThis step builds upon the previous video in this series, Make a Landing Page with Builder: Step 3, where you learn how to create a row of images with copy beneath them.\n\nThis section shows you how to do the following:\n\nCreate full-width Columns that extend to the edge of the browser window\nUse margins and padding to add airy style\nHow to create a customer review pullquote\n\nThe video for this part of the tutorial covers some more CSS tweaks. The following sections and videos break them down into bite-sized chunks. For a good understanding of these CSS properties, make sure to watch the main video.\n\nAdding full-width columns\n\nTo achieve the layout in the main video, we need to start with columns that span the full width of the page. Then we'll add an image to one side and remove the image from the other leaving only text.\n\nHere are the steps:\n\nDrag a Columns block onto the editor.\nWith the Columns block selected, go to the Style tab and choose Width->Full Page Width.\nSelect the Image in the left column and delete it.\nAdd an Image to the right column as you've done before, using the Edit button.\nAdjusting padding on the Columns and Text blocks\n\nIn the main video, we added a background color on the Columns block, and then added padding where needed. Here are the steps:\n\nDelete the Text block in the right column.\nAdd text to the Text block in the left column and adjust the font size as needed.\nAdd a background color for the Columns block by selecting it and changing the background in the Style tab.\nWith the left Text block selected, change the right padding to 60px in the Style tab.\nWith the Columns block selected, change the top, left, and right padding to 40px. Change the bottom padding to 120px."
  },
  {
    "title": "Integrating Sections - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-section-building?_host=www.builder.io#integrating-sections",
    "html": "Integrating Sections\n\nYou can use Builder Sections to create reusable content across multiple pages. You can manage the code within your codebase, and teammates in the UI can iterate in the Visual Editor.\n\nExamples include:\n\nBlog Article\nHero Section\nAnnouncement Bar\nProduct Editorial\nHomepage\n\nThis tutorial shows you how to create and add an announcement bar section to a page.\n\nFor more conceptual information Section Models, refer to the Section Models documentation.\n\nPrerequisites\n\nTo follow along with this tutorial, you should have the following:\n\na Builder account\nan app in the framework of your choice with the appropriate Builder SDK installed\n\nTip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Page Building.\n\nAdd an announcement bar section to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nShopify\nREST API\n\nCreate a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:\n\nimport { useEffect, useState } from \"react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\n\n// Replace with your Public API Key.\nbuilder.init(YOUR_API_KEY);\n\nexport default function Page() {\n  const [announcement, setAnnouncement] = useState(null);\n\n  useEffect(() => {\n    builder\n      .get(\"announcement-bar\", {\n        userAttributes: {\n          // To allow targeting different announcements at different pages (URLs)\n          urlPath: window.location.pathname,\n        },\n      })\n      .toPromise()\n      .then((announcementBar) => setAnnouncement(announcementBar));\n  }, []);\n\n  return (\n    <>\n      {/* Put your header here. */}\n      <YourHeader />\n      {announcement && (\n        <BuilderComponent model=\"announcement-bar\" content={announcement} />\n      )}\n      {/* Put the rest of your page here. */}\n      <TheRestOfYourPage />\n    </>\n  );\n}\n\n\n\nSections are typically targeted using some information about the user's state.\n\nFor instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.\n\nAside from targeting, you can also query sections by custom fields.\n\nconst urlPath = '/' + (params?.page?.join('/') || '');\n\nconst announce = await builder\n    .get('announcement-bar', { userAttributes: { urlPath } })\n    .toPromise();\n\n\nThe announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.\n\nThe snippet below demonstrates how the page and the page's announcement bar are rendered.\n\nreturn (\n  <>\n    <!-- Put your header here -->\n    <YourHeader />\n    <BuilderComponent model=\"announcement-bar\" content={announce} />\n    <!-- The rest of your page -->\n    <TheRestOfYourPage />`\n  </>\n);\n\n\nBuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.\n\nYou can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.\n\nCheck out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.\n\nCreating a Section model\n\nCreate a Section model so you can make an announcement bar content entry.\n\nGo to Models.\nClick +Create Model.\nSelect Section.\nEnter Announcement bar as the name for your new Section model.\nClick Create.\nChange the Preview URL on the Model Options page to the URL of the page that you added code to display your section. This example uses /announcements, but yours might be different.\n\nThe video below demonstrates this process:\n\nDepending on the framework, the path and port can vary. Check your framework according to the below:\n\nFramework\tlocalhost URL\n\nAngular\n\n\t\n\nhttp://localhost:4200\n\n\n\n\nGatsby\n\n\t\n\nhttp://localhost:3000\n\n\n\n\nQwik\n\n\t\n\nhttp://localhost:5174\n\n\n\n\nRemix\n\n\t\n\nhttp://localhost:3000\n\nWhen you create or edit an announcement bar section, the Visual Editor displays your content embedded within your Preview URL page, providing visual context and importing styles from your site. It's a live view of your section, as it will look on one of your pages when you publish.\n\nTip: Published sections typically appear across multiple pages with different URLs depending on how they're targeted. When previewing in the editor, however, they only appear within the Preview URL's page. For more information, refer to Editing and Previewing Your Site.\n\nFor more information what Section Models are and how to use them, refer to the Section Models documentation.\n\nCreating an announcement bar content entry\n\nNow that your Section model is set up, you can create an announcement bar content entry to add an announcement bar to your site.\n\nGo to Content.\nClick the + New button and select Announcement bar.\nBuild and style your announcement bar.\nName the content entry.\nClick Publish.\n\nThe video below demonstrates this process:\n\nTargeting by URL path\n\nTo make your announcement bar display based on targeting, in the section content entry; for example, in the announcement bar:\n\nClick on the Targeting icon.\nFor Where, select URL path.\nAdd the URL path you'd like to target.\nClick the Publish button.\n\nThe video below shows this process in an integrated Remix app where the targeted URL path is /builder so that the announcement bar doesn't show up on any other URLs. This process is the same, regardless of the framework you use. The URL path you target, however, might differ.\n\nTip: If you're using Gatsby, you may need to restart your app to render the announcement bar.\n\nWhat's next\nNext\nQwik\nReact\nRemix\nHydrogen\nVue\nSvelte\nAngular\nREST API\n\nWith your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.\n\nUse your custom components in Builder\n\nTo use your own components in the Visual Editor, including replacing built-in blocks, see Integrating Custom Components.\n\nStart using custom components\n\nDeploy your updated app to a preview environment\n\nGive others a way to try the Visual Editor integrated with your site.\n\nDeploy to a preview env\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Make a Landing Page: Step 3 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-3",
    "html": "Make a Landing Page: Step 3\n\nThis step builds upon the second video in this series, Make a Landing Page with Builder: Step 2, where you learn how to create a row of images with copy beneath them.\n\nThis section shows you how to do the following:\n\nUse Columns as design elements\nStyle multiple elements at the same time\nCopy and paste styles\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nAdding a header and columns\n\nJust like you've done in previous steps, you can drag the Columns block onto the editor to add columns. Here we'll first add a full-width header by dragging a Text block, then drag the Columns block below it.\n\nSizing multiple images and changing margins\n\nBy selecting several images, you can change their height (and other properties) all at once.\n\nClick one image, then hold down the Shift key and click as many more elements as needed.\nDrag the larger circle under the photo up and down to get the height you want.\nWhile still selected, you can also change the left, right, top, and bottom margins on the images (space around the images).\n\nThis video shows the process.\n\nCopy-pasting styles\n\nThe video below shows how to duplicate a Text block. It then shows how to reuse a style.\n\nTo duplicate a Text block:\n\nFrom the arrow on the Edit button, select Duplicate.\nDrag the duplicated block wherever you want.\n\nTo copy a style and apply it to another block:\n\nCreate the style on one block; here it's a Text block. Then right-click the block and choose Copy Style.\nNext, click the new blocks you want to style. First click the initial one, then shift+click any additional ones.\nRight-click one of the selected blocks and click Paste Style from the context menu. All selected Text blocks are now styled.\n\nThe full video at the top of this page provides more tips, such as keyboard shortcuts and character spacing (kerning)."
  },
  {
    "title": "Make a Landing Page: Step 2 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-2?_host=www.builder.io#make-a-landing-page-step-2",
    "html": "Make a Landing Page: Step 2\n\nThis step builds upon the first video in this series, Make a Landing with Builder, where you learn how to create a hero image.\n\nThere are some assumptions in the video narrative that you've completed the previous video, but the next section of the page you're creating stands on its own and if you are comfortable with the basics in Builder, you could jump in here–just make sure you have a Builder account and a page ready to work in.\n\nThis section of the series shows you how to do the following:\n\nCreate a horizontal row of images\nAdd and edit copy for each image\nStyle the copy font, spacing, and color\nCreating a row of images\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nAdd columns and photos\n\nAdding columns with photos is easy, as you can see in the video above. Here are the steps:\n\nDrag the Columns block onto the editor where you'd like them to appear.\nClick on the Layers tab and Columns to be sure you've selected your columns.\nChoose Edit and then add more columns by clicking +Column for as many columns as you'd like.\nClick the middle of a column to select the inside Image block. Click Edit and then Choose Photo. Do this for each column.\nAdd text under photo headers\n\nThe Columns block comes with an Image block and a Text block below it for each column. You can add more lines of text below. Here's how:\n\nFrom the Insert tab, drag a Text block under the existing text. Be sure to watch for the short blue underline indicating you're inside a column. Do this for each column. If you prefer, you can click Duplicate from the Text block dropdown menu under which you want to add more text.\nGo back and style the headings and text by clicking on each, adjusting their font size and margins. The long video at the top of this page presents some more tricks.\n\nThe final section in the main video simply adds three columns below the five already created. The steps are the same:\n\nDrag the Columns block\nAdd another column to make three\nAdd photos\nAdd more lines of text below, this time using Duplicate to copy the existing Text block\nStyle the text"
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?codeFramework=vue&_host=www.builder.io#builder-blueprints",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "Importing existing Shopify pages - Builder.io",
    "url": "https://www.builder.io/c/docs/importing-existing-shopify-pages",
    "html": "Importing existing Shopify pages\n\nThis guide will walk through how to add Builder content to your existing Shopify pages.\n\nTheme Pages and Elements\n\nTo import an existing Shopify page template (e.g. product pages, collection pages) into Builder Theme Studio, navigate to the Studio tab, select the theme page you want to import, and click +Create\n\nIn the first modal, select Add an editable section to my page\n\nNext, select whether you want this editable section created at the top, bottom, or within your existing content\n\nIf you choose to add the section at the top or bottom, your current template will be pulled into Builder Theme Studio as a Shopify section and you can add new content above or below your Shopify section such as product carousels, text, and more.\n\n\n\n\nIf you choose to add your editable section inside of your existing page, we will walk you through the additional steps to create this custom section.\n\nNext up\n\nTheme Studio for developers"
  },
  {
    "title": "Builder Support - Builder.io",
    "url": "https://www.builder.io/c/docs/help-and-support?_host=www.builder.io#getting-help",
    "html": "Getting Help\n\nWe're here to help empower our customers and make Builder the best product possible. If you have any questions or concerns, we provide a variety of channels to communicate directly with our team.\n\nOnline resources\n\nFor general how-to questions, the documentation is a great resource. For specific or nuanced questions, refer to the Builder forum.\n\nDocumentation\n\nBuilder documentation is extensive and constantly evolving. There are two main sections of the documentation with step-by-step guides:\n\nPopular Tutorials: A starting point for the most requested docs for using the Builder UI and Visual Editor.\nDeveloping with Builder: A collection of docs especially for developers.\n\nBuilder Forum\n\nThe Builder Forum discussions are a great way to connect with others, including the Builder team. Open to all plans, the Builder Forum is perfect for getting others' thoughts.\n\nContacting us\n\nThe Builder in-app help widget is the best way to get help.\n\nIf you're on a paid plan, you can generate a ticket through the widget:\n\nClick on the question mark icon at the bottom right of the Builder app.\nSelect Submit a Ticket.\nFill out the form that opens and click Send.\n\nWith this process, your help request generates a ticket, which enters the Builder support queue. When you submit a ticket through the in-app widget, you'll receive a confirmation email from Zendesk, and a team member will get in touch with you as soon as possible.\n\nYou can also always email us at support@builder.io.\n\nInformation to include\n\nWhether you're posting to the forum, emailing us, or submitting a ticket, the more information you provide, the better. Some suggestions of things to include in your message are:\n\nDescription of the question or issue you have\nLink to the relevant Builder page\nAny error messages related to your issue\nDescription of your steps in trying to resolve the issue\nAttachments of screenshots or videos, if available\nTypes of support Builder provides\nFree trial customers\n\nWhile on our 30-day free trial, you have access to Growth features, including our ticket widget and email support.\n\nFree subscription plan customers\n\nStandard (free) users can often receive help by posting in the Builder Forum. Builder also offers extensive documentation that might help you answer your questions. Upgrade to a paid plan to get access to our ticket widget and email support.\n\nBasic & Growth subscription plan customers\n\nIn addition to the forum, customers on our Basic and Growth plans can get in touch with Builder support using the ticket widget within the application or by emailing us at support@builder.io. Support is available 24 hours Monday through Friday, GMT time.\n\nGrowth customers have priority over Basic customers in the queueing system.\n\nWhile we try to help answer your questions as soon as possible, we cannot provide any code or styling support via the ticket widget or over email. If you need this type of assistance, please post in the forum.\n\nNote: We do not offer video/phone support and cannot guarantee response or resolutions times unless you are an Enterprise customer.\n\nEnterprise customers\n\nWe provide premium support to Enterprise customers, which includes:\n\nTicket queue priority\nSLA response times\nDedicated support through a Customer Success Manager\nDedicated support through a Customer Engineer\n\nImportant: SLA accountability requires that all support tickets be submitted through the in-app help widget or by email at support@builder.io.\n\nIf you're interested in learning more about Builder's Enterprise offerings, contact us."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?codeFramework=react&_host=www.builder.io#builder-blueprints",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "Integrating Sections - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-section-building?_host=www.builder.io",
    "html": "Integrating Sections\n\nYou can use Builder Sections to create reusable content across multiple pages. You can manage the code within your codebase, and teammates in the UI can iterate in the Visual Editor.\n\nExamples include:\n\nBlog Article\nHero Section\nAnnouncement Bar\nProduct Editorial\nHomepage\n\nThis tutorial shows you how to create and add an announcement bar section to a page.\n\nFor more conceptual information Section Models, refer to the Section Models documentation.\n\nPrerequisites\n\nTo follow along with this tutorial, you should have the following:\n\na Builder account\nan app in the framework of your choice with the appropriate Builder SDK installed\n\nTip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Page Building.\n\nAdd an announcement bar section to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nShopify\nREST API\n\nCreate a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:\n\nimport { useEffect, useState } from \"react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\n\n// Replace with your Public API Key.\nbuilder.init(YOUR_API_KEY);\n\nexport default function Page() {\n  const [announcement, setAnnouncement] = useState(null);\n\n  useEffect(() => {\n    builder\n      .get(\"announcement-bar\", {\n        userAttributes: {\n          // To allow targeting different announcements at different pages (URLs)\n          urlPath: window.location.pathname,\n        },\n      })\n      .toPromise()\n      .then((announcementBar) => setAnnouncement(announcementBar));\n  }, []);\n\n  return (\n    <>\n      {/* Put your header here. */}\n      <YourHeader />\n      {announcement && (\n        <BuilderComponent model=\"announcement-bar\" content={announcement} />\n      )}\n      {/* Put the rest of your page here. */}\n      <TheRestOfYourPage />\n    </>\n  );\n}\n\n\n\nSections are typically targeted using some information about the user's state.\n\nFor instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.\n\nAside from targeting, you can also query sections by custom fields.\n\nconst urlPath = '/' + (params?.page?.join('/') || '');\n\nconst announce = await builder\n    .get('announcement-bar', { userAttributes: { urlPath } })\n    .toPromise();\n\n\nThe announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.\n\nThe snippet below demonstrates how the page and the page's announcement bar are rendered.\n\nreturn (\n  <>\n    <!-- Put your header here -->\n    <YourHeader />\n    <BuilderComponent model=\"announcement-bar\" content={announce} />\n    <!-- The rest of your page -->\n    <TheRestOfYourPage />`\n  </>\n);\n\n\nBuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.\n\nYou can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.\n\nCheck out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.\n\nCreating a Section model\n\nCreate a Section model so you can make an announcement bar content entry.\n\nGo to Models.\nClick +Create Model.\nSelect Section.\nEnter Announcement bar as the name for your new Section model.\nClick Create.\nChange the Preview URL on the Model Options page to the URL of the page that you added code to display your section. This example uses /announcements, but yours might be different.\n\nThe video below demonstrates this process:\n\nDepending on the framework, the path and port can vary. Check your framework according to the below:\n\nFramework\tlocalhost URL\n\nAngular\n\n\t\n\nhttp://localhost:4200\n\n\n\n\nGatsby\n\n\t\n\nhttp://localhost:3000\n\n\n\n\nQwik\n\n\t\n\nhttp://localhost:5174\n\n\n\n\nRemix\n\n\t\n\nhttp://localhost:3000\n\nWhen you create or edit an announcement bar section, the Visual Editor displays your content embedded within your Preview URL page, providing visual context and importing styles from your site. It's a live view of your section, as it will look on one of your pages when you publish.\n\nTip: Published sections typically appear across multiple pages with different URLs depending on how they're targeted. When previewing in the editor, however, they only appear within the Preview URL's page. For more information, refer to Editing and Previewing Your Site.\n\nFor more information what Section Models are and how to use them, refer to the Section Models documentation.\n\nCreating an announcement bar content entry\n\nNow that your Section model is set up, you can create an announcement bar content entry to add an announcement bar to your site.\n\nGo to Content.\nClick the + New button and select Announcement bar.\nBuild and style your announcement bar.\nName the content entry.\nClick Publish.\n\nThe video below demonstrates this process:\n\nTargeting by URL path\n\nTo make your announcement bar display based on targeting, in the section content entry; for example, in the announcement bar:\n\nClick on the Targeting icon.\nFor Where, select URL path.\nAdd the URL path you'd like to target.\nClick the Publish button.\n\nThe video below shows this process in an integrated Remix app where the targeted URL path is /builder so that the announcement bar doesn't show up on any other URLs. This process is the same, regardless of the framework you use. The URL path you target, however, might differ.\n\nTip: If you're using Gatsby, you may need to restart your app to render the announcement bar.\n\nWhat's next\nNext\nQwik\nReact\nRemix\nHydrogen\nVue\nSvelte\nAngular\nREST API\n\nWith your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.\n\nUse your custom components in Builder\n\nTo use your own components in the Visual Editor, including replacing built-in blocks, see Integrating Custom Components.\n\nStart using custom components\n\nDeploy your updated app to a preview environment\n\nGive others a way to try the Visual Editor integrated with your site.\n\nDeploy to a preview env\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Settings - Builder.io",
    "url": "https://www.builder.io/c/docs/settings?_host=www.builder.io#settings",
    "html": "Settings\n\nThere two levels of Settings, Organization and Space. By changing settings at the appropriate level, you can manage many settings for your Organization and for individual Spaces.\n\nThis document covers how to get to Organization and Space Settings, and includes links to related documentation on the many features available in Settings.\n\nOrganization Settings\n\nThe Settings section of your Builder account is where you manage your Organization, your Space(s), and users.\n\nTo get to your Organization Settings:\n\nLogin to Builder.\nEnter your Organization.\nClick on the Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Organization is named Enterprise Docs demos, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Organization will likely be different. However, getting to your Organization Settings is the same, regardless of plan.\n\nFor more information, read the following documents.\n\nUnderstanding Organizations: a conceptual overview of what an Organization is.\nManaging Your Organization: a how-to guide for the most common Organization tasks.\nSpace Settings\n\nTo get to your Space Settings:\n\nLogin to Builder.\nEnter the Space you'd like to manage.\nClick on the Account Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Space is named My Favorite Space, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Space will likely be different. However, getting to your Space Settings is the same, regardless of plan.\n\nFor more information, read the following documentation.\n\nUnderstanding Spaces: a conceptual overview of what a Space is.\nManaging Spaces: a how-to guide for the most common Space tasks.\nLogging out of your account\n\nTo log out of your Builder account:\n\nGo to Space Settings or your Organization Settings (either one works).\nClick on the cog icon at the upper right.\nSelect Log Out.\n\nThe following image shows where the Log Out option is in Settings:\n\nWhat's next\n\nThrough Account Settings, you can manage many settings, and finetune Builder features for your team, including:\n\nOrganization\nSpaces\nUsers for your organization as well as your Space(s)\nRoles and Permissions\nPublic and Private API Keys\nSubscription\nBilling\nTargeting Attributes\nSocial Media integrations\nEnvironments"
  },
  {
    "title": "Make a Landing Page: Step 2 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-2?_host=www.builder.io",
    "html": "Make a Landing Page: Step 2\n\nThis step builds upon the first video in this series, Make a Landing with Builder, where you learn how to create a hero image.\n\nThere are some assumptions in the video narrative that you've completed the previous video, but the next section of the page you're creating stands on its own and if you are comfortable with the basics in Builder, you could jump in here–just make sure you have a Builder account and a page ready to work in.\n\nThis section of the series shows you how to do the following:\n\nCreate a horizontal row of images\nAdd and edit copy for each image\nStyle the copy font, spacing, and color\nCreating a row of images\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nAdd columns and photos\n\nAdding columns with photos is easy, as you can see in the video above. Here are the steps:\n\nDrag the Columns block onto the editor where you'd like them to appear.\nClick on the Layers tab and Columns to be sure you've selected your columns.\nChoose Edit and then add more columns by clicking +Column for as many columns as you'd like.\nClick the middle of a column to select the inside Image block. Click Edit and then Choose Photo. Do this for each column.\nAdd text under photo headers\n\nThe Columns block comes with an Image block and a Text block below it for each column. You can add more lines of text below. Here's how:\n\nFrom the Insert tab, drag a Text block under the existing text. Be sure to watch for the short blue underline indicating you're inside a column. Do this for each column. If you prefer, you can click Duplicate from the Text block dropdown menu under which you want to add more text.\nGo back and style the headings and text by clicking on each, adjusting their font size and margins. The long video at the top of this page presents some more tricks.\n\nThe final section in the main video simply adds three columns below the five already created. The steps are the same:\n\nDrag the Columns block\nAdd another column to make three\nAdd photos\nAdd more lines of text below, this time using Duplicate to copy the existing Text block\nStyle the text"
  },
  {
    "title": "Localization of Individual Blocks - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-by-block?_host=www.builder.io#localizing-blocks",
    "html": "Localizing Blocks\n\ngrowth plans\n\nIn the Builder Visual Editor, you can configure individual blocks to deliver content specific to language and region preferences.\n\nFor example, if you wanted to differentiate copy or images for a visitor in Germany or a visitor in Mexico, you could adjust a few settings on the block and add locale-specific content in the block's localization settings.\n\nYou can individually localize many blocks, including the following, in the Visual Editor:\n\nText\nImages\nColors\nSymbol inputs\n\nThe process is the same for each in that you hover over the label in the Edit dialogue to show the Localize icon, click the icon, and add content to each locale.\n\nPrerequisites\n\nTo successfully use localization in Builder, make sure you've already done the following:\n\nAdded locales in Builder.\nIntegrated Builder localization with your code.\n\nThe last part of setting up localization is to integrate. For instructions, continue to Integrating Builder Localization with your code.\n\nConfiguring a single block for localization\nDouble click the block to open the Edit dialogue.\nHover over the label of the block; for example, the label Text in a Text edit dialogue, and click the Localize icon.\nIn the locale dropdown, choose the locale you'd like to edit. As a best practice, always set a value for the Default locale in case none of the other locales are in the user's settings.\nEnter content per locale.\n\nThe following video demonstrates adding localized content with two examples:\n\nA Text block\nAn Image block\n\nThis video also shows how to select the locale for the entire content entry, which you can do by selecting the local at the top of the work area.\n\nTip: If you don't have any locales, click the link to Add a new locale, which displays when you hover over the locales dropdown. You can also add multiple locales in a single dialogue as outlined in Adding locales in Account settings.\n\nTargeting and block localization\n\nTo customize content for specific groups of people within your different language options, you can use targeting, and within this targeted content, you can localize inputs or fields.\n\nTo use this feature:\n\nPass the locale property to the BuilderComponent when integrating Builder into your app. This ensures that the content in the Visual Editor is localized based on the specified locale.\nWhen making an API call to retrieve the content, include the locale parameter, and pass the current locale value. This makes sure that the content returned from the API call is specific to the desired locale.\n\nThis streamlined process makes the localization workflow more direct, helping you efficiently manage localized content within the Builder environment, without the need for additional data connections.\n\nconst Page = await builder.get(page, {\n  options: { locale }, // Pass the locale property to the options object\n  userAttributes: {\n    urlPath: `/about`, \n    locale, // Pass the locale property to the userAttributes object\n  },\n}).toPromise();\n\n\n\nTo enable field localization, explicitly mark them as localized in the model settings. This ensures that the content within those fields can be customized based on different languages or regions.\n\nAdditionally, you can localize inputs by clicking on the globe icon within the Edit dialogue. This way you can provide localized values for inputs such as text or images.\n\nBy default, all inputs can be localized unless you specifically set the localized property to false when registering your custom component. This gives you flexibility in deciding which inputs can be localized and which ones should remain static across different locales.\n\nRemoving block-level localization\n\nTo remove localization from a selected block:\n\nOpen the Edit dialogue for the block. Do this by double-clicking the block or selecting the block and clicking the Edit button.\nThis step removes the localized content. Hover over the dialogue label and click on the Localize icon.\n\nBy toggling off localization for a block, the localization dropdown no longer displays, and the content is removed. The following video demonstrates this process."
  },
  {
    "title": "Using Klaviyo with Builder - Builder.io",
    "url": "https://www.builder.io/c/docs/klaviyo-app-template",
    "html": "Using Klaviyo with Builder\n\nKlaviyo is a marketing service that allows e-commerce business owners to collect and utilize customer-submitted data for email and SMS campaigns. Builder.io offers form templates that make it easy to integrate an existing form with any Builder project.\n\nPrerequisites\n\nBefore you get started, you will need:\n\nAn existing form in Klaviyo that is published and ready for submissions. If you're logged in to Klaviyo, the following link will Create a form automatically.\nA Builder project with a Page or Section model that is ready for content to be placed.\nChoose the right template\n\nBuilder provides two templates for Klaviyo forms:\n\nGeneric Embed: You have already designed your form with Klaviyo's Form Builder and you're ready to place it on your page. This type is ideal if you don't want to edit the form's design in Builder.\nNative Embed: You would like to design your form inside Builder's Visual Editor. This option gives you more control over your design and is faster to load.\nUsing the Klaviyo Generic Embed\n\nFrom the Insert tab, under the Import from section, select Apps.\n\nSelect the Klaviyo Generic Embed.\n\nDrop the app template anywhere on the page.\n\nNavigate to the Options tab to add the Company ID, also known as the Public API key, and your Form ID.\n\nThe following screenshot shows the Options for the Klaviyo block.\n\nTo find your Form ID, go to https://www.klaviyo.com/forms and select the Embedded Form. The Form ID is the alphanumeric string at the end of the URL in the address bar, for example LJgRxQ in https://www.klaviyo.com/forms/LJgRxQ .\n\nTo find your 6-character Company ID/Public API key, go to the Accounts > Settings > API Keys tab in your Klaviyo account.\n\nNext, refresh the Builder Visual Editor to see your form. You can click the circular arrow next to your project's URL at the top of the Visual Editor, or you can refresh the whole browser page.\n\nNative Embed"
  },
  {
    "title": "Scheduling Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/scheduling-symbols?_host=www.builder.io#scheduling-symbols",
    "html": "Scheduling Symbols\n\nWhen you need a reusable Block but want it to publish only under certain circumstances, create a Dynamic Symbol. This article walks you through how to set up a hero image on your site that you want to switch according to a schedule.\n\nThe following four images are examples of season-specific heroes that you can schedule to display at the appropriate times in Builder–one each for summer, fall, winter, and spring.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols. You should have the following:\n\nAt least two Symbols to work with\n\nIf you're new to Symbols, check out the following articles first:\n\nReusing Blocks: get to know all the options.\nIntroduction to Symbols: learn about what Symbols can do for you.\nHow to make a Symbol: follow a quick tutorial to make basic reusable blocks.\nCreate a custom Model\n\n👉Tip: If you already have a custom model, you can skip to the next section.\n\nGo to the Models section.\n\nSelect the +Create Model button.\n\nChoose Section.\n\nName your new Model and select the Create button. In this example, the name is Homepage Hero, but you can name it anything that works for your project.\n\nIn the Symbols: picking dates\n\nOpen the first Symbol and select the beginning date and time for when you want the Symbol to appear on your site. To get the date picker, click on the calendar icon.\n\nSelect the end date and time for the Symbol.\n\nSelect the Publish (Scheduled) Update button (not pictured).\n\nRepeat the scheduling process for any other Symbols that need scheduling.\n\nWhen you've scheduled your Symbols, you'll see their dates in the list in the Content area of Builder.\n\nIn the Page: using Dynamic Symbols\n\nIn the Page where the Symbol should appear, go to the Insert tab and select the Show More button.\n\nDrag and drop a Symbol Block onto the page.\n\nSelect the Edit button.\n\nIn the Model dropdown, select your Model. Here it's Homepage hero, the custom Model we made in the beginning of this article.\n\nLeave Entry blank.\n\nToggle Dynamic to the On position.\n\nMaking sure the right Symbol shows\n\nTo have a default Symbol, publish one Symbol with no dates associated and drag it to the bottom of the group of Symbols you're scheduling.\n\nIn this example, there are four scheduled Symbols and one backup, just in case there's a gap in the dates."
  },
  {
    "title": "Builder Support - Builder.io",
    "url": "https://www.builder.io/c/docs/help-and-support?_host=www.builder.io",
    "html": "Getting Help\n\nWe're here to help empower our customers and make Builder the best product possible. If you have any questions or concerns, we provide a variety of channels to communicate directly with our team.\n\nOnline resources\n\nFor general how-to questions, the documentation is a great resource. For specific or nuanced questions, refer to the Builder forum.\n\nDocumentation\n\nBuilder documentation is extensive and constantly evolving. There are two main sections of the documentation with step-by-step guides:\n\nPopular Tutorials: A starting point for the most requested docs for using the Builder UI and Visual Editor.\nDeveloping with Builder: A collection of docs especially for developers.\n\nBuilder Forum\n\nThe Builder Forum discussions are a great way to connect with others, including the Builder team. Open to all plans, the Builder Forum is perfect for getting others' thoughts.\n\nContacting us\n\nThe Builder in-app help widget is the best way to get help.\n\nIf you're on a paid plan, you can generate a ticket through the widget:\n\nClick on the question mark icon at the bottom right of the Builder app.\nSelect Submit a Ticket.\nFill out the form that opens and click Send.\n\nWith this process, your help request generates a ticket, which enters the Builder support queue. When you submit a ticket through the in-app widget, you'll receive a confirmation email from Zendesk, and a team member will get in touch with you as soon as possible.\n\nYou can also always email us at support@builder.io.\n\nInformation to include\n\nWhether you're posting to the forum, emailing us, or submitting a ticket, the more information you provide, the better. Some suggestions of things to include in your message are:\n\nDescription of the question or issue you have\nLink to the relevant Builder page\nAny error messages related to your issue\nDescription of your steps in trying to resolve the issue\nAttachments of screenshots or videos, if available\nTypes of support Builder provides\nFree trial customers\n\nWhile on our 30-day free trial, you have access to Growth features, including our ticket widget and email support.\n\nFree subscription plan customers\n\nStandard (free) users can often receive help by posting in the Builder Forum. Builder also offers extensive documentation that might help you answer your questions. Upgrade to a paid plan to get access to our ticket widget and email support.\n\nBasic & Growth subscription plan customers\n\nIn addition to the forum, customers on our Basic and Growth plans can get in touch with Builder support using the ticket widget within the application or by emailing us at support@builder.io. Support is available 24 hours Monday through Friday, GMT time.\n\nGrowth customers have priority over Basic customers in the queueing system.\n\nWhile we try to help answer your questions as soon as possible, we cannot provide any code or styling support via the ticket widget or over email. If you need this type of assistance, please post in the forum.\n\nNote: We do not offer video/phone support and cannot guarantee response or resolutions times unless you are an Enterprise customer.\n\nEnterprise customers\n\nWe provide premium support to Enterprise customers, which includes:\n\nTicket queue priority\nSLA response times\nDedicated support through a Customer Success Manager\nDedicated support through a Customer Engineer\n\nImportant: SLA accountability requires that all support tickets be submitted through the in-app help widget or by email at support@builder.io.\n\nIf you're interested in learning more about Builder's Enterprise offerings, contact us."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?codeFramework=vue&_host=www.builder.io",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?codeFramework=react&_host=www.builder.io",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "How to integrate Nosto product recommendations with Builder Theme Studio - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-product-recommendations",
    "html": "Integrating Nosto Product Recommendations\n\nshopify app\n\nNosto is a popular 3rd party app that helps drive more revenue with personalized product recommendations. While this guide will walk you through how to add Nosto to your Builder product pages, you can follow these same steps to integrate other apps to your pages too!\n\nStart by creating a component model that we'll use on our product pages. Head over to builder.io/models, select +Create model and choose component. Then give your component a name, such as \"product recommendations.\"\n\nThen, let’s give this an editing URL. This is what Builder will open in the Visual Editor to edit your product recommendations, so this just needs to be any URL this Builder component will display on. In our case, since this component will be on all product pages, we'll use the url https://our-site.com/products/some-product.\n\nCopy the code snippet that starts with {% include 'model...} and head over to your Shopify admin page.\n\nOn the left nav bar in Shopify, click your Online Store and select Themes. In your online store theme, under Actions, click Edit Code.\n\nThis will open up all the liquid template code for your Shopify theme. Because we want these recommendations to be available in our product pages, navigate to the templates/product.liquid page and paste the code snippet in the section. Where you paste the snippet will determine where the recommendations are placed on your page. Let's put it at the bottom of our product page. To do that, we'll paste the code at the very bottom and click save.\n\nNow, let's create our promotion. Head back to builder.io/content and choose +New entry and choose “product recommendations.”\n\nHere should see your site in the preview with a big +add block at the bottom.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Using custom dropzones to create a product promotion in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/product-promotion-with-dropzones",
    "html": "Using Custom Sections to Create a Product Promotion\n\nshopify app\n\nIn this tutorial, we're going to walk you through how to:\n\ncreate a custom section in Builder\nadd the section to your Shopify liquid code\ntarget the promotion on specific pages\n\nLet's start by creating a section model that we'll use on select Builder pages to promote a sale on womenswear.\n\nHead over to builder.io/models, select “+Create model” and choose “section.”\n\nGive your section a name, such as “product page promotion.\"\n\nThen, let’s give this an editing URL. This is what Builder will open in the Visual Editor to edit your promotion, so this just needs to be any URL this Builder section will display on. In our case, since this section will be on womenswear product pages, we'll use the url https://our-site.com/products/the-cashmere-crew.\n\nCopy the code snippet that starts with {% include 'model... and head over to your Shopify admin page.\n\nOn the left nav bar in Shopify, click your Online Store and select Themes. In your online store theme, under Actions, click Edit Code. \n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Deploying to a Preview Enviornment - Builder.io",
    "url": "https://www.builder.io/c/docs/deploy-preview",
    "html": "Deploying to a Preview Environment\n\nAn important step after integrating your app with Builder is to deploy your updated app somewhere that others can access your updates at a public-facing URL.\n\nThis could be your production environment, such as your-site.com, but often developers set up a preview environment first.\n\nThis might be a preview link with services like Vercel or Netlify, such as your-branch-namne.vercel.app, or it could be a custom setup, such as a staging.your-site.com\n\nTip: Builder is not a hosting platform. You deploy your code to your own platform the same way you always do, and we send content to it over APIs.\n\nThe Visual Editor uses a preview URL connected to your hosted environment.\n\nTo allow other team members to use Builder's Visual Editor with your integration:\n\nYour code must be somewhere other than localhost.\nYou must update your preview URL to be the URL that you deployed your updated code.\nAdd your team members to the same Builder space so they can create content.\n\nWhen you are ready, deploy your updated code to production and update your preview URL to be your production URL."
  },
  {
    "title": "Start Building - Builder.io",
    "url": "https://www.builder.io/c/docs/start-building?_host=www.builder.io",
    "html": "LET'S BUILD TOGETHER\n\nPopular Tutorials\n\nThe documentation within Building Content features the Builder Visual Editor, an intuitive drag-and-drop editor where you can quickly build pages, sections, and leverage your data.\n\nFEATURED GUIDES\n\nMake a Landing Page\n\nBecome a Responsive Design Pro\n\nBuilder for Shopify\n\nLearn about Blocks\n\nTour the Visual Editor\n\nReuse Blocks to Work Smarter\n\nPOPULAR VIDEO TUTORIALS\n\nThe following collection of how-to videos walks you step-by-step through some of our customers' most requested project types.\n\nHow to Create a Page\n\nCreate a page. Perfect if youʻre new to Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: < 1 minute\n\nHow to Make a Hero Block\n\nCreate a full-width image that features a button and copy.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 3 minutes\n\nHow to Batch Upload Images\n\nUpload multiple pictures at a time into Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1 minute\n\nHow to Make a Multi-column Section\n\nCreate a section with multiple images in columns that sit side-by-side at larger screen widths and stack on smaller screens.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2 minutes\n\nCreate a Full-width Two Column Section\n\nCreate a section that spans the whole viewport with a pull quote on one side and an image on the other.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 4 minutes\n\nHow to Make an Announcement Bar\n\nCreate a bar that spans the whole viewport with an announcement.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1.5 minutes\n\nHow to Make a Full-Width Carousel\n\nCreate a section with multiple images that you can scroll through horizontally.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2.5 minutes\n\nHow to Make a Footer\n\nCreate a footer that spans the viewport, contains a logo, and columns of links. These guidelines meet most use cases.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 10 minutes\n\nHow to Make a Footer Symbol\n\nCreate a footer Symbol with customizable inputs. If youʻre new to Symbols, be sure to check out Reusing Blocks first.\n\nSkill set: Advanced\n\nArea: UI only\n\nLength: 5 minutes\n\nCreate a Section with a Changeable Background\n\nMake a section with a background that changes when you hover over certain configured areas. Includes:\n\ninteractive example, also known as a fiddle\na preview so you can see the end result\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 17.5 minutes\n\nHow to Make a Grid Layout\n\nCreate a responsive grid layout with techniques that you can adapt to different designs.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 10 minutes\n\nMixing Content from Different Models\n\nLearn how to embed a section that displays data model content inside of a Next.js page. Includes:\n\nOverview of the video's contents\nNext.js and Shopify starter with Shopify plugin setup instructions\nCode for this tutorial\nLive demo\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 33 minutes\n\nBuild a Page with Templates\n\nUsing a pre-built Template, you can create your first Builder page quickly. Follow this tutorial to create your page in four steps. Then, have fun customizing your page.\n\nSkill set: Basic\n\nArea: UI only\n\nVideo coming soon\n\nGet Up and Running with the Visual Editor\n\nLearn your way around the Visual Editor by creating a page, using blocks, and styling your creation in this in-depth half-hour tutorial.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 29 minutes\n\nCreate a Site Theme\n\nChange site colors instantly with Data models that feature color pickers. Teammates can iterate on color palettes and make as many as they need.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 3 minutes\n\nSet Up Server-side Redirects with Next.js\n\nUse a Builder Data model with your Next.js app to redirect site traffic from one URL to another.\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 2 mins\n\nSet Up and Use Product Data\n\nUse a Builder Data model to create Product Data and use that Data in the Visual Editor with data binding.\n\nSkill set: Intermediate\n\nArea: UI\n\nLength: 4 mins\n\nMake a Landing Page Series\n\nFollow this six-step tutorial to make a responsive landing page.\n\nSkill set: Basic\n\nArea: UI\n\nLength: Six 5-minute videos\n\nCreate a Countdown Timer Hero\n\nUse a built-in Builder template or custom code to create a countdown hero.\n\nSkill set: Basic OR familiar with code\n\nArea: UI or code\n\nLength: 21 sec for built-in template."
  },
  {
    "title": "Settings - Builder.io",
    "url": "https://www.builder.io/c/docs/settings?_host=www.builder.io#bandwidth",
    "html": "Settings\n\nThere two levels of Settings, Organization and Space. By changing settings at the appropriate level, you can manage many settings for your Organization and for individual Spaces.\n\nThis document covers how to get to Organization and Space Settings, and includes links to related documentation on the many features available in Settings.\n\nOrganization Settings\n\nThe Settings section of your Builder account is where you manage your Organization, your Space(s), and users.\n\nTo get to your Organization Settings:\n\nLogin to Builder.\nEnter your Organization.\nClick on the Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Organization is named Enterprise Docs demos, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Organization will likely be different. However, getting to your Organization Settings is the same, regardless of plan.\n\nFor more information, read the following documents.\n\nUnderstanding Organizations: a conceptual overview of what an Organization is.\nManaging Your Organization: a how-to guide for the most common Organization tasks.\nSpace Settings\n\nTo get to your Space Settings:\n\nLogin to Builder.\nEnter the Space you'd like to manage.\nClick on the Account Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Space is named My Favorite Space, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Space will likely be different. However, getting to your Space Settings is the same, regardless of plan.\n\nFor more information, read the following documentation.\n\nUnderstanding Spaces: a conceptual overview of what a Space is.\nManaging Spaces: a how-to guide for the most common Space tasks.\nLogging out of your account\n\nTo log out of your Builder account:\n\nGo to Space Settings or your Organization Settings (either one works).\nClick on the cog icon at the upper right.\nSelect Log Out.\n\nThe following image shows where the Log Out option is in Settings:\n\nWhat's next\n\nThrough Account Settings, you can manage many settings, and finetune Builder features for your team, including:\n\nOrganization\nSpaces\nUsers for your organization as well as your Space(s)\nRoles and Permissions\nPublic and Private API Keys\nSubscription\nBilling\nTargeting Attributes\nSocial Media integrations\nEnvironments"
  },
  {
    "title": "How to build a landing page in less than 5 minutes in Theme Studio for Shopify - Builder.io",
    "url": "https://www.builder.io/c/docs/how-to-ab-test-changes-to-your-homepage",
    "html": "A/B Testing Changes to Your Homepage\n\nshopify app\n\nTheme Studio includes powerful tools to help you build a great e-commerce website. One of those tools is A/B testing, an effective technique to optimize your site and drive more conversions. A/B testing is the process of showing different variations of a page to different visitors of your website, and then using data on what those customers did to determine what content drives more sales.\n\nIn this guide, we'll show you how to create and run an A/B test on your homepage. So if you are wondering: \"How do I create a new homepage in builder and then test that against my current homepage?,\" you are in the right place! Although the example we are using utilizes a section on the homepage, these techniques can be applied to any of the other page types in your store. Let's dive in.\n\nStarting in theme studio, click on Homepage and select +Create. Select Add an editable section to my homepage to to create a new version of the homepage.\n\nNext we'll select the area in which we want to add our editable section. In this example, I'm going to choose to add the section to the top of my homepage.\n\nFrom here, it'll take us directly into the Builder Visual Editor where we can start adding our test.\n\nAt this point we can decide to keep our current homepage exactly the same and test it against a new variation we build in Builder, or add something to our page (like an image) and test some variations of that content. The steps required to A/B test in either of these scenarios are essentially the same. If wanted to keep our homepage the same and test a completely new version against it, we can skip adding any content and go straight to creating the A/B test.\n\nFor the sake of this tutorial, let's pretend we just started selling a new product and we want to find out what sort of imagery works best to get people interested in buying it. In order to figure this out, we are going to build a section at the top of the homepage to announce the product. We have a hypothesis that the right image will consistently drive more conversions, but we do not know what image is best just yet. Luckily, with Builder's built in A/B testing, we can find out.\n\nStart by adding an image at the top of the page, followed by an announcement that sits on top of the image. To do this, drag an image component over into the dropzone in the editor, and select or upload an image. Next, drag over a text block on top of the image. We can easily make some style tweaks as we go along using the Style tab in the menu to the left. Finally, let's also add a button that people can click to lead them to the product page.\n\nThe next step is to create an A/B test variation. To do that, click on the A/B Tests tab right above the preview in the Builder editor. Once in that tab, click on \"Add A/B test variation.\" Once you click on that, the new content is created and we can start making changes! Notice that in that tab we are also able to choose the percentage of new visitors that see a particular variation using the sliders.\n\nNow let's go back and edit our variation to include the alternate image. Click on the Edit tab to go back to the editor and then click edit on the image block to upload a new image. If you also wanted to modify the text, or button, or anything else on the page that you think will help drive conversions, you could do that now too.\n\nOnce we have made all the changes we want, we can toggle between the different versions of our page by clicking the dropdown located by \"Targeting\" at the very top of the editor. This is a quick way to flip between the variations we have to make sure they are looking correct.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Working with Videos - Builder.io",
    "url": "https://www.builder.io/c/docs/video",
    "html": "Working with Videos\n\nChoosing and uploading videos in Builder is quick, and Builder takes care of optimization for you.\n\nWhen adding videos, you have the option to upload them or embed them.\n\nHow Builder optimizes video\n\nWhen you use Builder's Video Block for your videos, Builder:\n\nCompresses videos so they are smaller and load faster\nLazy loads videos by default\nComparison: uploading and embedding\n\nUploading and embedding are the two ways you can add videos to your Builder project and each has its benefits.\n\nTo choose the best method for your use case, refer to the table below:\n\nFeature\tUploading\tEmbedding\n\nPerformance\n\n\t\n\nGreat. Builder compresses and optimizes\n\n\t\n\nPlatform controlled; for example, depending on the platform video might require more resources, slowing down experience, especially if it is no optimized.\n\n\n\n\nFeel\n\n\t\n\nCompletely integrated within your app\n\n\t\n\nCarries the markers of the video platform; for example, YouTube logo and styling\n\n\n\n\nCost\n\n\t\n\nDoes impact your Builder pricing because it consumes more of your bandwidth\n\n\t\n\nUsually free, depending on platform\n\n\n\n\nCustomization\n\n\t\n\nYes, customizable\n\n\t\n\nNo, carries platform branding\n\n\n\n\nDiscoverability\n\n\t\n\nMore narrow scope as it is part of your Builder Page or Section\n\n\t\n\nIncreases potential for likes, subscribers, and views on the video-sharing platform\n\n\n\n\nBest for\n\n\t\n\nShort videos and animated gifs*\n\n\t\n\nLonger videos\n\n*If you'd like to use animated gifs in your project, we recommend uploading a short video and adjusting the settings to loop (rather than using a .gif file). This way, you still enjoy the benefits of video optimization.\n\nUploading a video\n\nUpload a video when you have it locally on your computer and want to add it to your project through the Builder UI.\n\nBuilder accepts .mp4 and .mov video file types. To upload a video to Builder:\n\nIn the Insert tab, open the Media section.\nDrag a Video block onto the work area.\nClick on the Video block to select it.\nClick the Edit button.\nClick Choose Video.\nUpload your video.\n\nThe next video demonstrates this process:\n\nEmbedding a video\n\nEmbedding a video when it is hosted on a different platform or server, such as a Digital Asset Manager (DAM), but you'd like to feature it within your web page or application. Instead of uploading the video file directly, use a URL provided by the video hosting platform to display the video content.\n\nThese instructions show how to embed a video in Builder, using a YouTube video as an example, but most platforms have a similar workflow.\n\nOn YouTube, for example:\n\nClick on the Share button.\nCopy the URL.\n\nIn Builder:\n\nIn the Insert tab, open the Media section.\nDrag an Embed block onto the work area.\nClick on the Embed block to select it.\nClick the Edit button.\nPaste in your URL.\n\nThe next video demonstrates this process:"
  },
  {
    "title": "How to A/B test changes to your product page with Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/ab-test-product-pages",
    "html": "A/B Testing Changes to Your Product Page\n\nshopify app\n\nA/B testing is a as a data-driven approach to testing and measuring different content and experiences to help you make smart, impactful improvements to your site or app. Leveraging A/B testing on your product pages helps you choose the most appealing product images and descriptions.\n\nIn this tutorial, we'll show you how to create and run an A/B test on your product page. Although the example we are using product pages, these techniques can be applied to any of the other page types in your store. Let's dive in!\n\n👉Tip: This tutorial covers how to A/B test your product page, but you can follow these same steps to A/B test your collection page!\n\nCreating variations\n\nStarting in theme studio, select + New Page in the left sidebar and click Edit next to the product page you want to test. If you haven't imported your existing product page, check out our article about importing pages or start by creating a new one.\n\nIn order to leverage A/B testing, you first want to create different variations of a page or piece of content in order to measure metrics between the two. To do that, click on the A/B Tests tab right above the preview in the Builder editor and then select \"Add A/B test variation.\" Once you click on that, the new content is created and we can start making changes!\n\nYou can rename your new variation (titled Variation 1 by default), adjust the test ratio. You can click Add A/B Test Variation to create more variants.\n\n👉Tip: The default variation is the \"control\" meaning it will be exposed to search engines, users with javascript off, and/or tracking disabled\n\nNotice that in that tab we are also able to choose the percentage of new visitors that see a particular variation using the sliders.\n\nNow let's go back and edit our variation to include an alternate product image. Click on the Edit tab to go back to the editor and then click edit on the image block to upload a new image. If you also wanted to modify the text, or button, or anything else on the page that you think will help drive conversions, you could do that now too.\n\nSome common test variants to try:\n\ndifferent product copy\nchoosing different images\nadjust your product description\nadjust the order, placement, or layout of elements\n\nOnce we have made all the changes we want, we can toggle between the different versions of our page by clicking the dropdown located by \"Targeting\" at the very top of the editor. This is a quick way to flip between the variations we have to make sure they are looking correct.\n\nWhen ready, click publish to start the test or you can schedule it to publish later. You can learn more about scheduling here.\n\nA/B test metrics\n\nNow that we have two versions of the homepage, the next step is to publish our changes using the green button in the upper right corner and wait for the results to roll in. For an A/B test to be an effective tool to determine what modifications to your site are actually working to drive up conversion rate, you need to get see how many people are becoming paying customers based on what version of the page they see. This means you will need to wait to get enough visitors to your site before making any decisions.\n\nTo determine how your test is performing, click on the A/B Tests tab, and then click the \"View Results\" button underneath the sliders. This will take you to the insights tab, where you can see results for the test. At first you will not see many visitors or much of anything there, because the test has not been running long enough. But after a while, you will see some statistics on how your tests are doing.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Make a Landing Page: Step 2 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-2",
    "html": "Make a Landing Page: Step 2\n\nThis step builds upon the first video in this series, Make a Landing with Builder, where you learn how to create a hero image.\n\nThere are some assumptions in the video narrative that you've completed the previous video, but the next section of the page you're creating stands on its own and if you are comfortable with the basics in Builder, you could jump in here–just make sure you have a Builder account and a page ready to work in.\n\nThis section of the series shows you how to do the following:\n\nCreate a horizontal row of images\nAdd and edit copy for each image\nStyle the copy font, spacing, and color\nCreating a row of images\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nAdd columns and photos\n\nAdding columns with photos is easy, as you can see in the video above. Here are the steps:\n\nDrag the Columns block onto the editor where you'd like them to appear.\nClick on the Layers tab and Columns to be sure you've selected your columns.\nChoose Edit and then add more columns by clicking +Column for as many columns as you'd like.\nClick the middle of a column to select the inside Image block. Click Edit and then Choose Photo. Do this for each column.\nAdd text under photo headers\n\nThe Columns block comes with an Image block and a Text block below it for each column. You can add more lines of text below. Here's how:\n\nFrom the Insert tab, drag a Text block under the existing text. Be sure to watch for the short blue underline indicating you're inside a column. Do this for each column. If you prefer, you can click Duplicate from the Text block dropdown menu under which you want to add more text.\nGo back and style the headings and text by clicking on each, adjusting their font size and margins. The long video at the top of this page presents some more tricks.\n\nThe final section in the main video simply adds three columns below the five already created. The steps are the same:\n\nDrag the Columns block\nAdd another column to make three\nAdd photos\nAdd more lines of text below, this time using Duplicate to copy the existing Text block\nStyle the text"
  },
  {
    "title": "How to build a landing page in less than 5 minutes in Theme Studio for Shopify - Builder.io",
    "url": "https://www.builder.io/c/docs/how-to-build-a-landing-page-in-less-than-5-minutes",
    "html": "Building a Landing Page in under Five Minutes\n\nshopify app\n\nBuilder for Shopify includes templates for product pages, blog articles, collections and more. All customizable to your needs and designed to help you build faster while driving more conversions. In addition to the included templates, our shopify app provides the ability for users to create their own custom pages.\n\nIn this guide, we'll show you how to create a custom landing page in less than 5 minutes, sharing our best practices and some useful tips. Let's dive in!\n\nOn the left side bar, you'll see a set of available theme pages, and if you scroll to the bottom you can select \"New Custom Page.\" Give your page a name, then select the Blank template.\n\n👉Note: Custom landing pages are not tied to a particular theme (staging, default, etc) meaning when you publish the page, it will be live on your site.\n\nFrom here, it'll take us directly into the Builder Visual Editor where we can start building our page.\n\nYou'll see your header and footer carries over to all your new pages, so you don't have to worry about re-creating it for each individual page.\n\nStart by adding a hero image to the page. Drag and drop the image component onto the page. Feel free to adjust the adjust the aspect ratio by using the blue outline around the component if you want the image to be smaller or larger. On top of the image, drag a column component. On each side, we're going to add button, which will serve as call-to-actions, such as \"Shop Men, Shop Women.\"\n\nThe beauty of using Builder components is that they are responsive by default. As you move to smaller screens, the columns stack vertically and look great on every device. To learn more about Responsive Design, check out our video!\n\nUsing the alignment tools at the top of the style tab, you can reposition the buttons and utilize the rest of the styling features to adjust the look and feel.\n\nNow let's drag a column component below our image. Then add a product box component into the left column, deleting the placeholder image and text. This element is dynamically tied to Shopify data, so as you add products to your Shopify store, they'll be available in Builder as well. Select the product you want to display and then in the right column, use the text box to add a description of the product.\n\nLet's make some styling adjustments. Using the alignment tools, center align the text. Next, adjust the product image to be smaller, which can be achieved easily with columns by dragging the middle divider to the desired size. This is a another great trick for responsive design.\n\nNow that we have a product box that looks exactly how we want, the first thing to do is check that the design looks great on all device sizes. You should always check the device previews throughout the page building process to avoid any unexpected final results in other views.\n\nIt looks like our hero image is a little small for mobile devices. Let's add a min height of 200px to make it a bit larger for mobile. Any edits made to mobile preview, will only impact mobile devices or smaller.\n\nClicking the dropdown arrow of this element, you can save it as a template and make it reusable. Templates save you time by having to create less components and it keeps your style consistent from page to page.\n\nOn the left side bar, under My Templates, grab your saved templates and drag the newly created product box template onto the page, change out the image to a different product, match the description, and done!\n\nYou can schedule this to go live or even target to specific audiences.\n\nAnd that's it! That's how simple it is to create a custom page in Builder.\n\nFeatured Tutorials\n\nCreate a landing page in Builder\n\nEveryone\n\nGet started with Builder and Next.js\n\nDeveloper\n\nUse your React components in Builder\n\nDeveloper\n\nConnect dynamic data\n\nAdvanced\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Setting up e-commerce targeting - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-targeting?_host=www.builder.io#targeting-with-plugins",
    "html": "Targeting with Plugins\n\nYou can target content based on user interactions with your e-commerce platform's resources—such as products or collections—with e-commerce plugins.\n\nTo use e-commerce resource targeting, your app must pass the appropriate targeting attributes to Builder. For example, if you target an announcement bar to display when a user adds a certain item to their cart, your app must pass the product's id when requesting the announcement bar's content.\n\nPassing e-commerce targeting attributes\n\nYou can pass targeting attributes either by using the JavaScript SDK or with query string parameters when requesting content using the Builder Content API and GraphQL API.\n\nThe e-commerce custom type that you use for your targeting condition determines which targeting attribute you use. For example, when using a request object type like ShopifyProduct—displayed in the custom types list as Shopify Product when creating a new targeting condition—you must pass the Shopify ID for your product to the product attribute.\n\nYou can implement the above with the following code when using the SDK:\n\nconst content = await builder.get('myTargetedContent', {\n  userAttributes: { product: product.id }\n}).promise();\n\n\nYou can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:\n\nbuilder.setUserAttributes({ product: product.id });\n\nconst content = await builder.get('myTargetedContent').promise();\nconst otherContent = await builder.get('myOtherTargetedContent').promise();\n\nYou can also pass the targeting attributes using query strings when you send requests with the content or GraphQL APIs:\n\nconst response = await fetch(`https://cdn.builder.io/api/v2/content/my-model?apiKey=YOUR_API_KEY&userAttributes.product=${product.id}`)\n\nIf product.id matches the ID of the product selected for your targeting condition, then your content renders.\n\nTargeting content with e-commerce targeting conditions\n\nAfter setting up your codebase to pass targeting attributes to Builder, you can target content using e-commerce targeting conditions. For example, you can show users an announcement bar when a certain product is in the cart.\n\nTo learn how to set up targeting within the Visual Editor, see Targeting with e-commerce plugins.\n\nNext steps\n\nFor more information on how to use e-commerce plugins, check out the following articles:\n\nUsing e-commerce custom types with custom component inputs\nSetting up e-commerce resource previews"
  },
  {
    "title": "How to add upsell and cross-sell sections of your cart - Builder.io",
    "url": "https://www.builder.io/c/docs/upsell-and-cross-sell-cart",
    "html": "Adding Upsell and Cross-sell Sections of Your Cart\n\nshopify app\n\nTheme Studio includes powerful tools to help you not only build great e-commerce experiences, but also to optimize to drive higher conversion. Your shopping cart is a great place to add eye catching content for cross-selling and up-selling. The key is to offer products that add value to the customer's purchase intent.\n\nIn this tutorial, we'll walk you through different ways you can increase the value to a cart by cross selling other products based on what your customer has already added to their cart. We'll achieve this by adding a custom dropzone to our page.\n\n👉Tip: You can add cross-sell and up-sell recommendations in other parts of your storefront besides the shopping cart, like a product page or in a pop-up. Just follow this tutorial and place the dropzone in the desired location. Reach out to us if we can help!\n\nIf you're using an ajax cart, contact us to help install\n\nDon't know where or how to install this code? Chat us and we'll integrate the code to your Shopify store for you, for free!\n\nChat us for install help\nCross-selling products\n\nStart by creating a component model that we'll use in our shopping cart. Head over to builder.io/models, select +Create model and choose component. Then give your component a name, such as cart product widget.\n\nThen, let’s give this an editing URL. This is what Builder will open in the Visual Editor to edit your product recommendations, so this just needs to be any URL this Builder component will display on. In our case, since this component will be on all the cart page, we'll use the url https://our-site.com/cart.\n\nCopy the code snippet that starts with {% include 'model...} and head over to your Shopify admin page.\n\nOn the left nav bar in Shopify, click your Online Store and select Themes. In your online store theme, under Actions, click Edit Code.\n\nThis will open up all the liquid template code for your Shopify theme. Because we want these products to be available on our cart page, navigate to the templates/cart.liquid page and paste the code snippet in the section. Where you paste the snippet will determine where the product widget is placed on your page. Let's put it at the bottom of our cart. To do that, we'll paste the code at the very bottom and click save.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Localization of Individual Blocks - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-by-block?_host=www.builder.io#step-1-make-a-model-with-locales",
    "html": "Localizing Blocks\n\ngrowth plans\n\nIn the Builder Visual Editor, you can configure individual blocks to deliver content specific to language and region preferences.\n\nFor example, if you wanted to differentiate copy or images for a visitor in Germany or a visitor in Mexico, you could adjust a few settings on the block and add locale-specific content in the block's localization settings.\n\nYou can individually localize many blocks, including the following, in the Visual Editor:\n\nText\nImages\nColors\nSymbol inputs\n\nThe process is the same for each in that you hover over the label in the Edit dialogue to show the Localize icon, click the icon, and add content to each locale.\n\nPrerequisites\n\nTo successfully use localization in Builder, make sure you've already done the following:\n\nAdded locales in Builder.\nIntegrated Builder localization with your code.\n\nThe last part of setting up localization is to integrate. For instructions, continue to Integrating Builder Localization with your code.\n\nConfiguring a single block for localization\nDouble click the block to open the Edit dialogue.\nHover over the label of the block; for example, the label Text in a Text edit dialogue, and click the Localize icon.\nIn the locale dropdown, choose the locale you'd like to edit. As a best practice, always set a value for the Default locale in case none of the other locales are in the user's settings.\nEnter content per locale.\n\nThe following video demonstrates adding localized content with two examples:\n\nA Text block\nAn Image block\n\nThis video also shows how to select the locale for the entire content entry, which you can do by selecting the local at the top of the work area.\n\nTip: If you don't have any locales, click the link to Add a new locale, which displays when you hover over the locales dropdown. You can also add multiple locales in a single dialogue as outlined in Adding locales in Account settings.\n\nTargeting and block localization\n\nTo customize content for specific groups of people within your different language options, you can use targeting, and within this targeted content, you can localize inputs or fields.\n\nTo use this feature:\n\nPass the locale property to the BuilderComponent when integrating Builder into your app. This ensures that the content in the Visual Editor is localized based on the specified locale.\nWhen making an API call to retrieve the content, include the locale parameter, and pass the current locale value. This makes sure that the content returned from the API call is specific to the desired locale.\n\nThis streamlined process makes the localization workflow more direct, helping you efficiently manage localized content within the Builder environment, without the need for additional data connections.\n\nconst Page = await builder.get(page, {\n  options: { locale }, // Pass the locale property to the options object\n  userAttributes: {\n    urlPath: `/about`, \n    locale, // Pass the locale property to the userAttributes object\n  },\n}).toPromise();\n\n\n\nTo enable field localization, explicitly mark them as localized in the model settings. This ensures that the content within those fields can be customized based on different languages or regions.\n\nAdditionally, you can localize inputs by clicking on the globe icon within the Edit dialogue. This way you can provide localized values for inputs such as text or images.\n\nBy default, all inputs can be localized unless you specifically set the localized property to false when registering your custom component. This gives you flexibility in deciding which inputs can be localized and which ones should remain static across different locales.\n\nRemoving block-level localization\n\nTo remove localization from a selected block:\n\nOpen the Edit dialogue for the block. Do this by double-clicking the block or selecting the block and clicking the Edit button.\nThis step removes the localized content. Hover over the dialogue label and click on the Localize icon.\n\nBy toggling off localization for a block, the localization dropdown no longer displays, and the content is removed. The following video demonstrates this process."
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Setting%20up%20targeting",
    "html": ""
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/reusable-components",
    "html": ""
  },
  {
    "title": "Managing Content - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-content",
    "html": "Managing Content\n\nWhen you create Page, Section, or Data entries in Builder, they are all available in the Content area of the Builder UI.\n\nYou can search, organize with folders, as well as create custom views according to your needs.\n\nContent in Builder\n\nThe image below shows the Content area of Builder with three areas featured:\n\nSearch: Search all content. To speed up your workflow, use the forward slash, /, as a keyboard shortcut for accessing search.\nLeft sidebar: Access folders, custom views you create, and content entries.\nContent list: Display all content entries for the selected model; that is, the model selected in the left sidebar.\nOrganizing with folders\n\nAdmins can create folders that users can use to organize content.\n\nCreating a folder\nClick + New Folder.\nName the new folder.\nChoose a parent folder if you'd like to nest the folder.\nClick the Create Folder button.\nAdding a content entry to a folder\nDrag content entry from the content list to drop on the desired folder.\nRemoving a content entry from a folder\nOpen the folder to display the contents of folder in the content list.\nDrag the content entry out of the content list and drop it on the prompt that reads Remove from folder. This prompt displays when you drag the content entry near the Folders section of the left sidebar.\nEditing a folder\nHover over the folder and click on the settings wheel that displays on hover.\nIn the Edit Folder dialogue, rename or delete the folder.\n\nThe following video shows creating and nesting a folder, adding and removing items to and from the folder, editing a folder, and deleting a folder.\n\nTip: Reordering content entries, whether in a folder or not, affects the priority. For more information, read the Setting priority section of Target and Scheduling Content.\n\nBulk adding and removing content\n\nTo add content entries to a folder:\n\nSelect the items by clicking the checkbox next to each content entry.\nExpand the More menu at the upper right and select Add to Folder.\nIn the dialogue that opens, select a folder.\nClick the Choose button.\n\nTo remove content entries from a folder:\n\nIn the folder, select the items by clicking the checkbox next to each content entry.\nClick Remove from Folder.\n\nWhen you remove content entries from a folder, the content returns to the default content list.\n\nThe next video shows adding and removing several content entries to and from a folder.\n\nCreating custom views\n\nCustom views help you curate your content view. This is especially helpful for organizing content entries that you access frequently.\n\nTo create a custom view:\n\nClick Filter.\nIn the dialogue that opens, click +Filter.\nChoose a property and select a qualifier such as is, contains, or is not.\nRepeat the previous step as needed.\nClick Done.\nTo save your new custom view, click Save View and complete the dialogue that opens.\nClick Save.\n\nNow the new custom view displays in the Views section of the left sidebar. Expand Views to access your views.\n\nThe video below goes through the process of creating and saving an example view based on content entries in the Builder documentation that have \"Integrating\" in the name:\n\nWhat's next\n\nFor organizing templates and assets, read Managing Templates, Images, and Symbols with Folders."
  },
  {
    "title": "Scheduling Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/scheduling-symbols?_host=www.builder.io",
    "html": "Scheduling Symbols\n\nWhen you need a reusable Block but want it to publish only under certain circumstances, create a Dynamic Symbol. This article walks you through how to set up a hero image on your site that you want to switch according to a schedule.\n\nThe following four images are examples of season-specific heroes that you can schedule to display at the appropriate times in Builder–one each for summer, fall, winter, and spring.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols. You should have the following:\n\nAt least two Symbols to work with\n\nIf you're new to Symbols, check out the following articles first:\n\nReusing Blocks: get to know all the options.\nIntroduction to Symbols: learn about what Symbols can do for you.\nHow to make a Symbol: follow a quick tutorial to make basic reusable blocks.\nCreate a custom Model\n\n👉Tip: If you already have a custom model, you can skip to the next section.\n\nGo to the Models section.\n\nSelect the +Create Model button.\n\nChoose Section.\n\nName your new Model and select the Create button. In this example, the name is Homepage Hero, but you can name it anything that works for your project.\n\nIn the Symbols: picking dates\n\nOpen the first Symbol and select the beginning date and time for when you want the Symbol to appear on your site. To get the date picker, click on the calendar icon.\n\nSelect the end date and time for the Symbol.\n\nSelect the Publish (Scheduled) Update button (not pictured).\n\nRepeat the scheduling process for any other Symbols that need scheduling.\n\nWhen you've scheduled your Symbols, you'll see their dates in the list in the Content area of Builder.\n\nIn the Page: using Dynamic Symbols\n\nIn the Page where the Symbol should appear, go to the Insert tab and select the Show More button.\n\nDrag and drop a Symbol Block onto the page.\n\nSelect the Edit button.\n\nIn the Model dropdown, select your Model. Here it's Homepage hero, the custom Model we made in the beginning of this article.\n\nLeave Entry blank.\n\nToggle Dynamic to the On position.\n\nMaking sure the right Symbol shows\n\nTo have a default Symbol, publish one Symbol with no dates associated and drag it to the bottom of the group of Symbols you're scheduling.\n\nIn this example, there are four scheduled Symbols and one backup, just in case there's a gap in the dates."
  },
  {
    "title": "Sending Builder.io form data to Zapier - Builder.io",
    "url": "https://www.builder.io/c/docs/zapier",
    "html": "Connecting Builder Forms to an App Using Zapier\n\nYou can connect your Builder form to any of thousands of apps with Zapier. Popular Zapier integrations include:\n\nGoogle Sheets\nGmail\nSlack\nGoogle Calendar\nCalendly\nGoogle Drive\nTwitter\nNotion\nStripe\nSalesforcce\nHubspot\nMailchimp\n\nThis document provides instructions on how to connect your Builder form to another app using Zapier's integrations.\n\nStep 1: Creating a zap in Zapier\n\nThe first step is setting your trigger. A trigger is the event that starts a zap. When you set up a trigger, Zapier monitors for this event. The trigger for this example is Webhooks by Zapier. Webhooks are automated messages sent between apps, which can include information about new items; for example, email addresses from sign-up forms.\n\nIn Zapier, select the +Create zap button in the top left corner.\nSearch for and select Webhooks by Zapier.\nFor the Event, choose Catch Hook. The Catch Hook event waits for a new POST, PUT, or GET to a Zapier URL.\nClick the Continue button and follow the steps in the Zapier dialogue to complete setting up your Webhook URL. For detailed instructions, refer to the Zapier documentation, Trigger Zaps from Webhooks.\n\n5. In the next section of the dialogue, Test Trigger, Zapier provides you with a Webhook URL. Click the Copy button and go to Builder.\n\nStep 2: Connecting your Builder form to Zapier\n\nNow, Zapier will provide you with a custom webhook URL. Copy this URL and navigate to your Builder form. Select the form layer and navigate to the options tab. Change \"send form submission\" from \"email\" to \"custom\". Paste your custom webhook URL in the \"Action\" input.\n\nIn Builder, click on your Form and open the Edit dialogue.\nChoose Custom.\nIn the Action field, paste your Webhook you copied from Zapier.\nStep 3: Testing your trigger\n\nTo test your trigger:\n\nIn Builder, preview your Builder page.\nFill out the form.\nSubmit the form.\nIn Zapier, click the Test Your Trigger button.\n\nIf Zapier finds your submission request, Zapier displays the request in the dialogue. For more detail, see the Test your Webhooks section of the Zapier document Trigger Zaps from Webhooks.\n\nStep 4: Connecting Zapier to Mailchimp\n\nThis step uses Mailchimp as an aexample, but most other integrations follow the same pattern. Choose your integration in Zapier and then follow the setup process that Zapier guides you through.\n\nAfter setting up your webhook and testing your trigger, you need to tell Zapier to use the app you want to connect to. This example covers Mailchimp as the event for your form submissions to be sent to.\n\nGo back into Zapier to the second part of setting up your zap, which is headed 2. Action.\n\nIn the search bar, enter Mailchimp to filter and select Mailchimp.\n\n2. For the Event, select Add/Update Subscriber so when a user submits the form, their information is added to your Mailchimp audience.\n\n3. Connect the Mailchimp account you want the form submissions to go to and select the correct audience and email value—this can be the email value from the test submission step earlier in the Zap. These are the required steps, but you can also add groups, tags, and other specifications.\n\n3. Scroll down and click the Continue button.\n\n4. In the Test Action section, click the Test action button to ensure that the form data is being properly sent from your Builder form to your Mailchimp audience.\n\nOnce your test data is successfully sent, you can turn on your Zap to make your form functional."
  },
  {
    "title": "Adding Inputs to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/adding-inputs-to-symbols?_host=www.builder.io#adding-inputs-to-symbols",
    "html": "Adding Inputs to Symbols\n\nTo create and maintain a reusable part of your website in one place, use Symbols. A minimal Symbol is identical everywhere, but sometimes you need an almost identical piece of your site that you can tweak individually without affecting other instances of that Symbol.\n\nIn cases where you want to enable editing of certain features but keep maintenance centralized, you can configure Inputs for your Symbols. An Input is a way for you specify that a certain part of the Symbol, such as text or an image, is changeable.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols and have a Symbol you'd like to configure. If you're new to Symbols, check out the following articles first:\n\nReusing Blocks\nIntroduction to Symbols\nHow to make a Symbol\nAdding an Input to a Symbol\n\nTo make a Symbol editable on a per instance basis, you need to configure Inputs. Use Inputs to make text blocks, images, or any other kind of content in a Symbol editable.\n\nIn the Symbol\n\nOn the Symbol's Data tab:\n\nAdd a new Content Input by selecting + New Field in the Content Inputs section.\nName your new field and choose its type.\nIn the Content State section, find your new Input and enter some default text.\nSelect the Block you want to make editable and click Edit.\nSelect the four dots and specify the Input you just created.\nSelect the Publish button to make your changes in all instances of the Symbol.\nOn the page where you're using the Symbol\nAdd your Symbol to the page if you haven't already.\nSelect your Symbol.\nOn the Options tab, edit the content of the Inputs you created.\nDeleting Content Inputs\nOpen the Symbol and go to the Data tab.\nUnder Content Inputs, select the X to delete the Input.\nSelect the block that was associated with the Input.\nOn the Options tab, select the four dots and select Remove Binding.\nMaking a Symbol inline or turning a Symbol into a regular Block\n\nDecoupling a Symbol from its Source creates a standalone Block, which no longer inherits from the Source Symbol. This Symbol becomes inline.\n\nSelect the Symbol and click the Edit button.\nIn the Edit window, select Detach Symbol."
  },
  {
    "title": "Tracking Custom Events - Builder.io",
    "url": "https://www.builder.io/c/docs/tracking-custom-events?_host=www.builder.io#tracking-custom-events",
    "html": "Tracking Custom Events\n\nYou can track custom events to evaluate your content's performance. For example, you can:\n\nmeasure A/B test performance by custom events, such as add-to-cart rates or average order value\nbreak down impressions and conversions by product views or orders\nbuild completely custom dashboards associated with Builder content and sessions\nTracking custom events in JavaScript\n\nYou can track a custom event using JavaScript or with the Visual Editor's JS editor or within your own codebase. Custom events can have any name.\n\nIn Builder content or from the the custom JavaScript panel, track an event within an action binding:\n\nbuilder.track('yourEventName');\n\nAlternatively, you can track a custom event using JavaScript within your own codebase:\n\n// Or, track an event within your project's code\nimport { builder } from '@builder.io/sdk';\nbuilder.track('yourEventName');\n\nIf you're using web components, such as Shopify hosted, you can access the global Builder instance from any script tag or function. Note that in this case, you might need to wrap the call in a setTimeout() to ensure BuilderWC is loaded:\n\nBuilderWC.builder.track('yourEventName');\nImporting the SDK\n\nTo import the latest SDK, specify the framework as follows:\n\nimport { track } from '@builder.io/sdk-...'\n\n// Next.js, App Router\nimport { BuilderContent } from \"@builder.io/sdk\";\n\n// Qwik\nimport { getContent } from \"@builder.io/sdk-qwik\";\nimport {\n  getContent,\n  RenderContent,\n  getBuilderSearchParams,\n  type RegisteredComponent,\n} from \"@builder.io/sdk-qwik\";\n\n//  React, Remix, Hydrogen, Gatsby\nimport { BuilderComponent, builder, useIsPreviewing } from \"@builder.io/react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\nimport { BuilderComponent } from '@builder.io/react';\n\n\n// Vue\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue2';\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';\n\n// Nuxt\nimport { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-vue'\n\n\n//  Svelte\nimport { RenderContent } from '@builder.io/sdk-svelte';\n\n//  Angular\nimport { BuilderModule } from '@builder.io/angular';\n\n\n\n\n\nAccessing custom events in the overview dashboard\n\nTo display metrics for your custom events on the overview dashboard, take the following steps from the content entry where you use your custom event:\n\nNavigate to the Insights tab.\nClick on the three dots in the top right corner and choose Customize Metrics.\nSelect Manage Custom Events.\nAdd a new event to start tracking your custom event on the dashboard.\n\n5. Enter the Event Name, matching the string supplied to builder.track().\n\n6. Add a Display Name to label your custom metric on the dashboard.\n\n7. Optionally add a Description for the event.\n\n8. Click Submit and make sure the new event is checked to start tracking.\n\nFor more information, refer to Viewing Metrics with Insights.\n\nUsing event tracking with Gen 2 SDKs\n\nWith the Builder Gen 2 SDKs, you can use Builder's event tracking module to:\n\ntrack events\ntrack data retrieval\nhandle API requests\n\nYou can create event objects, check if tracking is enabled, and send the event data to a tracking API.\n\nTo track and send the event data to the tracking API, use the track() function with an object containing the type property.\n\nThe type property specifies the type of event you want to track. It can be one of the predefined values:\n\nimpression\nconversion\nclick\nsome-custom-event.\n\nYou can choose the appropriate type based on the event you want to track. For example:\n\n// Make sure you're using a Gen 2 SDK\nimport { track } from '@builder.io/sdk-vue'\n\ntrack({\n  type: 'impression' | 'conversion' | 'click' | 'some-custom-event',\n  apiKey: YOUR_API_KEY\n});\n\nAccessing custom events from SQL\n\nenterprise plans\n\nYou can incorporate custom events into your custom dashboards by modifying your dashboards' SQL queries. For more information, see Programming Custom Dashboards."
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Storetasker,",
    "html": ""
  },
  {
    "title": "Child Layouts - Builder.io",
    "url": "https://www.builder.io/c/docs/child-layouts",
    "html": "Working with Child Layouts\n\nThe term child layout refers to how you arrange blocks that are within another block.\n\nWhen you place one Builder element inside another, you can set child layout attributes on the outer element. Child layout options are only available on elements that have children inside them.\n\nOften the outer, or parent, element is a Box block. Putting your content inside of a Box gives you access to all the child layout options in this document.\n\nTo edit the layout of blocks within a parent container, use Builder's Child Layout features to do the following:\n\nShowing the Child Layout options\n\nTo display the Child Layout section:\n\nSelect a parent container with child blocks.\nOpen the Style tab.\nGo to the Layout section.\n\nThe Child Layout section only shows if the selected block has nested elements, also known as child elements.\n\nHow height and width affect alignment\n\nOne of the first considerations to keep in mind while using child layout settings is that all the properties discussed in this document are affected by the height and width of your elements.\n\nFor example, the screenshots below show three boxes with text blocks inside. There are no height or width constraints on any of the colored boxes and they are constrained only by the text inside them.\n\nThe outer, gray box on the left has a min height of 400px, and because the children are set to the flex-direction of column, they will take up all the vertical space available. Thus they are distributed evenly over the 400px height.\n\nTheir widths are dictated by the horizontal space needed for the text. If there was no text in these inner boxes, they would collapse because the boxes have no height set.\n\nThe image on the right shows the same outer box, but with a min height of 200px. The inner boxes still take up all available vertical space, but no more.\n\nNo heights or widths on children\n\nParent min height of 400px\n\nFlex-direction: Column\n\nNo heights or widths on children\n\nParent min height of 200px\n\nFlex-direction: Column\n\nThe following two screenshots illustrate the effect of parent width on child elements. This time the inner boxes are arranged in a row.\n\nIn the image on the left, the outer box has a max width of 200px. Because the boxes with the text in them require more than 200px of horizontal space in total, the inner boxes extend beyond the bounds of the outer box.\n\nThat problem can be solved using the wrap property, illustrated in the screenshot on the right.\n\nTo use Wrap, select the outer/parent box, and on the Style tab in the Child Layout section, click the Wrap button, as shown in the image on the right.\n\nNo heights or widths on children\n\nParent max width of 200px\n\nFlex-direction: Row\n\nNo heights or widths on children\n\nParent min height of 200px\n\nFlex-direction: Row\n\nTip: For more information on width, refer to How Width Affects Layout.\n\nThe properties in the Child Layout section are based on the CSS Flexbox model. If you're not familiar, Flexbox offers the flexibility not previously available for web layouts. However, it takes a bit of practice to both understand what the properties do, and to achieve the layout you want.\n\nFor these reasons, some additional exploration of Flexbox can help you get the most of the framework. Experimenting in the Builder Visual Editor can help. In addition, if you want external tutorials, check out these pages:\n\nFlexbox Froggy A Game with 24 levels\nFlexbox on MDN\nFlexbox Use Cases on MDN\nConverting blocks to columns\n\nOne of the options in the Child Layout section is the Columns setting. You can convert your blocks to columns by following these steps:\n\nSelect the parent block.\nOpen the Style tab.\nIn the Child Layout section, click Columns–the first button on the left–to convert to Columns.\n\nThe video below shows the process.\n\nFor more information about columns, refer to Using Columns to Build Responsively and Convert a Layout to Columns.\n\nArranging blocks in a horizontal row\n\nTo arrange blocks horizontally, take the following steps:\n\nSelect the parent block.\nOpen the Style tab.\nIn the Child Layout section of the Style tab click the button with horizontal dots.\n\nThe following video illustrates the process.\n\nStacking blocks vertically\n\nTo create a vertical layout, take the following steps:\n\nSelect the parent block.\nOpen the Style tab.\nIn the Child Layout section of the Style tab click the button with vertical dots.\nWrapping blocks\n\nYou can set your blocks to wrap using the Wrap property in the Child Layout section.\n\nTo set wrapping:\n\nSelect the parent block.\nOpen the Style tab.\nIn the Child Layout section of the Style tab click the button with the grid.\n\nThe video below shoes the steps, and illustrates the blocks wrapping on smaller screens.\n\nThe wrap property defines whether the child elements are displayed in a single line or can be flowed into multiple lines when necessary.\n\nFor more information on grids, refer to How to Make a Grid Layout.\n\nArranging blocks to scroll\n\nThe Scroll property keeps the child elements in a row and prevents them from wrapping. Therefore if the width of all the elements is wider than the page, a horizontal scroll bar is added and the user can scroll back and forth to view all the elements.\n\nYou can use this option if you don't want to increase the height of your layout if you want users to scroll right and left, or you don't want the child elements to wrap, for example.\n\nTo wrap blocks, take the following steps:\n\nSelect the parent block.\nOpen the Style tab.\nIn the Child Layout section of the Style tab click the Scroll button, which contains three dots within angled brackets like this: <···>\nJustify Content for horizontal alignment\n\nUsing the Justify Content section helps you layout child elements horizontally so that they are responsive and use Builder Best Practices by default.\n\nThe following options are available in the Child Layout section for Justify Content:\n\nTop: Align your elements at the top of the parent element.\n\nCenter: Align your elements in the center of the parent element.\n\nBottom: Align your elements at the bottom of the parent element.\n\nSpace between: Position your elements with space between elements.\n\nSpace around: Position your elements with space before, between, and after.\n\nThe following image shows where to find the Justify Content section within the Style tab, in the Layout section.\n\nSpace Between adds space between the elements in the row, but not at the beginning or end:\n\nSpace Around adds space between the elements as well as before and after.\n\nThe final option in the image above is to add data bindings.\n\nIf you choose to add a data binding, then the other properties in that menu will not be available to set in the editor; instead, you can set them based on conditions you set in code.\n\nTo see how that's done, refer to Connecting Dynamic Data in Builder's Visual Editor.\n\nAlign Children for vertical alignment\n\nUsing the Align Children section helps you lay out child elements vertically so that they are responsive and use Builder Best Practices by default.\n\nThe following options are available in the Child Layout section for Align Children:\n\nLeft: Align your elements to the left of the parent element.\n\nCenter: Align your elements to the horizontal center of the parent element.\n\nRight: Align your elements to the right of the parent element.\n\nStretch: Fills the available space evenly inside your parent element.\n\nThe following image shows where to find the Align Children setting in the Layout section of the Style tab under Child Layout.\n\nCombining Justify Content and Align Children\n\nJustify Content and Align Children work together to lay out your content in a flexible and responsive manner. Each property influences the other. While it can take a bit of experimentation to achieve your layout goals, the following images illustrate a few combinations.\n\nJustify content: Space Between\n\nAlign children: Center\n\nDirection: Column\n\nJustify content: Space Around\n\nAlign children: Bottom\n\nDirection: Row\n\nJustify content: Space Around\n\nAlign children: Left\n\nDirection: Column\n\nJustify content: any\n\nAlign children: Stretch\n\nDirection: Column\n\nJustify content: any\n\nAlign children: Stretch\n\nDirection: Row\n\nJustify content: Left\n\nAlign children: Center\n\nDirection: Row\n\nTry out the properties\n\nTip: The following Builder interactive samples are created in Builder. If you want to create your own, you can see how it's done in Creating a Section with a Changeable Background.\n\nRows and columns\n\nTo see the Row and Columns properties in action, click Column or Row below:\n\nColumn\nRow\n\nDress Fabric sample 1\n\nDress Fabric sample 2\n\nDress Fabric sample 3\n\nJustify Content\n\nTo see the Justify-Content properties in action, click a property below:\n\nLeft\nCenter\nRight\nSpace Around\nSpace Between\n\nDress Fabric sample 1\n\nDress Fabric sample 2\n\nDress Fabric sample 3\n\nAlign Children\n\nTo see the Align Children properties in action, click a property below. They behave differently based on whether your layout is set to rows or columns, so try both.\n\nRow\n\nColumn\n\nTop\nCenter\nBottom\nStretch\nProduct 1\nProduct 2\nWhat's next\n\nFor more ideas for flexible layout options, refer to these documents:\n\nDesign with Columns\nConvert a Layout to Columns\n\nFor more information on element widths and alignment, refer to:\n\nHow Width Affects Layout\nUsing Alignment for Layout"
  },
  {
    "title": "Shopify FAQ - Builder.io",
    "url": "https://www.builder.io/c/docs/shopify-faq",
    "html": "Shopify FAQs\n\nshopify app\n\nWe're constantly creating new user guides and developer docs to support our users. We also manage the Builder Forum, where our community of users and our team collaborate on best practices, new feature ideas, and much more. Should those resources not have the answers you're looking for, please reach out via email at help@builder.io or using live chat (note: live chat support is not available to customers on our free subscription plan)\n\nSafe Mode & Publishing\n\nBuilder Theme Studio v Shopify\nSafe mode\nAlternate views\nPage statuses\nWhat does staged mean?\n\nPages & Themes\n\nImporting pages v using templates\nDoes Builder Theme Studio work on all pages?\nEditing existing store pages\nCustom pages\nPreviewing pages\nAre pages independent of themes?\nIf I update my base theme, will my H1-H6 styles update?\nHiding your header and footer\n\nOther\n\nDoes Builder Theme Studio work with other Shopify apps?\nBuilder Theme Studio SEO optimization\nHow can I undo changes?\n\nUsers & Organizations\n\nWhat is an organization?\nOrganizational roles\nAssigning roles\nManaging Shopify users in Builder Theme Studio\n\nAccount\n\nHow long is the Shopify trial period?\nWhat happens if I uninstall the app?\nBilling\nBuilder Theme Studio vs. Shopify - What do I do where? \n\nThink of Shopify as the holder of all your store's data. Anything that is dynamic, such as your product data, collection data, blog data, etc., will be handled in Shopify. Builder Theme Studio will pull in this dynamic data, such as pricing and products, from your Shopify store.\n\nBuilder Theme Studio is where you build, edit, and optimize your storefront - the possibilities are endless.\n\nWhat is safe mode?\n\nBy default, Safe Mode is enabled. While working in Safe Mode, anytime you publish updates, these updates are not applied to the live storefront but instead published to a staged alternate view. \n\nYou can preview your staged content by clicking the eye icon and select View live page.\n\nWhen you're ready to publish this content to your live site, turn off Safe Mode and click Publish in Builder Theme Studio.\n\nLearn more about Safe Mode here\n\n👉Safe Mode only applies to theme pages and theme elements, and not custom pages. Only admins and developers can change safe mode. Find out more about roles and permissions here\n\nWhat are alternate views?\n\nFor each page in your store, Shopify has a concept of alternate views to make edits or create versions of pages without impacting your live default template. In Builder Theme Studio, you can create an alternate view, such as a new version of a product page, that uses a different style or layouts, and link customer to this alternate view (e.g. through email, social, or ads) by adding ?view=myview to the URL, where myview is the name of your view, which you can set from the options tab when editing any of your theme pages.\n\nFor example, the alternate view for my blog page shown below is:\n\nhttps://store.myshopify.com/**blogs/news**?view=builder\n\nWhen you're in Safe Mode, all your theme pages and theme elements default publish to an alternate view. When you're ready to publish your changes to your live storefront, you'll need to turn Safe Mode off, and Publish Live. Learn more about Safe Mode.\n\nGetting started with Shopify\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Getting%20around%20Builder:%20the%20Visual%20Editor",
    "html": ""
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Deploy%20hooks",
    "html": ""
  },
  {
    "title": "Adding 3rd party apps in Theme Studio - Builder.io",
    "url": "https://www.builder.io/c/docs/adding-3rd-party-apps",
    "html": "Adding Third-party Apps in Builder\n\nshopify app\n\nIt's simple to integrate any 3rd party app in Builder! Each 3rd party app you use should provide a snippet of code you can add to your Builder pages. Simply drag and drop a custom code block component onto the page you are working on in Builder. Then paste in the liquid code from your 3rd party app into the custom code block.\n\nDon't know where or how to install this code? Chat us and we'll integrate the code to your Shopify store for you, for free!\n\nChat us for install help\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Builder vs. Shopify Conversions - Builder.io",
    "url": "https://www.builder.io/c/docs/conversions",
    "html": "Builder Conversions vs. Shopify Conversions\n\nIf you have a Shopify store with Builder’s Shopify App installed, you have access to powerful features, including built-in conversion tracking.\n\nAny time a user clicks from a Builder page to the cart/checkout page and completes a purchase, Builder records a conversion event and writes the order ID to a cookie.\n\nThe conversion event also captures a session ID. Conversions are then tied to any Builder content entry that had an impression in that same session.\n\nBecause this conversion event is triggered on the front end, the data has to be sent over the wire to be recorded. Thus, conversion events could be slow to post, doubled-counted or dropped altogether. This could happen for any number of reasons, including:\n\nA user's internet connection is slow or fails before the conversion can be sent\nThe user has ad blockers enabled that block the cookie or tracking API completely\nA user closes the window before the API request completes\nAny number of other user- or environment-related reasons\n\nFor these reasons, and because a conversion can be tied to multiple content entries, it’s possible that your conversion tracking in Builder can be slightly different from other analytics (such as Shopify’s). For this reason, you should refer to the metrics in your Shopify store for the most meaningful counts. The differences should be immaterial, though, and the directional insights from Builder tracking provide detailed and actionable analysis of how your content entries are performing."
  },
  {
    "title": "Targeting with Builder's Shopify App - Builder.io",
    "url": "https://www.builder.io/c/docs/targeting-with-theme-studio",
    "html": "Targeting with Builder's Shopify app\n\nshopify app\n\nTargeting content for specific audiences helps provide insight into where people are in their customer journey driving customer acquisition and retention. Builder for Shopify includes powerful tools to help you not only build a great e-commerce websites, but also understand your visitor's behavior and act on those insights to optimize your content quickly, driving higher conversion.\n\nYou can leverage targeting in a variety of ways for your store—check out our tutorial for how to create a product promotion targeted on specific product or collection pages. One powerful tool of targeting with Builder for Shopify is to target specific pieces of content to customers based on attributes such as whether a customer has bought from a certain collection, whether the page is a particular product page, whether the customer has a product with a specific tag in their cart, and so forth. All the options can be found by clicking on the Targeting icon while in an organization that is hooked up to a Shopify store.\n\n👉Tip: Interested in learning how to target based on query parameters? Check out our guide here\n\nTo use targeting, click the Targeting icon at the top of your Builder page. In Targeting, click Add a Filter, and choose one of the many properties in the dropdown menu.\n\n👉Tip: take your targeting a step further by scheduling your content and creating A/B tests to measure your page performance\n\nPage priority and rearranging\n\nWith targeting and A/B testing, you're likely creating multiple variations of your pages. In the content list at builder.io/content, Builder lists your pages by priority and will go through to see which one should be displayed. For example, if you have three product pages and two have a future date and time scheduled, Builder will display the default product page for now. It’s always good to have a default page in case there is a lapse in scheduling.\n\nYou can also drag the pages in the list to rearrange the page priorities. Whichever product page you have on top will override the pages below it, unless you add an end date. To make it easier to view certain versions of your pages, you can use the filter at the top and filter by URL path.\n\nWith targeting and A/B testing, you're likely creating multiple variations of your pages. In the content list at builder.io/content, Builder lists your pages by priority and will go through to see which one should be displayed. For example, if you have three product pages and two have a future date and time scheduled, Builder will display the default product page for now. It’s always good to have a default page in case there is a lapse in scheduling.\n\nYou can also drag the pages in the list to rearrange the page priorities. Whichever product page you have on top will override the pages below it, unless you add an end date. To make it easier to view certain versions of your pages, you can use the filter at the top and filter by url path.\n\n👉 Tip: Once you rearrange your pages, publish one of the affected page (one of the product pages versions) for your store to update with these changes.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "High Speed Mode for Shopify - Builder.io",
    "url": "https://www.builder.io/c/docs/shopify-high-speed-mode",
    "html": "High Speed Mode for Shopify\n\nshopify app\n\nexperimental\n\nHigh Speed Mode is a new experimental mode for our Shopify integration that outputs content using our high-speed Qwik framework. Qwik is a next-generation frontend framework for the fastest possible page load times, regardless of page complexity.\n\nStatus\n\nHigh Speed Mode is currently experimental. Today, it only supports some Builder features, and may have some unexpected bugs. When using High Speed Mode today, we encourage you to always test your live site after publishing to ensure everything works as expected, and to report bugs in our forum.\n\nThat said, High Speed Mode is used by several sites in production, including the Builder.io homepage, which generally scores above a 90/100 on Google PageSpeed Insights for mobile.\n\nSupported Features:\n\nEssential content building: such as sections, boxes, images, text, links, columns, etc\nEssential styling\nTargeting\nScheduling\n\nNot yet supported, but will come:\n\nA/B testing\nAnalytics\nAutomatically updating data (like product data, symbols)\nCustom liquid blocks\nTabs, Carousel, and Accordion blocks\nAnimations\nProduct and collection boxes\nEnabling High Speed Mode\n\nTo enable High Speed Mode, from your account settings page, choose advanced settings, then from the labs tab enable High Speed Mode\n\nUsing High Speed Mode\n\nOnce enabled, you can toggle High Speed Mode to be on on a per-entry basis (aka per-page or section).\n\nOnce turned on, any publishes of this entry will output with High Speed Mode.\n\nImportant: Alwasy test out your page or section after you publish it. High Speed Mode outputs code in a different way than used in the Visual Editor, so just because something looks or works right when editing, doesn't mean that it works right on your live site until you test it out yourself to verify.\n\nIf you see issues on your live site: go back to Builder, turn off High Speed Mode, and rep-publish.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "How do I manage and change themes - Builder.io",
    "url": "https://www.builder.io/c/docs/how-do-i-manage-and-change-themes",
    "html": "Changing and Managing Themes\n\nshopify app\n\nDoes Builder Theme Studio work with my Theme?\n\nManaging and Changing your Theme\nBuilder Theme Studio works with your theme\n\nYes, Builder Theme Studio works with any / all Shopify themes. Any themes you've added to your Theme Library in Shopify are accessible in Builder Theme Studio, and you can edit them to your liking. \n\nManaging and changing your theme\n\nIf you have multiple themes in your Shopify account, you can access and switch between them in Builder Theme Studio.\n\nIn the Studio tab, all of your themes are available under \"Editing Theme\". You'll see a dropdown menu showing which theme you are currently on and your other available themes. Here you can switch between your themes and customize your theme pages and elements.\n\nNote: publishing, duplicating and downloading a theme should be done in your Shopify account.\n\nUp next\n\nImporting pages\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Using Columns to Build Responsively - Builder.io",
    "url": "https://www.builder.io/c/docs/columns",
    "html": "Using Columns to Build Responsively\n\nOne of the fastest ways to make your project responsive from the start is to use Builder's Columns block. All of the responsive groundwork is already in place in the Columns block so that it adapts to any screen size by default. And you can use columns to showcase any UI, or User Interface, element.\n\nThe following is an example of the built-in Columns block with the minimal addition of a third column, some images, and copy. When the view changes from Laptop to Tablet and then to Phone, the contents of the columns adapt, preserving a positive user experience.\n\nThe following example is a Columns block with only two columns. Instead of two pictures, one column is text and the other is an image. The copy reflows and maintains readability at the different screen widths.\n\nThe principle is the same as the previous example, in that the edits to the built-in Columns block are only to style the look. You don't need to do anything to make the Columns block responsive.\n\nThe edits to the built-in Columns block include adding and styling copy, adding a background color to the Columns block, deleting the placeholder image block in the first column, and setting the width to full page width.\n\nThe Columns block is responsive by default, so you can focus entirely on content and Builder takes care of the responsiveness.\n\nAdding columns\n\nTo add Columns, drag and drop a Columns block from the Insert tab onto the page.\n\nTo change the number of columns:\n\nSelect the Columns element by clicking on it. Be careful not to select the image or text inside the columns.\nClick the Edit button.\nClick the +Column button to add another column.\n\nTo check that your columns display the way you intend, view them at different screen sizes by clicking on the tablet and phone icons as in the following example.\n\nColumns are versatile"
  },
  {
    "title": "Shopify Code Generation Options - Builder.io",
    "url": "https://www.builder.io/c/docs/shopify-code-generation-options",
    "html": "Shopify Code Generation Options\n\nshopify app\n\nBuilder supports a wide variety of needs and workflows. In this guide, we will break down the different options and why you might choose each.\n\nDefault code generation\n\nOur default code generation tries to strike a balance between speed, flexibility, and compatability. It supports all features of our platform, such as server side rendering (for best possible page speed), using custom liquid code and snippets, liquid targeting, and more\n\nHow it works\n\nInstall code\n\nModel code\n\nContent code\n\nThis is the code you add where you want a Builder section to show up\n\n{% include 'model.my-section.builder' %}\nWhen to use this\n\nIf you are not sure which option to use in this doc, this is a good one to start with and is the default.\n\nTip: When using the default code generation option, Builder writes code to your store's theme. If you are using any sort of version control outside of the Shopify admin, or are pulling your theme down to develop locally and then pushing changes back up, you will need to make sure you pull the latest from your production theme to ensure all Builder created files will not be overwritten or deleted. If you push new theme code that removes the Builder created files, Builder created sections or pages may disappear or malfunction.\n\nRender code generation\n\nThis option works the same as above, but uses the render tag instead of include. The render tag is best for performance, but requires none of your code uses the include tag, which many stores and integrations use. The include tag will not load inside of any content in a render tag, but will display an error instead due to how Shopify has implemented this feature.\n\nHow it works\n\nInstall code\n\nModel code\n\nContent code\n\nThis is the code you add where you want a Builder section to show up\n\n{% render 'model.my-section.builder' %}\nWhen to use Render code generation\n\nThis option is a best practice if you don't use include in your store's theme code. Also, if you already use render throughout your code, this may be required as using include (the default code generation) can show errors in your store.\n\nHow to enable Render code generation\n\nFrom your settings page at builder.io/account/organization go to advanced settings and choose the advanced tab and turn on use render tag instead of include\n\nMetafield code generation\n\nFor some use cases, it is preferable to not have Builder generate many files. This can be helpful if you manage your code in Git, push code often, or generally want less files in your theme code.\n\nWith this option, you only need one file per model in Builder. All content is saved in meta fields, so the same content works automatically across themes (vs having some parts of content or files be theme specific like in the above options).\n\nWith this option, server side rendering is still supported, but not with any custom liquid code or snippets within Builder content.\n\nHow it works\n\nInstall code\n\nModel code\n\nThis is the code you add where you want a Builder section to show up\n\n{% render 'model.my-section.builder' %}\nEnabling metafield code generation\n\nTo enable this option, go to builder.io/models, choose the model you want to turn this on for, choose show more options and turn on Use Shopify metafields\n\nWebcomponents\n\nFor some use cases, you want complete control of how content loads on your site. For this, you can use our Webcomponents SDK and have Builder generate 0 code for you. This content will load in the browser only, and you can't use any liquid code or targeting (but can use custom targeting).\n\nHow it works\n<script async src=\"https://cdn.builder.io/js/webcomponents\"></script>\n<builder-component model=\"my-section\">Loading...</builder-component>\n\nSee our webcomponents SDK docs for more\n\nEnabling webcomponents\n\nTo enable this option, go to builder.io/models, choose the model you want to turn this on for, choose show more options and turn on Render client-side only\n\nHigh Speed Mode\n\nWe also have an experimental code generation mode called High Speed Mode.\n\nOther SDKs and APIs\n\nBuilder has many additional integration options you can find here. For instance, if you use React or Vue you can add those integrations directly onto your Shopify store, or even use our HTML API.\n\nHow it works\n\nSee the integration examples below and you can find more info here.\n\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\nAndroid\nSwift\nReact Native\nShopify\nGraphQL\nJS\nWebcomponents\nimport { BuilderComponent, builder } from '@builder.io/react'\n\n  builder.init('YOUR_KEY')\n  builder.apiVersion = 'v3'\n    \n  export const MyComponent = () => {\n    const [builderContentJson, setBuilderContentJson] = useState(null)\n  \n    useEffect(() => { \n      builder.get('my-section', { url: location.pathname })\n        .promise().then(setBuilderContentJson)\n    }, [])\n  \n    return <BuilderComponent model=\"my-section\" content={builderContentJson} />\n  }\n\n  // Register your components for use in the visual editor!\n  // https://www.builder.io/blog/drag-drop-react\n  const Heading = props => (\n    <h1 className=\"my-heading\">{props.title}</h1>\n  )\n  \n  Builder.registerComponent(Heading, { \n    name: 'Heading',\n    inputs: [{ name: 'title', type: 'text' }]\n  })\n\nLearn more\nEnabling custom SDK/API usage\n\nAll of these options work out of the box. Simply by publishing content you can access any of it via any SDK or API. Just know that instead of using liquid snippets like {% include 'model.my-section.builder' %} you would integrate in JavaScript like the examples above.\n\nYou will also want to turn on Render client side only for each model you want to ingegrate this way to avoid any unnecessarily generated liquid code.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Managing Your Organization - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-organizations?_host=www.builder.io#managing-your-organization",
    "html": "Managing Your Organization\n\nAn Organization is the top-most entity in Builder and contains users and Spaces.\n\nViewing and editing account details\n\nBuilder creates your first Organization automatically the first time you sign in.\n\nTo view or edit account details for your Organization, go to the Organization's Settings. With Admin permissions, you can:\n\nEdit the name of an Organization\nEdit and view billing information\nAccess private key information\nView invoices\nManage users\n\nThe following image is a screenshot of the Organization-level Settings, which features the Organization tab with account information and users, as well as the My Profile tab, which includes information about the name of the Organization and user account info. This document discusses each section in detail.\n\nManaging Spaces\n\nOrganizations contain Spaces. This means that you can access high-level data about a Space or create new a Space from within your Organization.\n\nAdding Spaces\n\nTo view all the spaces in an Organization, along with the number of users, bandwidth, and page views for those Spaces:\n\nGo to the Organization's Spaces tab.\nTo optionally filter data on the available spaces, click the three dots at the upper right and select a month and year.\nTo create a new Space within this Organization, click the + New Space button. Each space will have separate content, separate models, and separate Public API Keys.\n\nYou can also create a new Space by going to your Organization using the fly-out menu. Under your Organization, click + New Space.\n\nArchiving Spaces\n\nTo remove a Space from an Organization, you must archive that Space. Visit the Archiving a Space instructions in Managing Spaces.\n\nManaging payment and billing\n\nTo manage payment and billing information for your Organization:\n\nGo to the Organization Settings.\nTo the right of Payment, click Add Payment Info to add a credit card or Update Billing Info as required.\n\nSelf-Service customers can pay for the subscription with American Express, MasterCard, and Visa credit cards. Enterprise customers have the option of paying with ACH or wire transfer.\n\nViewing invoices\n\nTo view invoices for your Organization:\n\nGo to the Organization Settings.\nTo the right of Invoices, click View.\nAccessing invoices for Enterprise, Shopify, and Legacy plans\n\nEnterprise plans\n\nIf you need to change payment methods or access invoices, contact finance@builder.io.\n\nBuilder invoices for Shopify app users\n\nYou can find billing and invoices through Shopify's billing platform. Review your Shopify invoice to see any Builder charges.\n\nLegacy plans\n\nFor older accounts on legacy self-serve plans that only have a single space, you can see invoices within the Space Settings.\n\nManaging Private Keys\n\nPrivate API Keys help you keep certain content private. For detailed information on Private API Keys, see the Managing Private API Keys section of Using Builder API Keys.\n\nManaging users\n\nYou must have users at the Organization level as well as in the Space they work in. Set up your users in this order:\n\nSet up your users in the Organization.\nSet up your users in the Space you want them to access.\n\nFor detailed instructions, see Managing Users.\n\nViewing Organization insights\n\nenterprise plans\n\nViewing the contents of the Insights tab for an Organization is an add-on feature available on the Enterprise plan.\n\nWhen this feature is enabled, Admins can access data such as who the most active users are, which, for example, can inform re-allocating user licenses based on activity.\n\nAdmins for the Organization have access to the Organization Insights, accessible from the Builder left sidebar. Organization Insights show you, by Space:\n\nUser names\nUser e-mail addresses\nUser role\nLast sign-in date\nCreation date\nLast refresh date\nDeleting an Organization\n\nIf you need to delete an Organization, contact us.\n\nWhat's next\n\nTo learn more about what's inside an Organization, see Roles and Permissions, Settings, and Spaces.\n\nIf you want to jump right in, visit Popular Tutorials."
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/In%20addition,%20you%20can%20display%20the%20Comments%20by%20clicking%20the%20Notifications%20icon%20to%20open%20the%20fly-out%20menu.%20This%20menu%20only%20displays%20if%20there%20are%20comments.%20If%20there%20are%20no%20comments,%20the%20notification%20bell%20icon%20is%20grayed%20out%20and%20inactive.%20Page-level%20comments%20are%20at%20the%20top%20of%20the%20Comments%20fly-out%20menu%20with%20block-level%20comments%20listed%20below.%20%20The%20following%20image%20shows%20a%20blue%20dot%20on%20the%20Notifications%20bell%20icon,%20indicating%20that%20there%20are%20comments,%20and%20a%20list%20of%20comments%20in%20the%20fly-out%20menu.%20%20It%20also%20shows%20the%20Layers%20tab,%20which%20you%20can%20always%20check%20for%20comments.",
    "html": ""
  },
  {
    "title": "Make a Landing Page: Step 1 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-1?_host=www.builder.io#make-a-landing-page",
    "html": "Make a Landing Page\n\nThe Make a Landing Page series guides you through building a page in Builder from scratch. By the end of the series, you'll have built a beautiful page with a hero, columns, and quick, but sophisticated design elements. You'll learn how to:\n\nBuild sections of a page from scratch\nBuild what you see using alignment, columns, and styles\nMake your page look great on all devices\nWhat you'll build\n\nYou'll build a whole page from the top down with a wide hero image, copy, a button, and a layout that looks and behaves like a modern site that invites confidence in the brand.\n\nPrerequisites\n\nTo follow along in Builder, make sure you have the following:\n\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nA Builder account. If you're just trying Builder out, you can do everything in this series with a free account.\nBuilding a hero\n\nThe first video in this series shows you how to:\n\nCreate a page\nCreate a full-width hero image at the top of your page\nAdd copy and a button to the image\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nCreate a new page\nIn Builder, on your Content tab, click the +New button, give your new page a name, and click Create Page.\nChoose the Blank page rather than one of the Templates.\nAdd a photo and text\nInto the +Add Block section on your new page, drag a Box from the Insert tab.\nNow drag an Image block into the Box you just added. Edit the Image block to choose your photo.\nOnce your photo appears, drag a Text block onto it. This will contain the large headline. You'll notice the image shrinks to the height of your new Text block.\nClick your Image and on the Style tab, give your image a min-height. Make it 500px in this instance.\nChange the font size to 50px and the color to a contrasting color. Here we made it white.\nCenter your Text box vertically by selecting it, then choosing the center vertically icon in the Align section of the Style tab.\nFor the subhead, drag another Text box onto your picture. On the Style tab, make the text 25px. In the Align section of the Style tab click the Up arrow to push this subhead up.\nTo bring the header and subhead together now, select the header, and click the Down arrow this time.\nAdd a button\nTo add your button, drag the Button block from the Insert tab onto your photo just under the subhead. You'll notice the Button is full width.\nSelect the Button, and on the Style tab choose the button background color. Here we chose white, so we also changed the font color to black.\nChange the Button's padding using the Style tab. Make it about 65px on the left and 65px on the right. Change the max-width to 300px.\nNext, also in the Style tab, click the center horizontally icon. Now to move it up, click the up arrow icon.\nThe video shows you how you can also change the margins to move the Button a bit more.\nIf you want to match the Everlane button's style, you can increase the border radius from the Style tab's Border section."
  },
  {
    "title": "Customizable Breakpoints - Builder.io",
    "url": "https://www.builder.io/c/docs/customizable-breakpoints",
    "html": "Using Customizable Breakpoints\n\nWhile Builder offers default breakpoints that work for most designs and apply automatically, sometimes a design necessitates custom breakpoints specific to your layout.\n\nPrerequisites\n\nTo get the most out of using customizable breakpoints, you should already be familiar with:\n\nUsing Breakpoints to Build Responsively\n\nTo use custom breakpoints, you must:\n\nUse a supported SDK.\nHave permissions to edit designs; that is, you're an Admin, Designer, or Developer.\n\nNote: Builder's Shopify app does not support custom breakpoints.\n\nCustomizing breakpoints\n\nChanges you make to your breakpoint settings affect all content in a whole Space. However, in order for the breakpoints to apply to a particular content entry, you must publish or re-publish that content entry.\n\nSupported SDKs for custom breakpoints\n\nThe following table lists the SDKs you can use custom breakpoints with as well as supported versions and NPM packages.\n\nSDK\tVersion\tNPM Package\n\nReact\n\n\t\n\n≥ 2.0.9\n\n\t\n\n@builder.io/react\n\n\n\n\nQwik\n\n\t\n\n≥ 0.0.31\n\n\t\n\n@builder.io/sdk-qwik\n\n\n\n\nReact Native\n\n\t\n\n≥ 0.0.13\n\n\t\n\n@builder.io/sdk-react-native\n\n\n\n\nSolid\n\n\t\n\n≥ 0.0.21\n\n\t\n\n@builder.io/sdk-solid\n\n\n\n\nSvelte\n\n\t\n\n≥ 0.0.7\n\n\t\n\n@builder.io/sdk-svelte\n\n\n\n\nVue\n\n\t\n\n≥ 0.0.5\n\n\t\n\n@builder.io/sdk-vue\n\nSetting and using custom breakpoints\nGo to Account Settings.\nClick on the pencil icon next to Customize Breakpoints.\nEdit the breakpoints using pixels.\nClick Update Breakpoints to save your changes.\nPublish or re-publish content entries to which you'd like to apply the new custom breakpoints.\n\nThe image below shows the Customize Breakpoints dialogue in Account Settings.\n\nIf you are using a supported SDK, you can also access the Custom Breakpoints dialogue directly from within the Visual Editor:\n\nHover to the right of the device icons and click on the dropdown arrow.\nClick on Customize Breakpoint Settings to edit the breakpoints as above.\nViewing custom breakpoints\n\nIn the Visual Editor, hover over the Desktop, Tablet, or Phone icon to display the breakpoints that currently apply to that view.\n\nWhen there are custom breakpoints applied to a view, Builder displays a small blue dot to the upper right of the view's icon.\n\nThe image below shows the hover state of the tablet icon with a custom breakpoint of 600px to 909px:\n\nIf you're using a supported SDK, Builder displays a dropdown arrow that you can click to open the Customize Breakpoints panel. Here, you can view the current breakpoints and click the Customize Breakpoints Settings button to access and edit the settings.\n\nRestoring default breakpoints\nGo to Account Settings.\nClick on the pencil icon next to Customize Breakpoints.\nClick Restore Default Breakpoints.\nClick Update Breakpoints.\n\nAny changes you make to the breakpoints affects all content entries in a Space. However, you must publish any content entries in which you'd like to use the updated breakpoints.\n\nWhat's next\n\nRefine your use of breakpoints with a solid foundation in responsive techniques. For more information, see:\n\nThe Box Model\nHow Width Affects Layout\nThe Changing styles by device type section of Margins and Padding"
  },
  {
    "title": "Fixing responsive layouts - Builder.io",
    "url": "https://www.builder.io/c/docs/fixing-layouts",
    "html": "Fixing Responsive Layouts\n\nA block's ability to scale appropriately to screen size, also known as its responsiveness, helps improve user experience, or UX. If your layout is responding counter to your intention, check this article for the most common helpful tips.\n\nEvery project is unique and when one needs help, it's best to make adjustments with a few guidelines in mind:\n\nWork methodically and consider working in a duplicate page if experimenting might significantly change the project.\nRead The Box Model. This doc lays out the fundamentals of layout and shares helpful pointers.\nIf a block is overflowing the boundaries of its parent container, consider adjusting the layout so that all elements naturally stay within their own containers, as this makes building responsively faster and requires fewer tweaks and less maintenance. Make sure a containing block doesn't have a fixed width that's smaller than the width of the nested block. Read How Width Affects Layout for valuable information on how this can happen.\nCheck widths and remove any fixed widths. If you're new to CSS, reset widths to their block default, working from the most obviously in-need-of-help block followed by its parent container and any containers close by or that are overlapping.\nUse absolute positioning sparingly or avoid it if possible. Position absolute pulls a block out of the flow of the page and can have surprising results for those new to CSS. If you decide to use absolute positioning, use position relative on the nearest possible containing block so that the positioning of the nested block is relative to the containing block rather than to the entire layout.\nIf there's an absolute positioned block in the Layers tab but not in the Visual Editor work area or preview, select the layer and then check the Style tab Visibility section as well as the CSS Properties section. Position absolute can potentially place a block off the screen. To find the Block, remove positioning and any margins or padding that might be pushing it out of the viewport.\nWhat's next\n\nIf you're still learning your way around building responsively, make sure you've read our articles on building responsively.\n\n\n"
  },
  {
    "title": "Artboard Mode - Builder.io",
    "url": "https://www.builder.io/c/docs/artboard",
    "html": "Artboard Mode\n\nWith Artboard mode, you can engage with your entire Page or Section, zoom in and out, edit, and have Mobile Preview open while you work.\n\nEnabling Artboard mode\n\nTo enable Artboard mode:\n\nOpen a Page or Section content entry.\nIn the Visual Editor, click the Artboard icon at the center top of the Visual Editor.\nTo exit Artboard mode, click the Artboard mode icon again.\n\nThe video below shows how to enable Artboard mode and engage with the Artboard UI. Written instructions are included below the video.\n\nUsing Artboard mode\n\nBy default, two views open when you open Artboard mode; the editable view on the left—the Artboard—and the Mobile Preview to the right.\n\nEditing\n\nTo Edit while in Artboard mode, use the same actions as when in the standard default Visual Editor view; for example:\n\nDouble-click on any element in the Artboard pane to open its Edit dialogue.\nIf you prefer inline text editing, toggle it on in a Text edit dialogue.\nTo add blocks, drag and drop from the Insert tab.\nZooming in and out\n\nWith a touchpad, two-finger pinch to zoom in and out and two-finger drag to move the artboard. Alternatively, use the keyboard shortcut Cmd/Ctrl + or -.\n\nResizing\n\nTo resize the Artboard, hover over the artboard's left or right, and when the cursor changes to a horizontal arrow, drag the edge to the desired size.\n\nAs you resize the Artboard, the layout adapts to the screen size, which shows how the design displays at different viewport widths.\n\nMobile Preview\n\nWhen you enable Artboard mode, Mobile Preview displays by default so that any changes you make are shown as they would appear on a phone. Mobile Preview isn't editable—it is only a preview that updates as you edit the Artboard.\n\nTo toggle off Mobile Preview, click the Mobile Preview icon.\n\nWhat's next\n\nFor more ways to use the Visual Editor, visit:\n\nUsing Mobile Sidecar Preview section of Breakpoints\nCanvas Mode for Responsive Layouts"
  },
  {
    "title": "Canvas Mode for Responsive Layouts - Builder.io",
    "url": "https://www.builder.io/c/docs/canvas-mode",
    "html": "Canvas Mode for Responsive Layouts\n\npreview\n\nUsually, when creating a responsive design, designers and developers have to test and retest settings and layout at various screen widths and then make changes to keep the design looking great.\n\nWith Canvas mode, you can create a layout as usual and then click a button to make the layout responsive. This minimizes the detailed work it can take to create a responsive design and speed up your workflow.\n\nUsing the Canvas block\n\nTo use the Canvas block:\n\nIn the Visual Editor, go to the Insert tab and expand the Layout section.\nDrag and drop a Canvas block into the work area. Resize the Canvas block as needed.\nDrag and drop other blocks into the Canvas block and position them freely by dragging and resizing them. \nWhen you have all the elements in place, make sure the Canvas block is selected and click the Make Responsive button at the bottom of the Canvas block.\nAs this feature is in preview, check each screen width and make any necessary tweaks.\nClick the feedback icon to let us know how it went. This helps us improve this feature.\n\nTip: You must click Make Responsive for Builder to apply responsiveness to the Canvas contents.\n\nThe video below shows adding a Canvas block and using it to create a responsive layout.\n\nConverting a block to a Canvas block\n\nTo change a block into a Canvas block:\n\nIn the Visual Editor, select the block you'd like to convert.\nIn the Style tab, open the Inner Layout section and click the Canvas button — the one with the paintbrush icon.\nEdit the block's contents as needed.\nSelect the Canvas block and click the Make Responsive button at the bottom of the Canvas block.\n\nThe next video shows a Box with some contents being converted to a Canvas block and then being made responsive.\n\nWe'd love your feedback on Canvas Mode\n\nBecause Canvas Mode is currently in preview, your feedback is especially important. Let us know what you think by always clicking on the How did our AI do? prompt. This helps us make the feature better.\n\nWhat's next\n\nWhile Canvas Mode can make it much easier to create responsive layouts, it can also help to have an idea of how responsive design works. For detail, visit the Responsive Design documentation."
  },
  {
    "title": "History - Builder.io",
    "url": "https://www.builder.io/c/docs/history",
    "html": "Accessing Content History\n\nBuilder maintains a history of previous versions, which you can restore at any time.\n\nThe amount of available history depends on your plan:\n\nPlan\tAvailable history\n\nFree\n\n\t\n\n7 days\n\n\n\n\nBasic\n\n\t\n\n30 days\n\n\n\n\nGrowth\n\n\t\n\n90 days\n\n\n\n\nEnterprise\n\n\t\n\n365 days\n\nFor a list of saved versions of a Page or Section, go to the History tab. A list of versions saved by Builder is displayed along with the timestamp and username.\n\nUse the History tab to access:\n\nBuilder-autosaved versions\nPublished versions\nCheckpoints, which save when you press Cmd + s on a Mac or Ctrl + s on a PC.\n\nThe History icons provide the following functions.\n\nCode < >: access the code diff\nCamera: open a visual diff\nCurved back arrow: revert to that version\n\nThe next video shows how to access each of these features:\n\nWhat's next\n\nFor more information, visit Working with Versions."
  },
  {
    "title": "Using Markdown - Builder.io",
    "url": "https://www.builder.io/c/docs/markdown",
    "html": "Importing Markdown in the Visual Editor\n\nMarkdown is a type of shorthand for writing documents that browsers can turn into HTML. Markdown is often the language of choice for README files on GitHub, blog posts, and documentation, to name a few. Markdown's appeal lies in its speed of use and minimal syntax.\n\nWith the Import Markdown feature, you can import or write markdown right inside of Builder. When you import your markdown, all of your content becomes standard Builder elements that you can edit right in the Visual Editor.\n\nThis document covers:\n\nAn quick intro to Markdown\nAdding Markdown content\nAdding Markdown to existing Builder content\nImporting a Markdown file\nA quick intro to Markdown\n\nMarkdown is capable of many of the same things as HTML. If you're new to Markdown and would like to use it, check out Basic writing and formatting syntax in the GitHub documentation.\n\nThe following is an example of basic Markdown that a person writes before a browser turns it into HTML. The syntax is minimal compared to full HTML:\n\n# I am an h1 heading\n\nI am a paragraph with a [link to Builder.io](https://www.builder.io/).\n\n## I am an h2 heading\n\n- list item\n- list item\n- list item\n\nAnd here's a picture:\n\n![Alt text here: this is our logo]\n(https://www.your-site.com/logo.png)\n\n```\nI'm a code block!\n```\n\n\nThe image below is how a browser might display the above markdown:\n\nThe image above is from the interactive Markdown Live Preview, an open-source project by Hideaki Tanabe, where you can learn by editing.\n\nAdding Markdown content\n\nIn the Visual Editor:\n\nPress Cmd/Ctrl + k.\nSelect Import Markdown.\nType or paste in your markdown.\nClick the Import button.\n\nThe following video demonstrates these steps.\n\nAdding Markdown to existing Builder content\n\nIn the Visual Editor:\n\nClick on the block just before where you'd like to add content.\nPress Cmd/Ctrl + k.\nSelect Import Markdown.\nType or paste in your markdown.\nClick the Import button.\n\nThe following video demonstrates these steps.\n\nImporting a Markdown file\n\nIn the Visual Editor:\n\nPress Cmd/Ctrl + k.\nSelect Import Markdown.\nClick Upload a File.\n\nIf you have an embed in your markdown, be sure to make it a proper embed in Builder by dragging in an Embed block from the Insert tab and adding the embed link to the block's Edit dialogue.\n\nThe following video demonstrates these steps.\n\nWhat's next\n\nThe Command Palette serves as a shortcut for many Builder features and can help you speed up your Builder workflow. For more information, see Getting Around Builder with the Command Palette."
  },
  {
    "title": "Asset Library - Builder.io",
    "url": "https://www.builder.io/c/docs/asset-library",
    "html": "Organizing with the Asset Library\n\nYour team can organize and search for images and videos with the Asset Library.\n\nUploading assets\n\nTo add an item(s) to the Asset Library:\n\nGo to the Asset Library.\nClick Upload Files.\nSelect the files you want to upload.\n\nThe following video shows uploading assets to the Asset Library. The first example is a single upload and the second shows selecting more than one asset for a bulk upload.\n\nCreating a folder\n\nTo create a folder in the Asset Library:\n\nGo to the Asset Library.\nClick + New Folder.\nName the new folder.\n\nThe video below shows this process:\n\nMoving or renaming an asset\n\nTo move or rename an item to a folder in the Asset Library:\n\nGo to the Asset Library.\nHover over the item you want to move and click the Edit Asset icon (the pencil icon).\nIn the dialogue that opens, rename the asset or select another folder.\nClick the Save button. \n\nThe next video shows moving and renaming an asset.\n\nDeleting a folder\n\nTo delete a folder from the Asset Library:\n\nGo to the Asset Library.\nSelect the folder you want to delete and click the Trash icon.\nIn the dialogue that opens, click the OK button to delete.\n\nThe video below shows deleting a folder in the Asset Library:\n\nWhat's next\n\nFor more information on organizing your content, visit Organizing Templates and Symbols with Folders."
  },
  {
    "title": "Filtering content - Builder.io",
    "url": "https://www.builder.io/c/docs/filtering-content",
    "html": "Filtering Content\n\nFiltering your content list in Builder can make it easier to find the content you're looking for.\n\nTo create a filter, in the list of content for whichever Model you're searching, such as Page or Symbol, click the filter icon in the top-right bar of the editor. Then click the +Filter button.\n\nClick Choose a Property, then in the dropdown, select the property you want to search on.\n\nIn the screenshot below, pages are filtered by a Published status of Published.\n\nUsing the +Add button, you can add more conditions. For example, you can search for part of the Page Title by using Contains and typing your text in the field to the right.\n\nCustom queries\n\nIf you'd like to create a more customized filter, select Custom query at the bottom of the filter list. Here you can write your own MongoDB query to fetch content based on any parameter you set. \n\nAfter choosing Custom Query, click Edit Code and enter your query.\n\nFor example, this query finds the page where the title equals importing pages.\n\n{  \"data.title\": { \"$eq\": \"importing pages\" } }\nSaving filtered views\n\nAfter setting filter parameters, you can save the search as a view. When saving the view, you can choose to save it to Your Views so it's only available to you, or Organization Views so every user in the organization can see it.\n\nClick Save View in the upper right corner, and fill in the details in the Save View menu that opens. You can edit or add parameters to the filter while in this dialog as well.\n\nClick the Save button.\n\nTo find previously saved views, scroll down the left-hand menu past Models and look for the name of your view.\n\nThe following video shows the creation of a filter and how to save and find the view later.\n\nViewing archived content\n\nTo access archived content you can either search for the content by name or create a filter for archived content.\n\nTo create a filter for archived content: \n\nOn the content list, select the filter icon and set the property as published is archived.\n\n Now you can save this filter as a saved view and reference it when needed.\n\nWhat's next\n\nFor more content management tips, refer to:\n\nUsing the History Tab\nWorking with Versions\nEditing Your Site Using the Builder Chrome Extension"
  },
  {
    "title": "Overlay elements onto images and video - Builder.io",
    "url": "https://www.builder.io/c/docs/overlay-elements-onto-images-and-video",
    "html": "Overlaying Elements onto Images and Video\n\nImage and video blocks can act as containing elements just like a Section or Box, which means you can overlay elements on them.\n\nTo create an overlay:\n\nDrag and hover your elements on top of your image or video until a light blue overlay displays. This will confirm that you are dropping your elements on top, rather than above or below.\nDrop the element. If adding more than one element, consider grouping them to help you style them more easily. Press Cmd/Ctrl + g or right-click and select Group Selection from the context menu.\nStyle as desired.\n\nTo confirm where you've dropped the element, you can always check the Layers tab. If needed, you can also rearrange the layers by dragging them in the Layers tab.\n\nThe video below shows adding a Text block and a Button on top of an Image. It also demonstrates grouping and styling the group, including adjusting the opacity of the group. Access Opacity in the Style tab and adjust the opacity setting with the element selected.\n\nWhat's next\n\nTo learn how to change a layout to a columns layout, refer to Convert a Layout to Columns.\n\n\n"
  },
  {
    "title": "Using the Studio - Builder.io",
    "url": "https://www.builder.io/c/docs/studio",
    "html": "Using the Studio\n\nenterprise plans\n\nWith the Studio feature in Builder, you can open any of your published Pages, reveal the sections of the Page that are Builder content, and display the Page as it appears on Phone, Tablet, or Desktop.\n\nEnabling the Studio\n\nBy default, the Studio Tab does not display. To enable the Studio Tab so that it displays in the Builder UI:\n\nGo to the Settings for your Space.\nClick on the Edit button next to Advanced Settings.\nIn the Advanced Settings dialogue that opens, set the Show Studio Tab toggle to the on position.\n\nThe video below shows this process.\n\nUsing the Studio\nMake sure the Page you want to open in the Studio has been published.\nClick on the Studio icon in the Left Sidebar. Before this icon appears, you must enable the Studio tab as in the first section of this document.\nOn the left of the Studio, specify the URL of the Page you'd like to open and press Enter.\nWhen the Page opens, adjust the settings according to your needs, such as the URL, whether or not to show Builder content, and device view.\n\nThe next video shows this process.\n\nWhat's next\n\nTo explore more of Builder's features, visit Popular Tutorials."
  },
  {
    "title": "Localizing a Whole Page - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-whole-page",
    "html": "Localizing a Whole Page\n\ngrowth plans\n\nTo deliver entirely different pages based on visitor location preferences, use targeting by locale. In this way, you can deliver completely different designs and content based on locale.\n\nPrerequisites\n\nTo successfully use localization in Builder, make sure you've already done the following:\n\nAdded locales in Builder\nStep 1: Setting up localization by page\n\nTo use localization for a whole page, create a duplicate page with design or content changes and then target the locale. To localize the whole page, take the following steps:\n\nDuplicate the page you want to localize.\nClick the targeting icon at the top of the Visual Editor.\nIn the Targeting modal, click + Target and select Locale.\nChoose the locale you want to use.\nStep 2: Integrate with your codebase\n\nThe last part of setting up localization is to integrate. For instructions, continue to Integrating Builder Localization with your code."
  },
  {
    "title": "Localization of Individual Blocks - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-by-block",
    "html": "Localizing Blocks\n\ngrowth plans\n\nIn the Builder Visual Editor, you can configure individual blocks to deliver content specific to language and region preferences.\n\nFor example, if you wanted to differentiate copy or images for a visitor in Germany or a visitor in Mexico, you could adjust a few settings on the block and add locale-specific content in the block's localization settings.\n\nYou can individually localize many blocks, including the following, in the Visual Editor:\n\nText\nImages\nColors\nSymbol inputs\n\nThe process is the same for each in that you hover over the label in the Edit dialogue to show the Localize icon, click the icon, and add content to each locale.\n\nPrerequisites\n\nTo successfully use localization in Builder, make sure you've already done the following:\n\nAdded locales in Builder.\nIntegrated Builder localization with your code.\n\nThe last part of setting up localization is to integrate. For instructions, continue to Integrating Builder Localization with your code.\n\nConfiguring a single block for localization\nDouble click the block to open the Edit dialogue.\nHover over the label of the block; for example, the label Text in a Text edit dialogue, and click the Localize icon.\nIn the locale dropdown, choose the locale you'd like to edit. As a best practice, always set a value for the Default locale in case none of the other locales are in the user's settings.\nEnter content per locale.\n\nThe following video demonstrates adding localized content with two examples:\n\nA Text block\nAn Image block\n\nThis video also shows how to select the locale for the entire content entry, which you can do by selecting the local at the top of the work area.\n\nTip: If you don't have any locales, click the link to Add a new locale, which displays when you hover over the locales dropdown. You can also add multiple locales in a single dialogue as outlined in Adding locales in Account settings.\n\nTargeting and block localization\n\nTo customize content for specific groups of people within your different language options, you can use targeting, and within this targeted content, you can localize inputs or fields.\n\nTo use this feature:\n\nPass the locale property to the BuilderComponent when integrating Builder into your app. This ensures that the content in the Visual Editor is localized based on the specified locale.\nWhen making an API call to retrieve the content, include the locale parameter, and pass the current locale value. This makes sure that the content returned from the API call is specific to the desired locale.\n\nThis streamlined process makes the localization workflow more direct, helping you efficiently manage localized content within the Builder environment, without the need for additional data connections.\n\nconst Page = await builder.get(page, {\n  options: { locale }, // Pass the locale property to the options object\n  userAttributes: {\n    urlPath: `/about`, \n    locale, // Pass the locale property to the userAttributes object\n  },\n}).toPromise();\n\n\n\nTo enable field localization, explicitly mark them as localized in the model settings. This ensures that the content within those fields can be customized based on different languages or regions.\n\nAdditionally, you can localize inputs by clicking on the globe icon within the Edit dialogue. This way you can provide localized values for inputs such as text or images.\n\nBy default, all inputs can be localized unless you specifically set the localized property to false when registering your custom component. This gives you flexibility in deciding which inputs can be localized and which ones should remain static across different locales.\n\nRemoving block-level localization\n\nTo remove localization from a selected block:\n\nOpen the Edit dialogue for the block. Do this by double-clicking the block or selecting the block and clicking the Edit button.\nThis step removes the localized content. Hover over the dialogue label and click on the Localize icon.\n\nBy toggling off localization for a block, the localization dropdown no longer displays, and the content is removed. The following video demonstrates this process."
  },
  {
    "title": "Integrate Localization - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-integrate",
    "html": "Integrating Builder Localization with Your Code\n\ngrowth plans\n\nTo use localization with Builder, you must integrate with your codebase so that your app and Builder localization coordinate with one another. This entails:\n\nPassing the locale to the BuilderComponent or RenderContent.\nPassing the locale value in the options object when fetching content from the API to get JSON with resolved, localized values.\n\nThough the syntax varies depending on the framework, the concept is the same. Select your framework below for examples.\n\nTip: Passing the locale to the BuilderComponent or RenderContent emits the locale while previewing or editing so the Visual Editor displays localized values.\n\nWhole-page localization\n\nFor whole-page localization, specify your locale as a targeting attribute when fetching your Builder content from the Content API.\n\nNext\nNuxt\nAngular\nREST API\nPass the locale value in userAttributes so that Builder can use it to determine the correct localized content to return.\nIn builder.get(), pass in the locale in the options object. This ensures that the API sends the JSON with resolved, localized, values.\nRender the localized content with the BuilderComponent , passing the locale as a prop.\n// pages/my-page.js\n\nconst localizedContent = await builder\n  .get(modelName, {\n    url: myPath,\n    // myLocale can be any locale that you've added,\n    // see https://www.builder.io/c/docs/add-remove-locales.\n    userAttributes: { locale: myLocale },\n    options: {\n      locale: myLocale\n    }\n  }).toPromise();\n\n// Render your content.\n<BuilderComponent locale={myLocale} model={modelName} content={localizedContent} />\nLocalizing by block\n\nFor more fine-grained control, you can localize individual blocks within your content. This approach depends on populating your content's state with your locale:\n\nNext\nNuxt\nAngular\nREST API\n\nRender the localized content with the BuilderComponent , passing the locale as a prop.\n\n// pages/my-page.js\n\n// pass locale you want to render down as prop.\n<BuilderComponent\n  model={modelName}\n  content={content}\n  locale={myLocale}\n/>\n\nHow Builder transforms objects with locale values\n\nFor example, given a greeting object, with localized values for en-US and fr-Fr, Builder would transform it to Hello or Bonjour depending on the locale:\n\n// orginal object with values for each locale\n\"greeting\": {\n  \"en-US\": \"Hello\",\n  \"fr-Fr\": \"Bonjour\"\n}\n\n\nBuilder transforms the object to use the value that corresponds to the locale, as follows:\n\n// locale=en-US\n\"greeting\":\"Hello\"\n// locale=fr-Fr\n\"greeting\": \"Bonjour\"\nWhat's next\n\nWhen your codebase and Builder localization are successfully integrated, you can use any of Builder's localization techniques."
  },
  {
    "title": "Responsive design with Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/guides/responsive-design?_host=www.builder.io",
    "html": "Responsive Design\n\nWhen a layout works across all devices and screen sizes, it is known as having a responsive layout. Responsive design is the practice of building layouts so that the design and accessibility remain intentional on any device.\n\nTip: To create a responsive layout automatically, try out the Builder's Canvas Mode for Responsive Design, which uses AI and the click of a button to make your layout responsive.\n\nThe following video shows a Builder page at different sizes. When building responsively, each screen width maintains its integrity and usability.\n\nConcepts for responsive Builder layouts\n\nCreating layouts in Builder gives you a way to build with no code, and Builder generates the code as you work. Whether you build a layout entirely by hand coding or with a drag-and-drop editor, browsers ultimately calculate layout with one set of rules. Because of this, a basic understanding of how browsers interpret what you build can help you create layouts more efficiently and successfully.\n\nThe following articles show you how to plan, create, and adjust layouts with responsiveness in mind.\n\nThe Box Model: learn how browsers understand layouts and how to plan your own\nHow Width Affects Layout: read about how different width settings on a block can change how the block behaves\nMargin and Padding: learn what they are and when to use them\nUsing Columns for Responsiveness: discover how Builder's built-in Columns block adapts to different screen sizes automatically. You can build entire pages with Columns.\nFixing Layouts: check out this article if you have a layout that needs help responding appropriately to different screen sizes.\n\n\n"
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Builder%20heatmaps",
    "html": ""
  },
  {
    "title": "Adding and Removing Locales - Builder.io",
    "url": "https://www.builder.io/c/docs/add-remove-locales",
    "html": "Adding Locales\n\ngrowth plans\n\nLocalization, or delivering content based on location settings, requires locales; that is, signifiers that indicate language, specific formatting, or content unique to that locale.\n\nThis document covers adding locales in Settings.\n\nExamples of locales\n\nBefore you can use localization, you need to add locales to Builder so your app can deliver the right content to the right audience. Examples of locales include:\n\nar-sa: Arabic, Saudi Arabia\nfr-ca: French, Canadian\nen-nz: English, New Zealand\nzh-hk: Chinese, Hong Kong\nMany more locale codes with standard as well as region-specific codes.\n\nTip: If you're localizing individual text blocks in the Visual Editor, you can add or remove individual locales while in the block Edit dialogue.\n\nAdding locales in Settings\nIn Settings, go to the Targeting section.\nTo the right of Localization, click the Edit button to the right.\nEnter the locales you'd like to use.\nClick the Save locales button.\n\nThe following video shows this process:\n\nWhat's next\n\nNow that you know how to add locales in Settings, you can use your locales throughout your app. For more information, refer to the following documentation:\n\nLocalizing Blocks\nLocalizing a Whole Page"
  },
  {
    "title": "Introduction to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/symbols-intro?_host=www.builder.io",
    "html": "Intro to Symbols\n\nWhen you want to create one element, reuse it throughout your site, and update all instances at once, use a Symbol. When you edit and Publish updates, the Symbol updates apply immediately to all occurrences of that Symbol throughout your app.\n\nYou can use Symbols for any content you want to reuse, such as a header, footer, or products. In fact, you can use it for repeated content that you want to use many places, such as a definition, an introductory paragraph or even a section of illustrated code.\n\nMake it once, reuse infinitely\n\nSave time by creating reusable elements such as headers, footers, navigation, and forms. Updates apply automatically to all instances of your Symbol.\n\nTo create your own Symbol, see How to create a Symbol.\n\nCustomizing your Symbols\n\nOccasionally, you might require an element like a product recommendation section or banner that needs to vary under specific conditions. In such cases, you can detach a Symbol from its source, Making a Symbol inline, which converts it into a standard Builder block. This way you can make inline changes for that particular instance.\n\nFor more on customizing Symbols, visit Adding Inputs to Symbols.\n\nTip: For a reusable component that you can edit individually, see Creating Templates. Templates are like Symbols, but when you edit a Template on a page, the other instances of that Template don't change.\n\nAdding a symbol to another account\n\nAt this time, you cannot transfer a symbol from one account to another. One workaround is to download your symbol and upload it to your other account.\n\nOpen the symbol you want to copy.\nRight click on the symbol and select Download content as JSON.\nCreate a new page in your other account, right click in the editor window, and select Upload builder.json file.\nWhat's next"
  },
  {
    "title": "Dynamic Preview URLs - Builder.io",
    "url": "https://www.builder.io/c/docs/dynamic-preview-urls",
    "html": "Dynamic Preview URLs\n\nWhen you're working on Pages, Sections, or Data previewing your content with working targeting and custom fields can help you understand exactly how your work will render when you publish.\n\nBy default, Builder adds your targeted URL path to the model preview url you define, but there are cases where you need more to calculate the preview URL, such as:\n\nUsing locale codes as top routes, or even different domains per locale\nServing a different site—or top level domain—for mobile or desktop\nSection models that are rendered by a custom field; for example, a blog post model with a slug custom field that you’re rendering on blog/[slug]\nPreviewing live content on your live site and providing a fallback preview on a path, such as your-site.com/blog/_\nUsing custom fields or targeting for specific subpaths; for example /footwear/\nPrerequisites\n\nTo get the most out of this document, you should be familiar with:\n\nEditing and Previewing Your Site with Preview URLs\nCustom Fields\nModels\nExample: Setting up a Dynamic Preview URL on a blog post model\nGo to Models.\nOpen the Page, Section, or Data Model you'd like to add a Dynamic Preview URL to.\nAdd a slug custom field with a type of Text.\nClick on the code icon, < >, to the right of the Preview URL field. This opens a code editor with comments giving more context on this feature.\nAdd your custom code for determining your dynamic URLs.\nClick the X icon to close and click Save on the model.\n\nTip: The Dynamic Preview URLs feature is on by default; however, if the code icon, < >, isn't available on the model in the Preview URL field, check that it is on. Go to Settings > Advanced Settings > Editor. Make sure Advanced Preview URL Logic is toggled to the on position.\n\nThe video below demonstrates these steps on a blog post Section model.\n\nHow the example model and code work together\n\nThe Post Section model in this example has a required slug field so that when a user creates a blog post using the Post model, Builder prompts them to provide a slug.\n\nThe code then uses the slug to create the URL if isLive is true.\n\nThe example code in the video does two things:\n\nIf the content is live, the example code returns a URL that Builder can use to create the Dynamic Preview URL. The first part, you create by providing your site's URL. The second, dynamic part pulls the slug from the example's Post Section model.\nIf the content isn't live, the URL uses a default path, here blog/__builder_editing__. Your path can be different than the example.\n\nBe sure to replace https://your-site.com/your-directory/ with your site and directory. In the video example, the blog is hosted on Vercel, but your URL will be different.\n\n// Check to see if the content is live. If so,\n// use your site's URL followed by the \n// dynamic path you specify.\nif(contentModel.isLive) {\n    return `https://your-site.com/your-directory/${content.data.slug}`\n}\n// If the site's not live, use a placeholder URL\nreturn `https://your-site.com/your-directory/__builder_editing__`\n\nFor an example app, see Builder's Next.js CMS Blog example on GitHub. To use the example with Builder as in the video:\n\nIntegrate the example app with Builder by adding your Public API Key to the .env file.\nCreate a Post section model with at least one required custom field called slug of type Text.\nRun the app and use http://localhost:3000/ as your site in the code snippet.\n\nThe Dynamic Preview URLs feature is on by default; however, if the code icon, < >, isn't available on the model in the Preview URL field, check that it is on. Go to Settings > Advanced Settings > Editor. Make sure Advanced Preview URL Logic is toggled to the on position.\n\nTip: The Dynamic Preview URLs feature is on by default; however, if the code icon, < >, isn't available on the model in the Preview URL field, check that it is on. Go to Settings > Advanced Settings > Editor. Make sure Advanced Preview URL Logic is toggled to the on position.\n\nPreviewing your work with a Dynamic Preview URL\n\nTo use a Dynamic Preview URL, you must have already set up the logic on the model to use your site's live URL and the path you want. Use your Dynamic Preview URL by:\n\nCreate a content entry with the model that uses the Dynamic Preview URL.\nIn the Visual Editor, add or edit content if desired.\nClick the eyeball icon in the upper right and select View Current Draft.\n\nWhen the browser loads your content, the URL should include your URL and path.\n\nThe video below shows creating and previewing a blog post using the example Post Section model with a Dynamic Preview URL from the previous section in this document.\n\nAvailable objects and properties\n\nWhen writing your own custom logic to determine a Page, Section, or Data model preview URL, Builder offers helpful objects and properties:\n\nObject\tExample\tDescription\n\ncontent\n\n\t\n\nconst slug = content.data.slug ,\n\ncontent.data.title\n\n\t\n\na JSON representation of the current state of content\n\n\n\n\nspace\n\n\t\n\nspace.publicKey\n\n\t\n\nthe current space settings\n\n\n\n\ntargeting\n\n\t\n\ntargeting.urlPath\n\n\t\n\nAn object representing the targeting set on content. If a targeting attribute is an enum this value is an array of strings; for example, locale or device.\n\n\n\n\nfetch()\n\n\t\n\nconst settings = await fetch()\n\n\t\n\nUse for running async code. For more information on fetch(), see the MDN documentation.\n\n\n\n\ncontentModel\n\n\t\n\ncontentModel.isLive\n\n\t\n\nThe current content model, such as the Page or Section model you're working with.\n\n\n\n\npreviewDevice\n\n\t\n\nconst isMobile = previewDevice === 'mobile'\n\n\t\n\nThe device choice in the editor, it will be either mobile, tablet, or desktop\n\nThe contentModel object includes several important properties:\n\nisLive: true when the content is currently live on production and not scheduled for a future or prior date.\nstartDate: start date of scheduled publish, if scheduled\nendDate: end date of scheduled publish, if scheduled\nUsage examples\n\nMake sure that your Dynamic Preview URL logic returns a string. Each of the following examples returns a string while using different dynamic features.\n\nExample 1: Returning Blog URLs\n\nA blog might use a check to determine if your content is live and generate a URL that uses your slug or else use a fallback URL for editing based on that condition. Note that slug would be a custom field you add to the model, as in Setting up a Dynamic Preview URL on a model.\n\nif (contentModel.isLive) {\n  return `https://your-site.com/blog/${content.data.slug}`\n}\nreturn `https://your-site.com/blog/_`\n\nExample 2: Determining category\n\nThis example uses a category hero model that you can target at a specific category or all categories:\n\nreturn `https://your-site.com/category/${targeting.category || 'womens'}`;\n\nExample 3: Cart modal upsell\n\nThis returns a URL for a Section model that is for cart modal upsells:\n\nreturn `https://your-site.com/product/${targeting.product || '25752218M'}?addToCart=true`;\n\nExample 4: Returning URLs specific to locale\n\nThis example creates URLs for localized Pages:\n\nconst locale = targeting.locale?.[0] || 'en'\nreturn `https://your-site.com/${locale}${targeting.urlPath}`\nWhat's next\n\nYou can use targeting and custom fields along with Dynamic Preview URLs to significantly enhance the development experience. For more information, see:\n\nTargeting Content in Builder\nCustom Fields"
  },
  {
    "title": "Working with Versions - Builder.io",
    "url": "https://www.builder.io/c/docs/working-with-versions",
    "html": "Working with Versions\n\nIn Builder, you can create as many versions of content entries as you like. Creating multiple versions allows you to test different experiences, target different versions to various audiences, revert back to previous iterations, and more.\n\nThere are two main ways to manage versions with Builder: the Versions Tab in the Visual Editor or directly from the Content List Tab.\n\nHowever, the recommended way to create a version is using the Versions Tab, which is explained here.\n\nThe Versions Tab\n\nFrom the Versions Tab you can:\n\nView all your versions with related details and previews\nLink to the history of the current version\nJump to a different version\nCreate new versions\n\nTo create a new version, click on the Versions Tab, select. +New Version, and give your version a name.\n\nYour new version now appears in the list on the Versions Tab. Note that this version has been scheduled. You can read about scheduling versions of your content in the Scheduling documentation.\n\nThe Content List\n\nYour new version appears in the content list, which is at your builder.io/content page.\n\nCreating a version\n\nThis video illustrates the actions described in the sections above.\n\nNext steps\n\nFor more information on how to work with versioning, visit Using the History Tab."
  },
  {
    "title": "Making a Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/make-a-plugin?_host=www.builder.io#making-a-plugin",
    "html": "Making a Plugin\n\nYou can extend and customize Builder by making your own plugin. With custom plugins you can register custom field types for your Builder model custom fields and inputs for your custom components, custom targeting or symbols.\n\nThis document covers making a minimal plugin to add a custom type for use in a Data model.\n\nTip: All plans can create and submit Builder Plugins. When you're ready to contribute your plugin, head over to GitHub and submit a PR. Make sure to add your plugin to the plugins directory.\n\nPrerequisites\n\nTo get the most out of this document, make sure you are familiar with the following:\n\nTypes of Plugins: get an intro to the different kinds of plugins you can make\nCustom fields: customize field types in models\nData models: define the shape of your data\nExtending the UI with custom types\n\nThis tutorial guides you through creating a plugin with a custom type and custom type editor. By creating custom types in a plugin, you provide rich data types that you can use across the Visual Editor. For example, you can:\n\nCreate custom component inputs that accept structured data fields\nTarget content based on products in a customer's cart\nModel fields that store multimedia content\nEnable Symbol inputs to accept externally hosted documents\n\nEach custom type has a custom type editor, which provides a user interface for selecting values for your custom type fields. For example, editors can fetch external resources and present the user with a browsable list of items or provide menus and fields for data entry.\n\nWith custom types and custom type editors, your users can create and update nearly any kind of data structure beyond the basic types provided by Builder, all from within the Visual Editor.\n\nAfter installing the plugin that registers your custom type editor, the corresponding custom type is available across the Visual Editor, specifically when using the following features:\n\nCustom component inputs\nTargeting content\nModel fields\nSymbol inputs\nStep 1: Create project and install dependencies\n\nCreate a directory for your plugin and open the new director with the following command:\n\nmkdir text-plugin && cd text-plugin\n\nInitialize the project to use npm:\n\nnpm init\n\nPress Enter through the prompts and respond yes to the proposed package.json.\n\nUse npm install to install the dependencies for this project. You can use --save-dev because Builder provides these dependencies for you later. The dependencies are:\n\n@builder.io/app-context: exposes certain APIs to interact with APIs to interact with Builder\n@builder.io/react: enables you to use React to create your plugin\nwebpack: module bundler for JavaScript\nwebpack-dev-server: development server with live reloading\n@babel/preset-react: supports JSX\nbabel-loader: transpiles modern and superset JavaScript, such as JSX using Babel with webpack\n\nPaste the following command, which includes all these dependencies, at the command line:\n\nnpm install --save-dev @builder.io/app-context @builder.io/react webpack webpack-dev-server webpack-cli @babel/preset-react babel-loader\n\nInstall react-quill for the Rich Text editor that this plugin uses:\n\nnpm install react-quill\nStep 2: Set up the files\n\nThis section guides you through creating the project infrastructure by creating the key files and pasting in the contents for each.\n\nReplace the contents of package.json with the following:\n\n{\n  \"name\": \"rich-text-plugin\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"entry\": \"plugin\",\n  \"output\": \"plugin.system.js\",\n  \"main\": \"dist/plugin.system.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"webpack --mode production\",\n    \"start\": \"webpack-dev-server --mode development\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@babel/preset-react\": \"^7.18.6\",\n    \"@builder.io/app-context\": \"^1.0.0\",\n    \"@builder.io/react\": \"^2.0.13\",\n    \"@emotion/core\": \"^11.0.0\",\n    \"babel-loader\": \"^8.2.5\",\n    \"webpack\": \"^5.74.0\",\n    \"webpack-cli\": \"^4.10.0\",\n    \"webpack-dev-server\": \"^4.10.0\"\n  },\n  \"dependencies\": {\n    \"react-quill\": \"^2.0.0\"\n  }\n}\n\n\n// contents of .babelrc\n// use preset-react to support JSX \n{\n    \"presets\": [\"@babel/preset-react\"],\n    \"env\": {\n      \"development\": {\n        \"presets\": [[\"@babel/preset-react\", { \"development\": true }]]\n      }\n    }\n  }\n\n// contents of webpack.config.js\nconst path = require('path');\nconst pkg = require('./package.json');\n\nmodule.exports = {\n  entry: `./src/${pkg.entry}.jsx`,\n  externals: {\n    '@builder.io/react': '@builder.io/react',\n    '@builder.io/app-context': '@builder.io/app-context',\n    \"@emotion/core\": \"@emotion/core\",\n    \"react\": \"react\",\n    \"react-dom\": \"react-dom\"\n  },\n  output: {\n    filename: pkg.output,\n    path: path.resolve(__dirname, 'dist'),\n    libraryTarget: 'system',\n  },\n  resolve: {\n    extensions: ['.js', '.jsx'],\n  },\n  module: {\n    rules: [\n        {\n            test: /\\.(jsx)$/,\n            exclude: /node_modules/,\n            use: [\n              {\n                loader: 'babel-loader',\n              },\n            ],\n          },\n        ],\n  },\n  devServer: {\n    port: 1268,\n    static: {\n       directory: path.join(__dirname, './dist'),\n     },\n    headers: {\n      'Access-Control-Allow-Private-Network': 'true',\n      'Access-Control-Allow-Origin': '*',\n    },\n  },\n};\n\n\n\nTip: You can also pass data into your plugin when registering it as an input type. This is useful if you want to control things like API keys or settings in your own codebase, but want to be able to pass into the plugin whenever it is used. To do this, use the options property when registering an input for a component. For more detail, see this example on GitHub from an async dropdown plugin.\n\nStep 3: Create the plugin\n// contents of plugin.jsx\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Builder } from '@builder.io/react';\nimport ReactQuill from 'react-quill';\n\nfunction RichTextEditor(props) {\n  return (\n    <ReactQuill\n      value={props.value}\n      onChange={props.onChange}\n    />\n  );\n}\n\nBuilder.registerEditor({\n    name: 'MyText',\n    component: RichTextEditor\n});\n\n\nBuilder.registerEditor() accepts one parameter: an options object with three properties:\n\nname: a string, typically camel-cased, that represents the custom type's name\ncomponent: the editor component\noptions (optional): an object\n\nTip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it. To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.\n\nStep 4: Add your plugin to Builder\nStep 5: Use your plugin in Builder\nNext steps\n\nThis tutorial showed you how to create a minimal plugin and use it locally. When you've created your plugin, you can do one of two things:\n\nGet your unique plugin creations added to Builder, by check us out on GitHub and submitting a PR with your plugin on the Builder.io repo.\nIf you're on an Enterprise plan, you can instead host your plugin yourself as a private plugin. For more information, see Creating a Private Plugin.\n\n\n"
  },
  {
    "title": "Setting Up the Shopify plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/shopify-plugin",
    "html": "Setting Up the Shopify Plugin\n\nWith Builder's Shopify plugin, you can integrate Shopify with minimal configuration and add your Shopify backend as a data source.\n\nTip: Because the Shopify plugin lets you use your Shopify backend as a data source, you can access your Shopify data as a data provider.\n\nFor more information on using data in Builder, visit the Binding Your Data section of Connecting API Data.\n\nPrerequisites\n\nTo get the most out of this document, you should have:\n\nCustom (previously called \"private\") app development enabled in Shopify. Refer to Shopify's Custom apps documentation for detailed instructions.\nSetting up the plugin\n\nTo set up the Shopify plugin in Builder:\n\nGo to Integrations.\nClick on the Enable button of the tile for the Shopify plugin.\nWhen Builder completes the enabling process, click the Configure button in the notification that displays at the bottom of the screen. If you miss the notification, click the Settings button on the integration tile.\nProvide your storefront access token and store domain, which you can find in the Shopify dashboard's Manage private apps section of your custom app.\nClick the Connect Your Shopify Custom App button.\n\nThe video below shows this process with the Shopify plugin configuration:\n\nWhat's next\n\nTo leverage plugins further, see the following documentation:\n\nUsing e-commerce custom types with custom component inputs\nTargeting with plugins\nSetting up e-commerce resource previews\n\nThe features described in the articles above make use of custom types introduced by e-commerce plugins. Refer to E-commerce custom types for in-depth information."
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/Setting%20up%20E-commerce%20Resource%20Previews",
    "html": ""
  },
  {
    "title": "Setting up e-commerce targeting - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-targeting?_host=www.builder.io",
    "html": "Targeting with Plugins\n\nYou can target content based on user interactions with your e-commerce platform's resources—such as products or collections—with e-commerce plugins.\n\nTo use e-commerce resource targeting, your app must pass the appropriate targeting attributes to Builder. For example, if you target an announcement bar to display when a user adds a certain item to their cart, your app must pass the product's id when requesting the announcement bar's content.\n\nPassing e-commerce targeting attributes\n\nYou can pass targeting attributes either by using the JavaScript SDK or with query string parameters when requesting content using the Builder Content API and GraphQL API.\n\nThe e-commerce custom type that you use for your targeting condition determines which targeting attribute you use. For example, when using a request object type like ShopifyProduct—displayed in the custom types list as Shopify Product when creating a new targeting condition—you must pass the Shopify ID for your product to the product attribute.\n\nYou can implement the above with the following code when using the SDK:\n\nconst content = await builder.get('myTargetedContent', {\n  userAttributes: { product: product.id }\n}).promise();\n\n\nYou can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:\n\nbuilder.setUserAttributes({ product: product.id });\n\nconst content = await builder.get('myTargetedContent').promise();\nconst otherContent = await builder.get('myOtherTargetedContent').promise();\n\nYou can also pass the targeting attributes using query strings when you send requests with the content or GraphQL APIs:\n\nconst response = await fetch(`https://cdn.builder.io/api/v2/content/my-model?apiKey=YOUR_API_KEY&userAttributes.product=${product.id}`)\n\nIf product.id matches the ID of the product selected for your targeting condition, then your content renders.\n\nTargeting content with e-commerce targeting conditions\n\nAfter setting up your codebase to pass targeting attributes to Builder, you can target content using e-commerce targeting conditions. For example, you can show users an announcement bar when a certain product is in the cart.\n\nTo learn how to set up targeting within the Visual Editor, see Targeting with e-commerce plugins.\n\nNext steps\n\nFor more information on how to use e-commerce plugins, check out the following articles:\n\nUsing e-commerce custom types with custom component inputs\nSetting up e-commerce resource previews"
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/plugins-setup?_host=www.builder.io",
    "html": ""
  },
  {
    "title": "How to create a promotion that targets specific pages in your store in Theme Studio for Shopify - Builder.io",
    "url": "https://www.builder.io/c/docs/target-product-page-promo",
    "html": "Creating a Promotion that Targets Specific Pages in Your Store\n\nshopify app\n\nIn this tutorial, we're going to walk you through how to\n\nimport your Shopify page with sections\ncreate a promotion for your product page\ntarget the promotion on specific pages\nschedule it for a set period of time\n\nIn Builder, click your Product Page theme and select +Create. Then click Add an editable section to my product page.\n\nNext select where you want to add this editable section. In this example, I'm going to add the section to the top of my page.\n\nThis will take you to the Visual Editor where your product page Shopify section will be imported along with an outlined dropzone at the top of the page. The dropzone is where you can start dragging and dropping content onto the page to build out a promotion. Maybe you want to have a ribbon at the top of your men's product pages or a pop-up modal when someone visits those pages. \n\nAfter you've built out the design of your promotion, you can use targeting & scheduling and A/B tests to dictate who sees what content for your promotion.\n\nOnce you've finished the design of your promotion, you can use targeting at the top of the page to target this promotion on all Men's products. In Targeting, simply click Add a Filter, and choose a property. In our particular scenario, we're going to choose a Product is in collection filter and then select the Men's collection. \n\nIf you don’t want your page to go live right away, you can choose a date and time you would like it to go live at the top of the editor by clicking on Scheduling. Once you have a date and time selected, you can publish your page. It won’t go live until the date and time you selected occurs. If this is a page that you only want up for a certain time period, you can also give your page an end date. Once this time period is over, your default homepage will be displayed.\n\nAnd that's the basics of getting a promotion created with targeting and scheduled!\n\n👉Tip: This tutorial can be adapted for many use cases, such as\n\nTargeted forms\nPop up modals\nProduct suggestions\nAnd much more!\n\nFeatured Tutorials\n\nCreate a landing page in Builder\n\nEveryone\n\nGet started with Builder and Next.js\n\nDeveloper\n\nUse your React components in Builder\n\nDeveloper\n\nConnect dynamic data\n\nAdvanced\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Intro to Built-in Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-builtin-overview?_host=www.builder.io#overview-of-built-in-plugins",
    "html": "Overview of Built-in Plugins\n\nOut of the box, Builder comes with many built-in plugins to help you quickly integrate with a number of third-party apps and services. The built-in integrations include Shopify, SalesForce, Figma, Netlify, Partytown, and many more.\n\nThe video below shows the Integrations page in Builder, which features cards for the built-in integrations.\n\nTypes of built-in plugins\n\nBuilder has several kinds of plugins available, including e-commerce, data related, and content management.\n\nWith e-commerce plugins, users can search and link selected products and categories from their e-commerce backend to structured data entries, sections, and Pages within the Visual Editor. In this way, teams can enrich content for selected products and build landing pages or custom sections with elements linked directly to their e-commerce backend and create features such as:\n\nProduct cards\nProduct galleries\nAdd-to-cart buttons\nList of product recommendations\n\nSee E-commerce custom types for more information.\n\nYou can extend the Visual Editor with all plugins, including the built-in plugins for headless e-commerce platforms such as Shopify, Swell, and BigCommerce.\n\nInstalling the e-commerce plugins gives your team access to platform-specific custom types to:\n\nUse products, collections, and other e-commerce resources as inputs for your custom code components.\nTarget content based on resources like products or collections instead of URL paths with hard-coded resource handles or IDs.\nPreview resources on product detail pages and inside of other content while editing.\n\nThe video below shows an example of using the Shopify integration with Builder to quickly use product data.\n\nIn addition to the plugins in the Integrations section of Builder, you can create your own, add other plugins, or request an integration.\n\nTip: If you'd like to extend Builder beyond what the built-in integrations offer, see Making a Plugin.\n\nNext steps\n\nLearn how to set up plugins in Setting Up Built-in Plugins."
  },
  {
    "title": "Using Phrase with Localization - Builder.io",
    "url": "https://www.builder.io/c/docs/phrase",
    "html": "Using Phrase with Localization\n\ngrowth plans\n\nWith the Phrase connector Plugin for Builder, you can translate your Builder content with Phrase.\n\nThe following video demonstrates toggling the locale in the Builder Studio to display the Phrase translation:\n\nPrerequisites\n\nTo get the most out of this document, make sure you meet the following:\n\nYour codebase is already set up for localization. See Integrating Builder Localization with Your Code for step-by-step instructions.\nYou've added locales to your Builder Space. For more information, see Adding and Removing Locales.\nTo localize custom fields, make sure you have Localize toggled on for that field in the model. For more information, see the Make a model with locales section of Localization for Multiple Blocks.\n\nTip: In addition to a Builder Enterprise subscription, you must have a Phrase Ultimate plan or higher on your Phrase account.\n\nInstalling the Phrase plugin\n\nTo install the Phrase plugin:\n\nGo to the Integrations section for the Space.\nClick on the Phrase tile Enable button.\nWhen the Builder UI refreshes, follow the prompt to continue configuring the plugin. If you miss this prompt, click on the Settings button on the Phrase tile.\nIn the Edit Phrase Settings dialogue, enter your username and password for Phrase.\nClick the Connect Your Phrase Account button.\nOn the next prompt, click Ok to approve the plugin's access to your content.\n\nThe video below demonstrates this process:\n\nRunning the translation process in Builder\nClick the Publish button for your content.\nClick the three dots in the upper right of the Visual Editor.\nSelect Translate.\nThe dialogue that opens features the locales that you've already configured. Choose the Source Languages.\nChoose the Target Languages. You can choose more than one.\nClick the Translate button. This causes Builder to contact Phrase and create a new project for this entry. This also causes Phrase to create a job for each of the target languages that you chose.\nWhen the translation is complete, Builder displays a notification badge that reads Auto-Generated Requested translation from memsource. To open the notification, click on the bell icon at the upper right of the Visual Editor. This opens the project in Phrase.\n\nTip: To exlude a block from translation, right click on the block and choose Exclude from future translations at the bottom of the Builder context menu. As an alternative to scrolling, you can search for it at the top of the context menu.\n\nContinuing the translation process in Phrase\n\nPhrase opens when you click on the Auto-Generated notification Requested translation from memource. When your Phrase project opens, it features the Builder model name, Builder content entry name, and the jobs for the languages you selected.\n\nIn the Jobs section, click your job.\nWithin the job, enter the value for each target. For example, if your source were en-US and your target fr-FR, you'd enter values for the French.\nApprove each translation by clicking on the red X to the right of each value.\nWhen Phrase prompts you to accept or cancel the job, click the Accept job button.\nAfter the acceptance process is done, click the Complete button.\nRepeat the Phrase translation for each job.\n\nAt this point, in the Project section of Phrase, each job should be translated and 100% confirmed with a status of Completed.\n\nThe following video demonstrates this process.\n\nApplying the Phrase translation in Builder\nGo back into the content entry in Builder.\nClick the three dots at the upper right of the Visual Editor.\nSelect Apply Translation. This requests the new translation from Phrase and appends it to the content.\nWhat's next\n\nIf you have suggestions or comments about this or any of the Builder.io documentation, please share your feedback through the widget to the right of this page. Thank you!"
  },
  {
    "title": "Magento E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-magento",
    "html": "Magento E-commerce Plugin\n\nYou can use your Magento products and categories within Builder with the Magento e-commerce plugin.\n\nThe plugin provides custom types that can be used to:\n\nProvide products and categories as inputs for your custom code components.\nTarget content based on products or categories instead of URL paths with hard-coded resource handles or IDs.\nPreview products and categories on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with e-commerce plugins and where they fit into your site, you can check out E-commerce Plugins for Builder.\n\nSetup within Magento\n\nIn order to enable the plugin to communicate with Magento, you can copy your store URL from your store's admin panel. This step will provide you with the information needed to complete the plugin setup below.\n\nFor more information, check out Magento's documentation.\n\nSetup within Builder\n\nYou can install the plugin from the Integrations page by clicking Enable on the Magento plugin entry.\n\nAfterwards, click Settings to configure the plugin with your Magento account information.\n\nCompleting the plugin setup requires your Magento store URL.\n\nFor more information, check out Setting Up E-commerce Plugins.\n\nCustom types\n\nThe Magento plugin provides eight custom types:\n\nMagento Product, referred to as MagentoProduct in code\nMagento Product Preview (MagentoProductPreview)\nMagento Product Handle (MagentoProductHandle)\nMagento Products List (MagentoProductsList)\nMagento Category (MagentoCategory)\nMagento Category Preview (MagentoCategoryPreview)\nMagento Category Handle (MagentoCategoryHandle)\nMagento Categories List (MagentoCategoriesList)\n\nPlease refer to E-commerce Custom Types for details on the shape of each type's values.\n\nUsage\n\nFor more information on how to use the Magento plugin, please refer to our e-commerce plugin docs:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nSetting Up E-commerce Targeting\nSetting Up E-commerce Resource Previews\nSource code\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it."
  },
  {
    "title": "Kibo Plugin for Builder - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-kibo",
    "html": "Enabling the Kibo Plugin\n\nWith Builder's Kibo plugin, you can connect your Kibo product catalog to Builder for seamless integration. The following video shows how you can leverage Kibo and Builder together:\n\nVideo shared with the kind permission of Kibo.\n\nPrerequisites\n\nTo get the most out of this document, you should already have:\n\nA Kibo commerce store\nAn app integrated with Builder\nEnabling the Kibo plugin in Builder\nGo to the Integrations section of Builder.\nOn the Kibo plugin tile, click the Enable button.\nClick Settings to configure the plugin with your Kibo account information.\n\nThe following video demonstrates this process:\n\nCompleting the plugin's setup requires the following Kibo credentials:\n\nAPI Host\nAuth Host\nShared Secret\nClient ID\n\nFor more detail on finding this information within Kibo, see the Kibo API Development documentation.\n\nWhat's next\n\nFor more information on using built-in plugins, see the following documents:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nTargeting with Plugins\nSetting Up E-commerce Resource Previews"
  },
  {
    "title": "Elastic Path PCM E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-elastic-path-pcm",
    "html": "Elastic Path PXM E-commerce Plugin\n\nYou can use your Elastic Path Product Experience Manager (PXM) products and hierarchies within Builder with the Elastic Path PXM e-commerce plugin.\n\nThe plugin provides custom types that can be used to:\n\nProvide products and hierarchies as inputs for your custom code components.\nTarget content based on products or hierarchies instead of URL paths with hard-coded resource handles or IDs.\nPreview products and hierarchies on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with e-commerce plugins and where they fit into your site, you can check out E-commerce Plugins for Builder.\n\nSetup within Elastic Path Commerce Manager\n\nIn order to enable the plugin to communicate with Elastic Path PXM, you can copy your client ID and client secret from Commerce Manager. This step will provide you with the information needed to complete the plugin setup below.\n\nFor more information, check out Elastic Path's documentation.\n\nSetup within Builder\n\nYou can install the plugin from the Integrations page by clicking Enable on the Elastic Path PXM plugin entry.\n\nAfterwards, click Settings to configure the plugin with your Elastic Path account information.\n\nCompleting the plugin setup requires your Elastic Path client ID and client secret, which can be found within Commerce Manager.\n\nFor more information, check out Setting Up E-commerce Plugins.\n\nCustom types\n\nThe Elastic Path PXM plugin provides eight custom types:\n\nElasticpathPXM Product, referred to as ElasticpathPCMProduct in code\nElasticpathPXM Product Preview (ElasticpathPCMProductPreview)\nElasticpathPXM Product Handle (ElasticpathPCMProductHandle)\nElasticpathPXM Products List (ElasticpathPCMProductsList)\nElasticpathPXM Hierarchy (ElasticpathPCMHierarchy)\nElasticpathPXM Hierarchy Preview (ElasticpathPCMHierarchyPreview)\nElasticpathPXM Hierarchy Handle (ElasticpathPCMHierarchyHandle)\nElasticpathPXM Hierarchies List (ElasticpathPCMHierarchiesList)\n\nFor details on the shape of each type's values, refer to E-commerce Custom Types.\n\nUsage\n\nFor more information on how to use the Elastic Path PXM plugin, please refer to our e-commerce plugin docs:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nSetting Up E-commerce Targeting\nSetting Up E-commerce Resource Previews\nSource code\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it."
  },
  {
    "title": "Elastic Path V2 E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-elastic-path-v2",
    "html": "Elastic Path V2 E-commerce Plugin\n\nYou can use your Elastic Path products and categories within Builder with the Elastic Path V2 e-commerce plugin.\n\nThe plugin provides custom types that can be used to:\n\nProvide products and categories as inputs for your custom code components.\nTarget content based on products or categories instead of URL paths with hard-coded resource handles or IDs.\nPreview products and categories on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with e-commerce plugins and where they fit into your site, you can check out E-commerce Plugins for Builder.\n\nSetup within Elastic Path Commerce Manager\n\nIn order to enable the plugin to communicate with Elastic Path, you can copy your client ID from Commerce Manager. This step will provide you with the information needed to complete the plugin setup below.\n\nFor more information, check out Elastic Path's documentation.\n\nSetup within Builder\n\nYou can install the plugin from the Integrations page by clicking Enable on the Elastic Path V2 plugin entry.\n\nAfterwards, click Settings to configure the plugin with your Elastic Path account information.\n\nCompleting the plugin setup requires your Elastic Path client ID.\n\nFor more information, check out Setting Up E-commerce Plugins.\n\nCustom types\n\nThe Elastic Path V2 plugin provides eight custom types:\n\nElasticpath Product, referred to as ElasticpathProduct in code\nElasticpath Product Preview (ElasticpathProductPreview)\nElasticpath Product Handle (ElasticpathProductHandle)\nElasticpath Products List (ElasticpathProductsList)\nElasticpath Category (ElasticpathCategory)\nElasticpath Category Preview (ElasticpathCategoryPreview)\nElasticpath Category Handle (ElasticpathCategoryHandle)\nElasticpath Categories List (ElasticpathCategoriesList)\n\nPlease refer to E-commerce Custom Types for details on the shape of each type's values.\n\nUsage\n\nFor more information on how to use the Elastic Path V2 plugin, please refer to our e-commerce plugin docs:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nSetting Up E-commerce Targeting\nSetting Up E-commerce Resource Previews\nSource code\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it."
  },
  {
    "title": "Crowdin Integration - Builder.io",
    "url": "https://www.builder.io/c/docs/crowdin",
    "html": "Localization with Crowdin\n\nLocalize your Builder content with the Crowdin plugin. Crowdin is a cloud-based localization platform featuring automation that simplifies your team's localization management by handling all your multilingual content with an automated process.\n\nYou can use either of Crowdin's two products with Builder:\n\ncrowdin.com: for individuals and small teams\nCrowdin Enterprise: for companies and large organizations\nPrerequisites\n\nMake sure you have the following:\n\nA Crowdin account with a project\nAn integrated Builder app with localization set up\nA Builder Growth plan or Enterprise plan\n\nTip: If you only need one manager, use Crowdin's Pro Plan. For multiple managers, use the Team, Team+, or Business Plan.\n\nIn Crowdin: integrating with Builder\n\nUnlike most of the other Builder localization plugins, the Crowdin configuration is handled almost entirely in Crowdin. To set up localization with Crowdin and Builder:\n\nGo Crowdin's Builder app.\nClick Install.\nLogin with Crowdin or create a Crowdin account.\nIn the Crowdin project section, select Source and Target languages.\nIf this is a new project, click Create.\nIn the Setup integration section, enter your Private API Key and Public API Key.\nClick Login with Builder.io. If you get a Crowdin error that your Builder account can't be configured for localization. Make sure your Builder account is a Growth plan or above and that you've configured your integrated Builder app to support localization. For setup instructions, visit the Builder Localization documentation.\nConfigure the integration by clicking Settings and choosing the source language and saving the language mapping.\nClick Save to close the Settings modal.\nBack in the main section of the Setup integration section, select the content you'd like to translate.\nClick Sync to Crowdin.\nThe left now displays all the pages you have synced.\nClick Buy Translations to complete the integration setup. In this way, you can fine-tune your integration, invite your translation agency, or purchase translations from Crowdin Language Services.\n\nThe following interactive video (click to go through the demo) of this process is kindly shared by the Crowdin team:\n\nNow your continuous localization for Builder is fully set up. To access it in the future, find it in your Crowdin project Integrations section, as in the following screenshot.\n\nSynchronizing in Crowdin\n\nWith Crowdin, you can choose manual or automatic synchronization.\n\nManual synchronization\n\nTo get Builder content into Crowdin for translation:\n\nIn the Integrations section of your Crowdin project, choose the files you want to translate in the right panel in the Builder.io section.\nClick Sync to Crowdin.\n\nTo send translations to Builder.io from Crowdin:\n\nIn the Integrations section of your Crowdin project, select the files you want to sync with Builder.io in the left section.\nClick Sync to Builder.io.\n\nThe following screenshot is of the Integrations section in Crowdin. On the left is a list of files that are synced to Builder. On the right are files that are synced to Crowdin.\n\nAutomatic synchronization\n\nTo automatically bring content into Crowdin for translation from Builder.io:\n\nIn your Crowdin project, select the files and click Scheduled Sync in the right panel in the Builder.io integration. \nThe file you choose will be transferred at a set time—once a day, week, or month by default. \nThe same button exports translated files from Crowdin to Builder.io. These translated files are in the Crowdin left panel.\n\nTo deactivate this function in Crowdin, click Disable Sync.\n\nWhat's next\n\nFor more information, visit Introduction to Localization with Builder."
  },
  {
    "title": "Algolia Plugin | Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/algolia-plugin",
    "html": "Installing the Algolia Plugin\n\nAlgolia is a search and recommendation engine API you can integrate into your Builder app using the Builder Algolia plugin.\n\nThe Builder.io Algolia plugin sends page data from the Builder.io API to a configured Algolia Index.\n\nBelow is an example of the payload that is delivered to Algolia. You can set up filters or facets from this payload.\n\n{\n  \"id\": \"f87e7603575a438e9c8a3af0f0c11206\",\n  \"variations\": {},\n  \"lastUpdatedBy\": \"eN5ERlll3vRab83WDgoFPIJM9jp2\",\n  \"metrics\": {\n    \"impressions\": 0,\n    \"clicks\": 0\n  },\n  \"createdDate\": 1643722997011,\n  \"meta\": {\n    \"kind\": \"page\",\n    \"hasLinks\": false\n  },\n  \"modelId\": \"b9544d8e828e4c188ab4585c72ede2ed\",\n  \"ownerId\": \"6314dcbfce4d40698c53786a58829190\",\n  \"@version\": 3,\n  \"lastUpdated\": 1643723175362,\n  \"data\": {\n    \"title\": \"home\",\n    \"blocksString\": \"[...]\",\n  \"name\": \"home\",\n  \"published\": \"archived\",\n  \"createdBy\": \"eN5ERlll3vRab83WDgoFPIJM9jp2\",\n  \"priority\": 0,\n  \"testRatio\": 1,\n  \"query\": [\n    {\n      \"operator\": \"is\",\n      \"@type\": \"@builder.io/core:Query\",\n      \"value\": \"/\",\n      \"property\": \"urlPath\"\n    }\n  ],\n  \"lastUpdateBy\": null,\n  \"objectID\": \"f87e7603575a438e9c8a3af0f0c11206\"\n}\n\nAdding the plugin\n\nTo add the plugin to your site, navigate to your Builder space and access Settings.\n\nIn the list of settings, click the pencil icon next to Plugins to add the Algolia Plugin.\n\nTip: If you don't see these settings, you might need to request access from your Builder administrator.\n\nNext, add the new Algolia plugin by typing the following command into the Edit Plugins dialog shown below.\n\n@builder.io/plugin-algolia\nAdding your API keys\n\nOpen your Algolia Dashboard and navigate to your Account API Keys.\n\nThe first key that you will need is your Application ID. You will find it on the main API Keys page.\n\nYou will need to create the second key in the All API Keys tab. This is what Algolia calls a Restricted Key. Be careful with this key as it enables permissions for features besides search.\n\nAfter selecting the All API Keys tab, click the New API Key button to open a modal dialog for creating your new API Key.\n\nFor this key you will need to add items to the access control list (ACL). Add search, addObject, and deleteObject. These allow Builder.io to connect to Algolia and make changes to your index. If you want to choose a specific index you can also select your Index under Indices.\n\nNow that you have the correct keys, you can return to Builder.io and edit your Algolia plugin to include these new keys.\n\nYour pages will now sync with Algolia any time they are published or unpublished.\n\nMaking changes to your plugin\n\nIf you ever have trouble with the plugin, or you would like to remove the integration you can always access the plugin settings to make changes. You can also purge your index on Algolia.\n\nThere are settings on your model type page that will allow you to re-sync or remove the webhook that's called.\n\nWhat's next\n\nFor the most up-to-date code for the Algolia Plugin, visit Builder's GitHub Repo."
  },
  {
    "title": "Using e-commerce custom types with component inputs - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-component-inputs",
    "html": "Using E-commerce Custom Types with Custom Component Inputs\n\nBy combining the flexibility of custom components and the features of e-commerce plugins, you can integrate your custom component's input fields with your e-commerce platform.\n\nThe following video shows using a custom component—being dragged in from the left—along with a plugin to feature an image of a shirt in the collection grid.\n\nWhen you use e-commerce plugin custom types with component inputs, your teammates can use these custom fields to select products, collections, and other e-commerce platform resources from a searchable list. Your component receives the selected resource's handle as a prop, which you can use to fetch and consume data from your e-commerce platform.\n\nUse cases\n\nUse cases for this technique could include:\n\nDisplaying a selected product's details\nDisplaying a selected product collection\nCombining data from a selected product with data fetched from external platforms to display shipping times, pricing histories, and other information.\n\nProviding a searchable list for selecting e-commerce platform resources reduces the risk of data entry errors when compared to requiring users to manually enter handles or resource IDs and offers better UX when using your components.\n\nPrerequisites\n\nTo get the most out of this document, you should be familiar with the following:\n\nBuilder's Built-in Integrations\nIntegrating Custom Components\nE-Commerce Custom Types\nStep 1: Setting up the code\n\nThis section demonstrates registering your custom component using an e-commerce plugin custom type.\n\nThe ProductCollection React component in the example below displays the titles of a product collection's products from a Shopify store.\n\nThe component has a string prop called collection that corresponds to the collection's handle. The component fetches the collection's data from Shopify using a function called getCollection() and stores the collection's products in its local state. Finally, it renders each product's title.\n\nconst ProductCollection = ({ collection }) => {\n  const [products, setProducts] = useState([]);\n\n  useEffect(() => {\n    const result = getCollection(collection);\n\n    setProducts(result.products);\n  }, [collection]);\n\n  return (\n    <div>\n      {products.map((product, i) => (\n        <h1 key={`product-${i}`}>\n          {product.title}\n        </h1>\n      ))}\n    </div>\n  );\n}\n\n\nNext, register the component using Builder.registerComponent(), which makes the component available for use in the Visual Editor. This example has one input, collection, with the type ShopifyCollectionHandle.\n\nBuilder.registerComponent(ProductCollection, {\n  name: 'ProductCollection',\n  inputs: [\n    {\n      name: 'collection',\n      type: 'ShopifyCollectionHandle',\n    },\n  ],\n});\n\n\nShopifyCollectionHandle is a custom type available in the Shopify e-commerce plugin that represents the handle of a Shopify collection. The exact types that you use when registering your components depend on your application and the e-commerce platform with which you're integrating.\n\nTip: We suggest that you use request object, handle, or list types depending on your use case.\n\nRequest object types are versatile: they provide you with an id, which you can use to fetch resource data from your e-commerce platform.\n\nBy passing includeRefs: true to builder.get(), when the query API sends content, it fetches any data you specify, as in this example on GitHub. The Visual Editor also fetches remote requests while editing when you pass options={{includeRefs: true}} to BuilderComponent, as in this example on GitHub.\n\nHandle and list types are convenient when you need to consume a resource's handle—for example, while constructing a product page URL—or multiple resources at once.\n\nFor more information, see E-commerce Custom Types.\n\nStep 2: In the Visual Editor\n\nThis section builds upon the example snippets above. Your e-commerce plugin options and custom component inputs might differ, but the process follows the same pattern.\n\nAdd a ProductCollection block to your Page or Section in Builder.\nSet the collection by selecting Choose collection in the Options tab. This loads a searchable list with all the collections from your Shopify store available.\nChoosing a collection sets your ProductCollection block's collection field.\nNext steps\n\nFor more information on using e-commerce plugins, check out the following articles:\n\nSetting up e-commerce targeting\nSetting up e-commerce resource previews"
  },
  {
    "title": "Setting up e-commerce targeting - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-targeting",
    "html": "Targeting with Plugins\n\nYou can target content based on user interactions with your e-commerce platform's resources—such as products or collections—with e-commerce plugins.\n\nTo use e-commerce resource targeting, your app must pass the appropriate targeting attributes to Builder. For example, if you target an announcement bar to display when a user adds a certain item to their cart, your app must pass the product's id when requesting the announcement bar's content.\n\nPassing e-commerce targeting attributes\n\nYou can pass targeting attributes either by using the JavaScript SDK or with query string parameters when requesting content using the Builder Content API and GraphQL API.\n\nThe e-commerce custom type that you use for your targeting condition determines which targeting attribute you use. For example, when using a request object type like ShopifyProduct—displayed in the custom types list as Shopify Product when creating a new targeting condition—you must pass the Shopify ID for your product to the product attribute.\n\nYou can implement the above with the following code when using the SDK:\n\nconst content = await builder.get('myTargetedContent', {\n  userAttributes: { product: product.id }\n}).promise();\n\n\nYou can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:\n\nbuilder.setUserAttributes({ product: product.id });\n\nconst content = await builder.get('myTargetedContent').promise();\nconst otherContent = await builder.get('myOtherTargetedContent').promise();\n\nYou can also pass the targeting attributes using query strings when you send requests with the content or GraphQL APIs:\n\nconst response = await fetch(`https://cdn.builder.io/api/v2/content/my-model?apiKey=YOUR_API_KEY&userAttributes.product=${product.id}`)\n\nIf product.id matches the ID of the product selected for your targeting condition, then your content renders.\n\nTargeting content with e-commerce targeting conditions\n\nAfter setting up your codebase to pass targeting attributes to Builder, you can target content using e-commerce targeting conditions. For example, you can show users an announcement bar when a certain product is in the cart.\n\nTo learn how to set up targeting within the Visual Editor, see Targeting with e-commerce plugins.\n\nNext steps\n\nFor more information on how to use e-commerce plugins, check out the following articles:\n\nUsing e-commerce custom types with custom component inputs\nSetting up e-commerce resource previews"
  },
  {
    "title": "Content API - Builder.io",
    "url": "https://www.builder.io/c/docs/content-api?_host=www.builder.io#content-api",
    "html": "Content API\n\nWith the Content API, you can make requests to retrieve data about any of your models within Builder. The Content API supports advanced query filtering with URL parameters to help you get exactly the data you need.\n\nUse cases for querying data could include searches, populating content for a collection, or getting all links that meet certain criteria.\n\nTo access this data, write queries with dot notation and, optionally, MongoDB style operators.\n\nFor more details on querying, see the Querying Cheatsheet.\n\nSet up\n\nTo start using the Content API, make sure to import the Builder SDK into your project.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\n\nAt the command line, use npm to install the Builder SDK:\n\nnpm install @builder.io/react\n\nIn your code, be sure to import the SDK:\n\nimport { builder } from \"@builder.io/react\";\nQuery requirements\n\nTo use the Builder Content API to retrieve data from your models, be sure to always provide the following request parameters in your queries:\n\nRequired: my-model-name (replace with your model's name)\nRequired: apiKey query param (replace with your Public API Key)\n\nAs an example, you'd replace my-model-name with the name of your model, such as page, and YOUR_API_KEY with your own Public API Key.\n\nhttps://cdn.builder.io/api/V3/my-model-name?apiKey=YOUR_API_KEY\nContent API query params\n\nThis section covers the available Builder Content API query params.\n\napiKey\n\nUse your API key when integrating with Builder.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\nbuilder.init(YOUR_API_KEY);\n\nquery\n\nMongoDB style query of your data.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from '@builder.io/react'\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n}\n\n// to get all entries from a page model that are using a specific symbol\n// where SYMBOL_ID is your Symbol's ID\nconst entry = await builder.get('page', {\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n});\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n})\n\n// get all the entries from a page model that are using a specific symbol \n// where SYMBOL_ID is your Symbol's ID\nconst entry = await fetchOneEntry({\n  model: 'page',\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n})\n\n\nBuilder supports the following operators: $eq $gt $in $lt $lte $ne $nin $and $not $or $nor $exists $type $elemMatch $gte $regex $options. For more information, including examples, see the Builder Querying Cheatsheet.\n\nuserAttributes\n\nOptionally use to send targeting attributes.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\nfields\n\nOnly include these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  fields: 'id, name, data.customField'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    fields: 'id, name, data.customField'\n  }\n})\n\nomit\n\nOmit only these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  omit: 'data, bigField, data.blocks'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    omit: 'data, bigField, data.blocks'\n  }\n})\n\nlimit\n\nMax number of results to return. The default is 30 and the maximum is 100.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entries = await builder.getAll('my-model-name', {\n  limit: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchEntries } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entries = await fetchEntries({\n  model: 'my-model-name',\n  limit: 10\n})\n\noffset\n\nUse to specify an offset for pagination of results. The default is 0.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  offset: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  offset: 10\n})\n\n\nTo fetch all content beyond the limit of 100, use limit and offset together by paginating results and making multiple API calls as follows:\n\nconst limit = 100;\nlet offset = 0;\nconst pages = await getResults({limit, offset});\nwhile(pages.length === (limit + offset)) {\n  offset += pages.length;\n  pages.push( ... (await getResults({ limit, offset}));\n}\nreturn pages;\n\nFor more detail, see this forum post and this forum post.\n\nincludeRefs\n\nInclude content of references in response.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeRefs: true\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeRefs: true\n})\n\ncacheSeconds\n\nSeconds to cache content. This sets the maximum age of the cache-control header response header. Set value higher for better performance, and lower for content that changes frequently.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  cacheSeconds: 10\n})\n\nstaleCacheSeconds\n\nBuilder.io uses stale-while-revalidate caching at the CDN level. This means Builder always serves from edge cache and updates caches in the background for maximum possible performance.\n\nIn this way, the more frequently content is requested, the fresher it is. The longest Builder holds something in stale cache is one day by default, but you can set this to be shorter if needed. We suggest keeping this high unless you have content that must change rapidly and gets very little traffic.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  staleCacheSeconds: 86400\n})\n\nsort\n\nProperty to order results by. Use 1 for ascending and -1 for descending.\n\nThe key is what you're sorting on, so the following example sorts by createdDate. and because the value is 1, the sort is ascending.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  sort: {\n    createdDate: 1\n  }\n})\n\nincludeUnpublished\n\nInclude content entries in a response that are still in draft mode and unarchived.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeUnpublished: true\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeUnpublished: true\n})\n\nnoTraverse\n\nThough the default is true, you can pass false to include Symbol JSON in the response. This is helpful if you want to render your page all at once such as in server-side rendering.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  noTraverse: false\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  noTraverse: true\n})\n\n\nContent API v3 is currently the default. Learn more in Content API Versions.\n\nTo experiment with the Content API, you can use the Builder API Explorer, which offers a way for you to compose queries in your own Builder Space. This way, you can confirm that your queries are correct before editing your code base.\n\nBuilder API Explorer"
  },
  {
    "title": "Setting up e-commerce resource previews - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-previews",
    "html": "Setting up E-commerce Resource Previews\n\nUsing preview types for custom fields, you can configure page and section model content to display previews of your e-commerce platform's resources while editing in the Visual Editor.\n\nPrerequisites\n\nTo get the most out of this document, make sure you've enabled and set up your e-commerce plugin. For detailed instructions, see Setting Up Built-in Plugins.\n\nAdding the preview type field to your data model\nGo to Models.\nOpen your model and click the +New Field button.\nGive the new field a descriptive name, such as productPreview.\nIn the Type drop-down, select one of your e-commerce plugin's preview types. This example uses the Shopify product preview type.\nBuilder prompts you to choose a default value from your products. Though you can close the prompt without choosing a default value, we recommend selecting a default value as a best practice. This helps your team mates understand the purpose of the field.\n\nThe video below shows these steps while adding a Shopify product preview custom field.\n\nSetting the preview URL\n\nWhen you open content within the Visual Editor for a model that has a preview field, a searchable list of e-commerce resources appears. Selecting a resource fetches its data from your e-commerce platform and can be used to construct a template string for the editing URL.\n\nFor example, you can set your model's editing URL to a template string that embeds a product's handle, such as http://localhost:3000/products/${product.handle}. You can respond to the request with a dynamic route on your back end by parsing the handle, fetching data from your e-commerce platform, and exposing that data to your content through state or context.\n\nWith this technique, non-developer teammates can preview what products, collections, and other resources look like on your product detail pages—also known as PDPs—and other content.\n\nHow Builder populates the URL\n\nBuilder determines the value of productPreview.handle when the user opens the model's content in the Visual Editor and selects a resource from the searchable list.\n\nThe plugin fetches the associated data from the e-commerce platform and exposes its properties to the editing URL template string on an object with the same name as the field. In this case, productPreview.handle represents the handle of the selected product.\n\nLeveraging dynamic preview URLs\n\nAfter setting up your model's editing URL to use the preview field's handle or ID, as above, you can create a dynamic route on your back end that:\n\nParses the URL path to extract the resource's handle or ID\nFetches the resource's data from your e-commerce platform using the parsed identifier\nExposes the fetched data to your content using state or context\n\nYou can then use data bindings on your blocks to display your resource's data with data bindings.\n\nFor more information on using this technique with URLs, see Dynamic Preview URLs.\n\nSelecting a resource to preview\n\nYou can preview a resource by selecting it from the searchable list that appears when you open your model's content in the Visual Editor.\n\nThe searchable list doesn't appear again after making your selection when you reopen your content because your selection is saved across sessions.\n\nYou can change the preview selection in the future from the Options tab in the Visual Editor by selecting the preview field's edit button.\n\nThe annotated screenshot below illustrates how an example page might display a preview for a product in a Shopify store:\n\nThe editing URL, previously set to http://localhost:3000/products/${productPreview.handle}, evaluates to http://localhost:3000/product/short-sleeve-t-shirt after the user selects the Short sleeve t-shirt for the preview field.\nA binding for the title of the Product View block, which is a custom component in the example registered by the application, sets the Product View's title to state.product.title. state.product is passed when rendering the content in the dynamic route on the back end.\nThe title renders within the Product View block's custom component.\nNext steps\n\nFor more information on using e-commerce plugins, check out the following articles:\n\nUsing e-commerce custom types with custom component inputs\nSetting up e-commerce targeting"
  },
  {
    "title": "Setting up e-commerce plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/integrations-setup",
    "html": "Setting Up Built-in Plugins\n\nWith Builder's built-in plugins, you can integrate a third-party app or service with minimal configuration. For context on this topic, see Intro to Built-in Plugins.\n\nTo set up a built-in plugin in Builder:\n\nGo to Integrations.\nClick on the Enable button of the integration you'd like to use.\nWhen Builder completes the enabling process, click the Configure button in the notification that displays at the bottom of the screen. If you miss the notification, click the Settings button on the integration tile.\nProvide any API keys and tokens and click the Connect button.\n\nThe video below shows these steps with the Shopify plugin configuration, which is representative of most of the built-in plugins:\n\nDepending on the third-party platform, you might need to configure developer/API access on your platform and set the correct permissions.\n\nThe exact steps and requirements for configuring e-commerce platforms vary from platform to platform. Refer to your platform's documentation for more information on how to acquire the API keys or tokens required by your plugin.\n\nTip: In this example, the Shopify plugin requires a Storefront access token and the Store domain, which you can find in the Shopify dashboard's Manage private apps section of your custom app.\n\nUsing a starter kit\n\nYou can use a starter kit as an alternative to installing a plugin and integrating it with your codebase.\n\nStarter kits create a new Builder space with pre-configured models and content as well as a codebase that's already been integrated with a selected plugin and platform. You can add your own platform API credentials to the plugin settings to connect the content to your store.\n\nUsing a starter kit can be a convenient way to get started if you don't have a pre-existing codebase, or to play with the plugin without affecting your other spaces. You can also refer to the starter kit's code while reading through the plugin documentation as a reference implementation while creating your own.\n\nThe following starter kits are currently available:\n\nNextJS and Elastic Path\nNextJS and Shopify\nNextJS and Swell\nWhat's next\n\nTo leverage plugins further, see the following documentation:\n\nUsing e-commerce custom types with custom component inputs\nTargeting with plugins\nSetting up e-commerce resource previews\n\nThe features described in the articles above make use of custom types introduced by e-commerce plugins. Refer to E-commerce custom types for in-depth information."
  },
  {
    "title": "Organizing Templates and Symbols with Folders - Builder.io",
    "url": "https://www.builder.io/c/docs/folders",
    "html": "Organizing Templates and Symbols with Folders\n\nOrganizing your content can help you make the most of your time while working. By creating folders, you can keep templates and images handy.\n\nManaging Templates with folders\n\nYou can use folders to organize your images as well as templates. To organize your templates, first create a folder:\n\nOpen the template dialogue by clicking the Show More button in the My Templates section of the Insert Tab. Note that the Show More button only displays if you have more than eight templates.\nCreate a folder by clicking + New Folder.\nName the folder and click Ok.\n\nTo add templates to a folder:\n\nHover on a template in the template dialogue to reveal a Pencil icon.\nClick on the Pencil icon.\nIn the dialogue that opens, name the template and choose a folder.\nOptionally add a number to rank how high you want your template to show up in the folder. The higher the number, the higher the template appears in the folder.\nClick the Save button.\n\nThe following video shows you how to create a folder and add a template to the new folder:\n\nManaging Symbols with folders\n\nYou can use folders to organize your Symbols. To organize your Symbols, first create a folder:\n\nIn the Insert tab, expand the My Symbols section.\nClick the Show More button.\nCreate a folder by clicking + New Folder.\nName the folder and click Ok.\n\nTo add a Symbol to a folder:\n\nHover on a Symbol in the Symbol dialogue to reveal a Pencil icon.\nClick on the Pencil icon.\nIn the dialogue that opens, choose the folder.\nClick the Save button.\n\nThe following video shows you how to create a folder called Docs and add a Symbol to the new folder.\n\nWhat's next\n\nFor managing assets, visit Organizing with the Asset Library.\n\nIn addition to organizing your content, you can access any content or area of Builder from anywhere else within Builder by opening the Command Palette with the keyboard shortcut, Cmd/Ctrl+k. For detailed instructions, refer to Getting Around Builder with the Command Palette"
  },
  {
    "title": "Intro to Built-in Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-builtin-overview",
    "html": "Overview of Built-in Plugins\n\nOut of the box, Builder comes with many built-in plugins to help you quickly integrate with a number of third-party apps and services. The built-in integrations include Shopify, SalesForce, Figma, Netlify, Partytown, and many more.\n\nThe video below shows the Integrations page in Builder, which features cards for the built-in integrations.\n\nTypes of built-in plugins\n\nBuilder has several kinds of plugins available, including e-commerce, data related, and content management.\n\nWith e-commerce plugins, users can search and link selected products and categories from their e-commerce backend to structured data entries, sections, and Pages within the Visual Editor. In this way, teams can enrich content for selected products and build landing pages or custom sections with elements linked directly to their e-commerce backend and create features such as:\n\nProduct cards\nProduct galleries\nAdd-to-cart buttons\nList of product recommendations\n\nSee E-commerce custom types for more information.\n\nYou can extend the Visual Editor with all plugins, including the built-in plugins for headless e-commerce platforms such as Shopify, Swell, and BigCommerce.\n\nInstalling the e-commerce plugins gives your team access to platform-specific custom types to:\n\nUse products, collections, and other e-commerce resources as inputs for your custom code components.\nTarget content based on resources like products or collections instead of URL paths with hard-coded resource handles or IDs.\nPreview resources on product detail pages and inside of other content while editing.\n\nThe video below shows an example of using the Shopify integration with Builder to quickly use product data.\n\nIn addition to the plugins in the Integrations section of Builder, you can create your own, add other plugins, or request an integration.\n\nTip: If you'd like to extend Builder beyond what the built-in integrations offer, see Making a Plugin.\n\nNext steps\n\nLearn how to set up plugins in Setting Up Built-in Plugins."
  },
  {
    "title": "SDK Comparison - Builder.io",
    "url": "https://www.builder.io/c/docs/sdk-comparison?_host=www.builder.io#sdk-comparison",
    "html": "SDK Comparison\n\nIf you want to use the latest, second-generation Builder SDKs, understanding how the imports might have changed for your framework can help you get started smoothly so you can leverage the many improvements and updates.\n\nTip: Currently, the React Gen 2 SDK is in beta. We recommend that you use the Gen 1 SDK for React and React-based frameworks.\n\nComparison: Gen 1 and Gen 2\n\nAt Builder, we refer to the two sets of SDKs as Gen 1 and Gen 2:\n\nGen 1: first generation of the Builder SDKs\nGen 2: second generation of the Builder SDKs\n\nUse the table below so that you reference the SDK for your framework correctly.\n\nFramework\tGen 1\tGen 2\n\nQwik\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-qwik\n\n\n\n\nReact*\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react\n\n\n\n\nNext.js\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react-nextjs\n\n\n\n\nVue**\n\n\t\n\nstable\n\n@builder.io/vue\n\n\t\n\nin beta\n\n@builder.io/sdk-vue/vue2\n\n@builder.io/sdk-vue/vue3\n\nThough Vue Gen 2 is in beta, this is the recommended SDK.\n\n\n\n\nSvelte\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-svelte\n\n\n\n\nSolid\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-solid\n\n\n\n\nReact Native\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-react-native\n\n\n\n\nAngular\n\n\t\n\nstable\n\n@builder.io/angular\n\n\t\n\nn/a\n\n*Includes React-based frameworks such as Remix, Hydrogen, Gatsby, Next.js, and App Router.\n\n**Includes Nuxt.\n\nImporting the rendering component\n\nThe component's name changed from BuilderComponent in Gen 1 to RenderContent in Gen 2.\n\nGen 1\n\nIn Gen 1, the import is:\n\nimport { BuilderComponent } from '@builder.io/react';\n\nNotice:\n\nthe component is BuilderComponent\nthe Gen 1 SDK is @builder.io/react\n\nGen 2\n\nIn Gen 2, the import changes to:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\nNotice:\n\nthe component is RenderContent\nthe Gen 2 SDK is @builder.io/sdk-react\nImporting helpers to configure the editor\n\nThe process of importing helpers to configure the editor has also changed between React Gen 1 and React Gen 2.\n\nGen 1\n\nIn Gen 1, import a Builder object and use the register() helper:\n\nimport { Builder } from '@builder.io/react';\n\n\nBuilder.register('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' },\n    { name: 'Triple Columns' },\n    { name: 'Dynamic Columns' },\n  ],\n})\n\n\nGen 2\n\nIn Gen 2, the Builder import no longer exists. Instead, import register directly from the module:\n\nimport { register } from '@builder.io/sdk-react';\n\nregister('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' }\n  ],\n})\n\nImporting helpers to register custom components\n\nThe process of importing the helper to register custom components has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import the Builder object and use the registerComponent() helper:\n\nimport { Builder } from '@builder.io/react';\nimport { MyHero } from './MyHero';\n\nBuilder.registerComponent(MyHero, {\n  name: 'Hero',\n  inputs: [\n   { name: 'title', type: 'string' },\n  ],\n});\n\n\n\nGen 2\n\nIn Gen 2, instead of using registerComponent, create a customComponents array containing all the custom components, and pass that as a prop to the RenderContent component:\n\nimport { RenderContent } from '@builder.io/sdk-react';\nimport { MyHero } from './MyHero';\n\nconst MY_HERO_CUSTOM_COMPONENT = {\n  component: MyHero,\n    name: 'Hero',\n    inputs: [\n      { name: 'title', type: 'string' },\n    ],\n}\n\n// this array can contain as many custom components as you want\nconst CUSTOM_COMPONENTS = [MY_HERO_CUSTOM_COMPONENT]\n\n// pass the array to RenderContent\n<RenderContent customComponents={CUSTOM_COMPONENTS} />\n\n\nImporting helpers to fetch data\n\nThe process of importing the helper to fetch data has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import a builder object and use the get() or getAll() helper:\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url,name',\n});\n\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n});\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using getAll().\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\nFor more detail, read Fetching reference and Symbols further in this document.\n\nGen 2\n\nIn Gen 2, the builder import is no longer used. Instead, import fetchOneEntry() and fetchEntries()—to fetch single and multiple entries respectively—directly from the package. Additionally, the apiKey is now a required field:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY'\n});\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY’\n});\n\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using fetchEntries().\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\n\nFor more detail, read the next section in this document, Fetching reference and Symbols.\n\nFetching references and Symbols\n\nUsing enrich: true is crucial in ensuring that references and Symbols are fetched, which provides a consistent experience between the Visual Editor and the live site.\n\nGen 1\n\nTo fetch references and Symbols in Gen 1 when using builder.get() or builder.getAll(), pass in the enrich: true option:\n\nimport { builder } from '@builder.io/react';\n\n// Fetch a single entry with references and Symbols\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n\nGen 2\n\nTo fetch reference and Symbols in Gen 2 when using fetchOneEntry() or fetchEntries(), include the enrich: true option:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\n// Fetch a single entry with references and Symbols\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\nUsing enrich when rendering content\n\nGen 1\n\nIn Gen 1 of the Builder SDK, fetch references and Symbols when rendering components with BuilderComponent by specifying enrich to true:\n\nimport { BuilderComponent } from '@builder.io/react';\n\n<BuilderComponent\n  modelName=\"page\"\n  options={{ enrich: true }} // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with BuilderComponent makes sure that references and Symbols associated with the content are fetched during rendering, which provides a consistent experience with the live site where the content is published.\n\nGen 2\n\nIn Gen 2 of the Builder SDK, when rendering components using RenderContent, fetch references and Symbols by specifying enrich: true:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\n<RenderContent\n  customComponents={CUSTOM_COMPONENTS} \n  options={{ enrich: true }}  // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with RenderContent ensures that your custom components have access to the necessary content and provides a consistent experience with the live site where the content is published.\n\nWhat's next\n\nFor more detail on the Gen 2 (or Mitosis) SDKs, see the Builder GitHub repo."
  },
  {
    "title": "How to Launch a Modal in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/launch-modal",
    "html": "Launching a Modal in Builder\n\nThe Launch Modal (popup) template displays an overlay over your page content. It's great for things like showing a signup form or full page width video. Watch the video below to learn how to use the Launch Modal template!\n\nHow to use the Launch Modal Template\n\nOn your Builder page, select the \"block templates\" button. This will pull a list of templates. Select the one called \"Launch Modal\" If you do not see it this template, you can use the search bar to find it.\n\nAfter you select the launch modal, drag and drop it where you want it on your page. In this example we added it to the header. To edit and customize the contents of the launch modal, you can click on the content. Since most of the content for the launch modal opens/closes other content, an easy way to edit/select the content is by going to the “Layers” tab and selecting the element you want to edit.\n\n👉Tip: to keep the modal active while editing, you can select the Launch modal layer, navigate to the options tab, and toggle launch modal active on.\n\nModal use cases & customization\n\nThe launch modal is fully customizable. You can edit and customize the look and functionality to fit the aesthetic of your page. For example, if you would like to change the button background color, just select the button in the \"Layers\" tab and choose a new color in the “Styles” tab. You can add your own content in the pop-up container (e.g sign up or email capture form).\n\nAnimations\n\nYou can also choose to change the animation of the launch modal. For example, you can go to the “Data” tab and change the opacity of the pop-up container, and change the transition in the advanced CSS section in the “Styles” tab.\n\nUp next\n\nDropdown menu"
  },
  {
    "title": "Targeting Cheatsheet - Builder.io",
    "url": "https://www.builder.io/c/docs/targeting-cheatsheet",
    "html": "Targeting Cheatsheet\n\ngrowth plans\n\nCreating your own custom targeting attributes can help you target specific segments of your site visitors. While you can create a wide variety of attributes, this document features a list of common attributes and shows how to create and use them.\n\nThe video below shows how to create a custom targeting attribute and use that attribute for targeting in a content entry.\n\nCreating and using custom targeting attributes\nStep 1: Creating the custom attribute\nIn Account Settings, click on the pencil next to Custom Targeting Attributes.\nClick the + New Target Attribute button.\nName your attribute and choose a Type.\nClick the Save button.\nStep 2: Using the new attribute in the content entry\nOpen a content entry.\nClick the targeting icon at the top of the UI.\nSelect your custom targeting attribute under Where and select the value.\nExamples of custom targeting attributes\n\nWhen you create custom targeting attributes, you can specify the attribute you need as well as specify the type. The following table lists some examples.\n\nExample Attribute\tSetup and Use\nisLoggedIn\n\t\n\nIn Account Settings, create isLoggedIn with a type of Boolean:\n\nIn the content entry's Targeting dialogue, choose Is logged in and set the toggle on for true or off for false:\n\nIn your code, use:\n\nJS\nREST API\nbuilder.setUserAttributes({\n  isLoggedIn: true\n});\n\n\n\nisNewVisitor\n\t\n\nIn Account Settings, create isNewVisitor with a type of Boolean:\n\nIn the content entry's Targeting dialogue, choose Is new visitor and set the toggle on for true or off for false:\n\nIn your code, use:\n\nJS\nREST API\nbuilder.setUserAttributes({\n  isNewVisitor: true\n});\n\n\n\naudience\n\t\n\nIn Account Settings, create audience with a type of String, toggle on the enum switch, and add Enum Values:\n\nIn the content entry's Targeting dialogue, choose Audience and select the value(s):\n\nIn your code, use:\n\nJS\nREST API\nbuilder.setUserAttributes({\n  audience: ['power-shopper']\n});\n\n\n\nlocale\n\t\n\nIn Account Settings, create locale with a type of String, toggle on the enum switch, and add Enum Values:\n\nIn the content entry's Targeting dialogue, choose Locale and select the value(s):\n\nIn your code, use:\n\nJS\nREST API\nbuilder.setUserAttributes({\n  locale: 'en-CA'\n});\n\n\nThe above table features examples to show the potential of creating your own custom targeting attributes. You can create many types of attributes for targeting the right users for your content.\n\nWhat's next\n\nFor more information on targeting and custom attributes, see the following documentation:\n\nCustom Targeting Attributes: offers more detail on creating and using custom targeting attributes."
  },
  {
    "title": "Intro to Integrating Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-intro?_host=www.builder.io#integrating-custom-components",
    "html": "Integrating Custom Components\n\nYou can expand on Builder's selection of built-in blocks by registering components from your codebase with Builder. Then, teammates can drag and drop your components within Builder's Visual Editor just like any other block.\n\nYou can use components you code yourself or third-party components with Builder.\n\nGet Started\n\nUsing your custom components in Builder's Visual Editor is a minimal process:\n\nStep 1: Register Custom Components with Builder, which requires minimal code setup.\nLearn to register your components\nStep 2: Use your component in the Visual Editor by dragging and dropping your component like any other block and customizing it in the Visual Editor.\nUse cases for integrating custom components\n\nCustom components are ideal when you want to accomplish goals such as:\n\nAdding unique functionality to your site for special use cases\nSystematizing design and content patterns\nStandardizing your design system with custom components-only mode, which makes only your custom components available for use in the Visual Editor\nCustomizing blocks\nOverriding built-in blocks\nFurthering your customized experience\n\nAfter you've set up custom components in Builder you can customize your team's experience even further by:\n\nUsing Builder Blocks in Custom Components\nOverriding Built-in Components\nVersioning Custom Components\n\nNext steps\n\nTo get started using your custom components in Builder, head over to Registering Custom Components with Builder."
  },
  {
    "title": "E-commerce custom types - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-custom-types",
    "html": "E-commerce Custom Types\n\nEach e-commerce plugin provides custom types that you can use to add functionality to the Visual Editor. The table below lists each for quick reference and links to more detail.\n\nType\tNaming Ends In\tDescription\n\nRequest object\n\n\t\n\nno suffix\n\n\t\n\nStores an object representing an asynchronous request for resource data from your e-commerce platform.\n\nEx: ShopifyProduct\n\n\n\n\nPreview\n\n\t\n\n-Preview\n\n\t\n\nAdds a preview type field to your model.\n\nEx: ShopifyProductPreview\n\n\n\n\nHandle\n\n\t\n\n-Handle\n\n\t\n\nStores a reference to a resource in your e-commerce platform.\n\nFor handle types like ShopifyCollectionHandle, your component receives a string corresponding to the resource's handle.\n\nEx: ShopifyProductHandle, ShopifyCollectionHandle\n\n\n\n\nList\n\n\t\n\n-List\n\n\t\n\nStores references to one or more resources in your e-commerce platform.\n\nFor list types like ShopifyCollectionList, your component receives an array of strings corresponding to the IDs of your selected resources.\n\nEx: ShopifyProductList, ShopifyCollectionList\n\nRequest object types\n\nA request object type field stores an object representing an asynchronous request for resource data from your e-commerce platform, similar to a JavaScript promise.\n\nThe object has three top-level properties:\n\noptions: an object with a single property, the name of which corresponds to the resource type and the value of which corresponds to the resource's ID. For example, options.product holds your product's ID.\ndata (optional): an object with a single property, the name of which corresponds to the resource type and the value of which corresponds to the resource's data. For example, data.product holds data fetched from your e-commerce platform about the product. data is only available when you make a content request is made with the noTraverse request option or query parameter set to false while using the JS SDK or Content API and GraphQL API, respectively.\nrequest: an object with metadata about the asynchronous resource data request.\n\nYou can use request object types wherever you need to refer to a single resource by its ID; for example, while setting up e-commerce resource-based content targeting or creating custom component inputs.\n\nYou can select a resource for the field using a searchable list, which at a minimum exposes the resource's ID through the request object's options property. Using that ID, you can fetch resource data from your e-commerce platform and expose it to your components through state and data bindings.\n\nWith the noTraverse request option set to false, you can also use request object types to fetch resource data without a separate request, saving you a roundtrip. Builder fetches the data from your e-commerce platform using the resource's ID for you, adding the response to the data property on the request object.\n\nRequest object type names, such as ShopifyProduct, have no suffix.\n\nPreview types\n\nA preview type is a request object type that adds a preview type field to your model and triggers a searchable list to appear when opening that model's content in the Visual Editor if the field is empty.\n\nWhen you select a resource from the list, the plugin automatically fetches it from your e-commerce platform and exposes its data in the model's editing URL through string templating.\n\nYou can use preview types to enable teammates to preview content for specific resources while editing, for instance in a product detail page.\n\nPreview type names end with the word Preview, such as ShopifyProductPreview.\n\nFor more information on using preview types, see Setting Up E-commerce Resource Previews.\n\nHandle types\n\nA handle type stores a reference to a resource in your e-commerce platform such as a product or a product collection. The reference is a string that corresponds to the resource's handle.\n\nThe handle is a human-readable, machine-parseable unique identifier assigned by a user or auto-generated by the e-commerce platform. For example, a product called \"Short sleeve t-shirt\" may have the handle short-sleeve-t-shirt.\n\nYou can use handle types for custom component input fields, which allows you to select a resource for the field from a searchable list. Builder passes the handle for the selected resource to your component as a prop with the same name as your field. The prop's value is a string or, if the field is empty, undefined.\n\nHandle type names end with the word Handle, such as ShopifyProductHandle.\n\nList types\n\nA list type stores references to one or more resources in your e-commerce platform. Each reference is a string that corresponds to the resource's ID in your platform.\n\nWhile handle types also store references to resources, the references stored by list types are primary IDs. For example, a product called \"Short sleeve t-shirt\" may have the handle short-sleeve-t-shirt and a randomized ID such as 9f870b34-7397-4dc0-b2e7-9d93cdcba0fe. You can call different e-commerce APIs to fetch resource data depending on whether your reference is a handle or a primary ID.\n\nSimilar to handle types, use list types to provide a searchable list interface for custom component input fields. Builder passes the IDs for the selected resources to your component as a prop with the same name as your field. The prop's value is an array of zero or more strings.\n\nList type names end with the word List, such as ShopifyProductList.\n\nNext steps\n\nFor more information on using e-commerce plugins, check out the following articles:\n\nUsing e-commerce custom types with custom component inputs\nSetting up e-commerce resource previews"
  },
  {
    "title": "Creating a Private Model - Builder.io",
    "url": "https://www.builder.io/c/docs/private-models?_host=www.builder.io#creating-a-private-model",
    "html": "Creating a Private Model\n\nWhen you need a model that is only privately accessible, you can adjust the configuration of your model, use a Private API Key, as well as the Content API to ensure privacy.\n\nMaking a model private\n\nBy default, Builder Page, Section, and Data models are publicly readable.\n\nTip: When setting a model to be private, consider whether you want all entries of that model to be private. If some of them need to be publicly readable, create a model specifically for private content entries.\n\nTo make a model private:\n\nGo to Models.\nOpen your page model.\nGo to Advanced.\nSwitch the Public Readable toggle to off.\nClick Save.\nCreate content entries from this model for any that you'd like to be private.\n\nThe following video shows how to toggle off the Public Readable setting for a Page model, but you can change this setting on any kind of model.\n\nCreating a Private API Key\n\nTo leverage a private model, you need to create a Private API Key in your Organization Settings. Follow the instructions in the Managing Private Keys section of the API Keys documentation.\n\nWhen you have your Private API Key, continue with the instructions below.\n\nAdding the code\n\nUse the Content API with your Private API key with the following code, where you replace these values with your own:\n\nmodelName\nyourPublicAPIKey\nyourPrivateAPIKey\nlet apiUrl = 'https://cdn.builder.io/api/v2/content'\nlet modelName = 'private-page'\nlet content = await request(`${apiUrl}/${modelName}?apiKey=${yourPublicAPIKey}&limit=1&userAttributes.urlPath=/some-page`, {\n  headers: { Authorization: `Bearer ${yourPrivateAPIKey}` },\n})\n\n\nNext, pass the JSON to render as needed; for example as in this React snippet for a model named private-page:\n\nlet page = content.results[0];\n\nif (page) {\n  return <BuilderComponent model=\"private-page\" content={page} />\n}\n\nWhat's next\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time."
  },
  {
    "title": "Adding Inputs to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/adding-inputs-to-symbols?_host=www.builder.io#inline",
    "html": "Adding Inputs to Symbols\n\nTo create and maintain a reusable part of your website in one place, use Symbols. A minimal Symbol is identical everywhere, but sometimes you need an almost identical piece of your site that you can tweak individually without affecting other instances of that Symbol.\n\nIn cases where you want to enable editing of certain features but keep maintenance centralized, you can configure Inputs for your Symbols. An Input is a way for you specify that a certain part of the Symbol, such as text or an image, is changeable.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols and have a Symbol you'd like to configure. If you're new to Symbols, check out the following articles first:\n\nReusing Blocks\nIntroduction to Symbols\nHow to make a Symbol\nAdding an Input to a Symbol\n\nTo make a Symbol editable on a per instance basis, you need to configure Inputs. Use Inputs to make text blocks, images, or any other kind of content in a Symbol editable.\n\nIn the Symbol\n\nOn the Symbol's Data tab:\n\nAdd a new Content Input by selecting + New Field in the Content Inputs section.\nName your new field and choose its type.\nIn the Content State section, find your new Input and enter some default text.\nSelect the Block you want to make editable and click Edit.\nSelect the four dots and specify the Input you just created.\nSelect the Publish button to make your changes in all instances of the Symbol.\nOn the page where you're using the Symbol\nAdd your Symbol to the page if you haven't already.\nSelect your Symbol.\nOn the Options tab, edit the content of the Inputs you created.\nDeleting Content Inputs\nOpen the Symbol and go to the Data tab.\nUnder Content Inputs, select the X to delete the Input.\nSelect the block that was associated with the Input.\nOn the Options tab, select the four dots and select Remove Binding.\nMaking a Symbol inline or turning a Symbol into a regular Block\n\nDecoupling a Symbol from its Source creates a standalone Block, which no longer inherits from the Source Symbol. This Symbol becomes inline.\n\nSelect the Symbol and click the Edit button.\nIn the Edit window, select Detach Symbol.\nWhat's next\n\nFor more information on using Symbols, read the following articles:\n\nSymbols with inputs\nDynamic symbols\nSymbols with children"
  },
  {
    "title": "Tracking Custom Events - Builder.io",
    "url": "https://www.builder.io/c/docs/tracking-custom-events?_host=www.builder.io",
    "html": "Tracking Custom Events\n\nYou can track custom events to evaluate your content's performance. For example, you can:\n\nmeasure A/B test performance by custom events, such as add-to-cart rates or average order value\nbreak down impressions and conversions by product views or orders\nbuild completely custom dashboards associated with Builder content and sessions\nTracking custom events in JavaScript\n\nYou can track a custom event using JavaScript or with the Visual Editor's JS editor or within your own codebase. Custom events can have any name.\n\nIn Builder content or from the the custom JavaScript panel, track an event within an action binding:\n\nbuilder.track('yourEventName');\n\nAlternatively, you can track a custom event using JavaScript within your own codebase:\n\n// Or, track an event within your project's code\nimport { builder } from '@builder.io/sdk';\nbuilder.track('yourEventName');\n\nIf you're using web components, such as Shopify hosted, you can access the global Builder instance from any script tag or function. Note that in this case, you might need to wrap the call in a setTimeout() to ensure BuilderWC is loaded:\n\nBuilderWC.builder.track('yourEventName');\nImporting the SDK\n\nTo import the latest SDK, specify the framework as follows:\n\nimport { track } from '@builder.io/sdk-...'\n\n// Next.js, App Router\nimport { BuilderContent } from \"@builder.io/sdk\";\n\n// Qwik\nimport { getContent } from \"@builder.io/sdk-qwik\";\nimport {\n  getContent,\n  RenderContent,\n  getBuilderSearchParams,\n  type RegisteredComponent,\n} from \"@builder.io/sdk-qwik\";\n\n//  React, Remix, Hydrogen, Gatsby\nimport { BuilderComponent, builder, useIsPreviewing } from \"@builder.io/react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\nimport { BuilderComponent } from '@builder.io/react';\n\n\n// Vue\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue2';\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';\n\n// Nuxt\nimport { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-vue'\n\n\n//  Svelte\nimport { RenderContent } from '@builder.io/sdk-svelte';\n\n//  Angular\nimport { BuilderModule } from '@builder.io/angular';\n\n\n\n\n\nAccessing custom events in the overview dashboard\n\nTo display metrics for your custom events on the overview dashboard, take the following steps from the content entry where you use your custom event:\n\nNavigate to the Insights tab.\nClick on the three dots in the top right corner and choose Customize Metrics.\nSelect Manage Custom Events.\nAdd a new event to start tracking your custom event on the dashboard.\n\n5. Enter the Event Name, matching the string supplied to builder.track().\n\n6. Add a Display Name to label your custom metric on the dashboard.\n\n7. Optionally add a Description for the event.\n\n8. Click Submit and make sure the new event is checked to start tracking.\n\nFor more information, refer to Viewing Metrics with Insights.\n\nUsing event tracking with Gen 2 SDKs\n\nWith the Builder Gen 2 SDKs, you can use Builder's event tracking module to:\n\ntrack events\ntrack data retrieval\nhandle API requests\n\nYou can create event objects, check if tracking is enabled, and send the event data to a tracking API.\n\nTo track and send the event data to the tracking API, use the track() function with an object containing the type property.\n\nThe type property specifies the type of event you want to track. It can be one of the predefined values:\n\nimpression\nconversion\nclick\nsome-custom-event.\n\nYou can choose the appropriate type based on the event you want to track. For example:\n\n// Make sure you're using a Gen 2 SDK\nimport { track } from '@builder.io/sdk-vue'\n\ntrack({\n  type: 'impression' | 'conversion' | 'click' | 'some-custom-event',\n  apiKey: YOUR_API_KEY\n});\n\nAccessing custom events from SQL\n\nenterprise plans\n\nYou can incorporate custom events into your custom dashboards by modifying your dashboards' SQL queries. For more information, see Programming Custom Dashboards."
  },
  {
    "title": "Conversion tracking with Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/conversion-tracking",
    "html": "Tracking Conversions\n\nTracking conversions with Builder only requires adding a few lines of code to your app.\n\nReact\nJS\nShopify\n// Requires @builder.io/sdk version >= 1.1.21\nimport { builder } from '@builder.io/react'\n\n// For conversions without a specified amount\nbuilder.trackConversion();\n\n// OR to specify an amount; for example, a dollar value for the conversion,\n// for an ecommerce order\nbuilder.trackConversion(99.99);\nCross-domain conversion tracking\n\nWhen you use cross-domain conversion tracking, such as when your checkout page is on a different domain than your store, you need to associate the session on the store with the conversion on the checkout page.\n\nPass the sessionId as a query param on the checkout URL as in the following example:\n\nimport { builder } from '@builder.io/react';\n\n/**\n* append the session to the URL to associate conversions\n*/\nconst Cart = () => {\n  ...\n   const checkoutUrl = useCheckoutUrl() +\n   `&builder.overrideSessionId=${builder.sessionId}`\n  ...\n}\n\n\nBuilder tracks these interactions using impression data. Ensure that this function is invoked in the same browser environment as the impressions and click events are dispatched. Since this API is designed for browser usage, it may not function as intended if used server-side.\n\nNote that if you are a Shopify store and have installed Builder's Shopify app, the above code is not needed, as it is installed automatically."
  },
  {
    "title": "Targeting Content - Builder.io",
    "url": "https://www.builder.io/c/docs/targeting?_host=www.builder.io#targeting-content",
    "html": "Targeting Content\n\ngrowth plans\n\nTargeting content for specific audiences can help you drive customer acquisition and retention.\n\nYou can target content based on attributes such as whether customers have purchased from a specific collection, their current product page, or if they have a product with a specific tag in their cart. These are just a few examples—there are endless possibilities for targeting.\n\nPrerequisites\n\nTo get the most out of this article, you should be familiar with the following:\n\nTargeting and Scheduling Content\nTargeting options by plan\n\nTargeting options in Builder depend on your plan.\n\nAll plans come with the URL Path targeting attribute.\nGrowth and Enterprise plans offer both URL Path and Device targeting capabilities.\nWith Growth plans and above, can use your own Custom Targeting Attributes.\nBuilder provides e-commerce plugins for various platforms, each equipped with custom targeting attributes.\nAccessing targeting attributes\n\nTo use targeting:\n\nOpen the content entry for which you'd like to configure targeting.\nClick the Targeting icon at the top of the Visual Editor.\nIn the Targeting dialog, click +Target, and choose a property from the dropdown menu.\n\nAs an example, the following video shows targeting where the URL is /demo and the Device is mobile. This means this page is to be delivered when the device the visitor is using is a mobile device.\n\nTargeting by device with SSR? When using SSR or SSG, and targeting by device—such as mobile, tablet, or desktop—you must reference the targeted device in userAttributes as in the following example:\n\nuserAttributes: {\n    ...\n  device: \"mobile\"\n}\n\n\nFor more details on userAttributes, visit the userAttributes entry in the Content API documentation.\n\nFor a Next.js-specific example, refer to this example on GitHub for retrieving userAgent and device type server side.\n\nUsing order with targeting\n\nThe order of content entries in Builder determines how Builder evaluates and determines which content entry to deliver. Builder starts at the top of the list of entries at the specified URL and works its way down to find the entry to render.\n\nFor example, when you have multiple pages set up as alternatives for a specific targeting condition, they all share the same URL. When a user requests that URL, Builder checks each page in the list associated with that URL, starting at the top. The first page that meets the specified targeting condition is the version that is displayed to the user.\n\nExample\n\nConsider three versions of a homepage; home, home 2, and home 3. Each has different content, but they are all at the same URL, as in the following:\n\nhome 3, targeting mobile\nhome 2, targeting desktop\nhome (fallback), with no targeting\n\nHere's how Builder determines which Page to deliver:\n\nFirst, Builder considers all published Pages at the requested URL, /.\nIf home 3 has the Device targeting attribute set to Mobile, and your user visits yoursite.com from their phone, they get the content from home 3.\nIf home 2 targets Tablet, Builder delivers that Page to tablet users.\nThis example also has a fallback, home (fallback), just in case. It's a best practice to be sure all your conditions have a fallback Page in case none of the conditions are met.\n\nWhen you configure targeting, you establish a condition about a user and then deliver the appropriate content to that user. For example, you might want a user on a mobile device to have a different UI from a user on a laptop. Targeting statements follow the below pattern:\n\nWhere condition + operator + value\n\nBuilt-in conditions are:\n\nDevice\nURL Path\n\nSome examples of targeting statements are:\n\nWhere URL is /shoes\nWhere device is tablet\n\nThe operators available are:\n\nis means equal to the value\nis not means not the value. Available for conditions with one possible value; for example, a Boolean.\ncontains means the condition includes in it the string you specify for the value\nstarts with means the condition begins with the string you specify for the value\nends with means the condition ends with the string you specify for the value\n\nAdditionally, if you're on a Growth or Enterprise plan, you can customize targeting to meet your specific needs. For more information, see Custom Targeting Attributes.\n\nTargeting in-depth\n\nThe following video provides an in-depth introduction to targeting in Builder:\n\nFor more information targeting based on query parameters, visit this Builder Forum discussion.\n\nShopify custom attributes\n\nWith Shopify, Builder offers several ways to target content. For example, you can leverage your Shopify customer tags or if a user has specific items in their cart, you can display and even A/B test your content.\n\nDepending on the type of theme page you're working on, such as a homepage, a collection page, or a product page, Builder populates additional targeting parameters specific to the theme page."
  },
  {
    "title": "Start Building - Builder.io",
    "url": "https://www.builder.io/c/docs/start-building?_host=www.builder.io",
    "html": "LET'S BUILD TOGETHER\n\nPopular Tutorials\n\nThe documentation within Building Content features the Builder Visual Editor, an intuitive drag-and-drop editor where you can quickly build pages, sections, and leverage your data.\n\nFEATURED GUIDES\n\nMake a Landing Page\n\nBecome a Responsive Design Pro\n\nBuilder for Shopify\n\nLearn about Blocks\n\nTour the Visual Editor\n\nReuse Blocks to Work Smarter\n\nPOPULAR VIDEO TUTORIALS\n\nThe following collection of how-to videos walks you step-by-step through some of our customers' most requested project types.\n\nHow to Create a Page\n\nCreate a page. Perfect if youʻre new to Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: < 1 minute\n\nHow to Make a Hero Block\n\nCreate a full-width image that features a button and copy.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 3 minutes\n\nHow to Batch Upload Images\n\nUpload multiple pictures at a time into Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1 minute\n\nHow to Make a Multi-column Section\n\nCreate a section with multiple images in columns that sit side-by-side at larger screen widths and stack on smaller screens.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2 minutes\n\nCreate a Full-width Two Column Section\n\nCreate a section that spans the whole viewport with a pull quote on one side and an image on the other.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 4 minutes\n\nHow to Make an Announcement Bar\n\nCreate a bar that spans the whole viewport with an announcement.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1.5 minutes\n\nHow to Make a Full-Width Carousel\n\nCreate a section with multiple images that you can scroll through horizontally.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2.5 minutes\n\nHow to Make a Footer\n\nCreate a footer that spans the viewport, contains a logo, and columns of links. These guidelines meet most use cases.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 10 minutes\n\nHow to Make a Footer Symbol\n\nCreate a footer Symbol with customizable inputs. If youʻre new to Symbols, be sure to check out Reusing Blocks first.\n\nSkill set: Advanced\n\nArea: UI only\n\nLength: 5 minutes\n\nCreate a Section with a Changeable Background\n\nMake a section with a background that changes when you hover over certain configured areas. Includes:\n\ninteractive example, also known as a fiddle\na preview so you can see the end result\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 17.5 minutes\n\nHow to Make a Grid Layout\n\nCreate a responsive grid layout with techniques that you can adapt to different designs.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 10 minutes\n\nMixing Content from Different Models\n\nLearn how to embed a section that displays data model content inside of a Next.js page. Includes:\n\nOverview of the video's contents\nNext.js and Shopify starter with Shopify plugin setup instructions\nCode for this tutorial\nLive demo\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 33 minutes\n\nBuild a Page with Templates\n\nUsing a pre-built Template, you can create your first Builder page quickly. Follow this tutorial to create your page in four steps. Then, have fun customizing your page.\n\nSkill set: Basic\n\nArea: UI only\n\nVideo coming soon\n\nGet Up and Running with the Visual Editor\n\nLearn your way around the Visual Editor by creating a page, using blocks, and styling your creation in this in-depth half-hour tutorial.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 29 minutes\n\nCreate a Site Theme\n\nChange site colors instantly with Data models that feature color pickers. Teammates can iterate on color palettes and make as many as they need.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 3 minutes\n\nSet Up Server-side Redirects with Next.js\n\nUse a Builder Data model with your Next.js app to redirect site traffic from one URL to another.\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 2 mins\n\nSet Up and Use Product Data\n\nUse a Builder Data model to create Product Data and use that Data in the Visual Editor with data binding.\n\nSkill set: Intermediate\n\nArea: UI\n\nLength: 4 mins\n\nMake a Landing Page Series\n\nFollow this six-step tutorial to make a responsive landing page.\n\nSkill set: Basic\n\nArea: UI\n\nLength: Six 5-minute videos\n\nCreate a Countdown Timer Hero\n\nUse a built-in Builder template or custom code to create a countdown hero.\n\nSkill set: Basic OR familiar with code\n\nArea: UI or code\n\nLength: 21 sec for built-in template."
  },
  {
    "title": "Tracking Custom Events - Builder.io",
    "url": "https://www.builder.io/c/docs/tracking-custom-events",
    "html": "Tracking Custom Events\n\nYou can track custom events to evaluate your content's performance. For example, you can:\n\nmeasure A/B test performance by custom events, such as add-to-cart rates or average order value\nbreak down impressions and conversions by product views or orders\nbuild completely custom dashboards associated with Builder content and sessions\nTracking custom events in JavaScript\n\nYou can track a custom event using JavaScript or with the Visual Editor's JS editor or within your own codebase. Custom events can have any name.\n\nIn Builder content or from the the custom JavaScript panel, track an event within an action binding:\n\nbuilder.track('yourEventName');\n\nAlternatively, you can track a custom event using JavaScript within your own codebase:\n\n// Or, track an event within your project's code\nimport { builder } from '@builder.io/sdk';\nbuilder.track('yourEventName');\n\nIf you're using web components, such as Shopify hosted, you can access the global Builder instance from any script tag or function. Note that in this case, you might need to wrap the call in a setTimeout() to ensure BuilderWC is loaded:\n\nBuilderWC.builder.track('yourEventName');\nImporting the SDK\n\nTo import the latest SDK, specify the framework as follows:\n\nimport { track } from '@builder.io/sdk-...'\n\n// Next.js, App Router\nimport { BuilderContent } from \"@builder.io/sdk\";\n\n// Qwik\nimport { getContent } from \"@builder.io/sdk-qwik\";\nimport {\n  getContent,\n  RenderContent,\n  getBuilderSearchParams,\n  type RegisteredComponent,\n} from \"@builder.io/sdk-qwik\";\n\n//  React, Remix, Hydrogen, Gatsby\nimport { BuilderComponent, builder, useIsPreviewing } from \"@builder.io/react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\nimport { BuilderComponent } from '@builder.io/react';\n\n\n// Vue\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue2';\nimport { getContent, RenderContent, isPreviewing } from '@builder.io/sdk-vue/vue3';\n\n// Nuxt\nimport { RenderContent, getContent, isPreviewing } from '@builder.io/sdk-vue'\n\n\n//  Svelte\nimport { RenderContent } from '@builder.io/sdk-svelte';\n\n//  Angular\nimport { BuilderModule } from '@builder.io/angular';\n\n\n\n\n\nAccessing custom events in the overview dashboard\n\nTo display metrics for your custom events on the overview dashboard, take the following steps from the content entry where you use your custom event:\n\nNavigate to the Insights tab.\nClick on the three dots in the top right corner and choose Customize Metrics.\nSelect Manage Custom Events.\nAdd a new event to start tracking your custom event on the dashboard.\n\n5. Enter the Event Name, matching the string supplied to builder.track().\n\n6. Add a Display Name to label your custom metric on the dashboard.\n\n7. Optionally add a Description for the event.\n\n8. Click Submit and make sure the new event is checked to start tracking.\n\nFor more information, refer to Viewing Metrics with Insights.\n\nUsing event tracking with Gen 2 SDKs\n\nWith the Builder Gen 2 SDKs, you can use Builder's event tracking module to:\n\ntrack events\ntrack data retrieval\nhandle API requests\n\nYou can create event objects, check if tracking is enabled, and send the event data to a tracking API.\n\nTo track and send the event data to the tracking API, use the track() function with an object containing the type property.\n\nThe type property specifies the type of event you want to track. It can be one of the predefined values:\n\nimpression\nconversion\nclick\nsome-custom-event.\n\nYou can choose the appropriate type based on the event you want to track. For example:\n\n// Make sure you're using a Gen 2 SDK\nimport { track } from '@builder.io/sdk-vue'\n\ntrack({\n  type: 'impression' | 'conversion' | 'click' | 'some-custom-event',\n  apiKey: YOUR_API_KEY\n});\n\nAccessing custom events from SQL\n\nenterprise plans\n\nYou can incorporate custom events into your custom dashboards by modifying your dashboards' SQL queries. For more information, see Programming Custom Dashboards."
  },
  {
    "title": "Spaces - Builder.io",
    "url": "https://www.builder.io/c/docs/spaces",
    "html": "Understanding Spaces\n\nWhere an Organization is like a building, a Space is like a room within that building. Cross-functional teams do most of their work in a specific Space. When setting up and managing users, an Admin determines who can access which Spaces.\n\nSpaces separate content\n\nUse a Space as a dedicated place to work with complete separation of content. Generally, one Space integrates with one app or codebase.\n\nExamples include:\n\nSpaces for separate projects or sites: for example, one Space for an e-commerce store and another for a marketing site\nSpaces for separate brands: for example, managing multiple brands with separate sites and teams\nSpaces for separate business units: for example, separate sites and teams per locale\n\nTip: Multiple spaces are ideal when there is no content overlap. If you do have content and user overlap, consider instead, one Space in which you tailor user experience with targeting and custom fields.\n\nSpaces reside within Organizations\n\nAll Spaces are within Organizations. Organizations and Spaces are available through the flyout menu at the upper left of the Builder UI. The following video shows accessing two different Spaces that reside within the same Organization.\n\nIf the Space you need isn't in the list but does exist in that Organization, contact your team's Admin to make sure they've added you to the Organization and Space.\n\nTip: If you're using the Builder Shopify app, each store is a separate Space. When you install the app on your store, a Builder Space is automatically created.\n\nIntegrate your Space with your codebase\n\nOne Space is usually integrated with one codebase or app. With an integrated app, your developer can integrate Pages, Sections, and Data.\n\nThis means that a developer can work on the code while non-developer teammates create and iterate on content entries. The developer can create drag-and-drop components that render in the Visual Editor in the integrated Space.\n\nIn this way, an integrated Space is a visual place for all members of your team to collaborate on an app.\n\nA Space is where you complete everyday tasks such as:\n\nManage users specific to that Space\nCreate models and content entries\nAccess content insights\nSet up targeting\nManage A/B Testing\nUse integrations and plugins\nAccess your Space Public and Private API Keys\nAccess your environments (Enterprise plans)\nUsers and Permissions\n\nContributors, Editors, Designers, Developers, and Admins collaborate in a dedicated Space.\n\nWhen setting up and managing users, an Admin determines who can access which Space(s). All users must exist in the parent Organization as well as in the Space they need to work in.\n\nIf you're on an Enterprise plan, you can use custom roles to limit what users can see even if the content is all within a single Space. Additionally, you can specify permissions by environment. For more detail, see Environments and Permissions.\n\nFor more information, see the following documents:\n\nRoles and Permissions in a Space\nManaging Users\nUse Environments for different stages of app development\n\nenterprise plans\n\nWith an Enterprise plan, you can create environments for a Space. Environments help you develop content and models and push to production when you're ready. You can also granularly leverage Live Sync, which automatically updates content and models.\n\nFor more information Setting Up Environments.\n\nWhat's next\n\nThis document covered the underlying concepts of Spaces. To learn how to accomplish Space-specific tasks, see Managing Spaces."
  },
  {
    "title": "Creating a sidebar (hamburger) menu in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/sidebar-menu",
    "html": "Creating a Sidebar (Hamburger) Menu in Builder\n\nMany websites hide certain navigation links on smaller devices in order to limit the amount of content that they display on a user's device. A common technique for this is to put those navigation links in a sidebar or hidden menu that pops out when a user clicks a particular icon. On most websites this icon consists of three stacked horizontal lines, which many people have dubbed a \"hamburger icon\" (☰).\n\nIf you use Builder's sidebar menu template on your website, when a visitor clicks on the icon a sidebar with a list of whatever links or content you want to add will pop out. Customizing the content and styles of the the sidebar menu are a breeze thanks to Builder's editing capabilities.\n\nHow to use it\n\nOpen up the Builder page or component you are working on and the \"block templates\" button. This will pull up a modal with a list of templates. Select the one called \"sidebar (hamburger) menu.\" If you do not see it, search for it using the search bar.\n\nAfter you click to use the sidebar (hamburger) menu, drag it to where you would like to place it on the page. In this example we added it to the top of the page, which is a common location for this type of sidebar menu icon. You can also choose to show the icon and sidebar menu only for certain devices (such as mobile), by using Builder's built in \"hidden\" functionality that can be found on the style tab for any element.\n\nTo edit and customize the contents of the sidebar, click on the hamburger icon (☰) in the website preview area. This will cause the sidebar menu to open up. Once that opens, you can click on any element inside and change each one to meet your needs, add new elements, or remove elements.\n\nThe sidebar menu was built using Builder's symbol and template tools, meaning that we can edit and customize the look and feel to fit the site. For example, if you would like to change the color of the \"hamburger\" icon, you can select the menu icon and choose a new color. One thing to note is that since the icon is interactive, the easiest way to select it for making modifications is through the layers tab. If you click on the icon in the editor, it will open the sidebar navigation, just like it would when used on your live website.\n\nYou can also choose to disable the animation of the sidebar as it comes in. In order to to that, go to the layers tab and click on the \"Hamburger Menu\" layer. Then click on the options tab. You will see an option for \"Animate overlay.\" Toggling this option will turn the animation on and off.\n\nUp next\n\nConnecting forms with Zapier"
  },
  {
    "title": "Making a dropdown menu in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/dropdown-menu",
    "html": "Creating a Dropdown Menu in Builder\n\nLearn how to use and customize the Builder dropdown menu!\n\nHow to use the dropdown menu\n\nOn your Builder page, select the \"block templates\" button. Select the template called \"dropdown menu.\" If you do not see it this template, you can use the search bar to find it.\n\nWhen to use the dropdown menu\n\nThe dropdown menu is best used in desktop mode. For devices without a mouse (tablet/mobile), it may be best to switch to the sidebar (hamburger) menu. After you select the dropdown menu, drag and drop it where you want it on your page. In this example we added it to the navigation bar. You can also choose to show the dropdown menu only for certain devices (such as desktop), by using Builder's \"hidden\" functionality that can be found on the style tab for any element.\n\nTo edit and customize the contents of the dropdown menu, you can hover over and then select the content in the dropdown content box. Another way you can edit/select the content in the dropdown menu is by going to the “Layers” tab and selecting the element you want to edit.\n\nPersonalizing the dropdown menu\n\nThe dropdown menu is fully customizable. You can edit and customize the look and functionality to fit the aesthetic of your page. For example, if you would like to change the font color of the links, you can select the link you’d like to modify and choose a new color. Another example is if you would like the links to change font or background color when hovered over, you can add this animation in the “animations” tab.\n\nCustomizing the animation\n\nYou can also choose to change the animation of the dropdown menu. For example, you can go to the “Data” tab and change the “mouseover” to “click”, then the dropdown menu won’t appear until a user clicks on the link. You can also change the transition of the dropdown menu.\n\nUp next\n\nSidebar menu"
  },
  {
    "title": "Opening and editing Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/opening-and-editing-symbols",
    "html": "Opening and Editing Symbols\n\nWhen you select a Symbol in the Visual Editor, it is offset by a purple border and a label that says Symbol. Because Symbols are identical and receive their updates from a single source Symbol, you have to make changes to that source Symbol in order to see the effects in all the instances of that Symbol.\n\nTo edit a basic Symbol, modify the source Symbol and publish. When you publish changes to a Symbol, Builder immediately updates all instances of that Symbol. For example, if you edit your header Symbol and publish, anywhere you use that header Symbol updates automatically.\n\nThe following video explains how to open and edit Symbols, and the steps are outlined below the video.\n\nOpening a Symbol from a page\n\nOn a page that contains your Symbol, select the Symbol:\n\nClick the Edit button.\nClick the Edit Symbol button.\n\nThis opens the Symbol where you can make edits.\n\nOpening a Symbol directly\n\nAn alternative to opening a Symbol from a page is to open it directly:\n\nOn the Content page, select Symbol on the left.\nSelect your Symbol from the list that displays on the right.\n\nThis opens the Symbol where you can make edits.\n\nEditing a Symbol\n\nMake sure you've opened the Symbol with one of the methods above. When you're done, select the Publish button to immediately update all instances of the Symbol in your app.\n\nEditing Symbols in this way applies changes to all instances of a Symbol. If you want to create Symbols that contain parts that team members can edit while maintaining design integrity, visit Adding Inputs to Symbols."
  },
  {
    "title": "Creating a live instagram widget in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/instagram-templates",
    "html": "Creating a Live Instagram Widget\n\nYou can use Builder's Instagram integration to connect your Instagram account to Builder so your posts appear in your Builder apps! This doc shows you how to accomplish the integration, how to use our Instagram Templates, and how to create your own Instagram Template.\n\nIntegrating your Instagram account\n\nTo integrate your Instagram account, navigate to the Builder Space where it will be used. Scroll down to the Social Media section and edit it.\n\nChoose Instagram, and choose Connect. You're prompted to log into your Instagram and to allow Builder to access your posts.\n\nYou're then directed back to Builder.\n\nBuilder Instagram templates\n\nBuilder provides four Instagram templates, which are shown in the screenshot below. You can drag and drop any of these templates onto the Editor and connect to your Instagram account:\n\nCarousel template\nGrid template\nScroll template\nGrid with modal template\nUsing a template\n\nTo use one of the Builder Instagram Templates, navigate to the Insert tab in the Editor and click the Builder.io logo over the word Templates.\n\nSearch for Instagram, and you'll see the four Instagram templates displayed.\n\nClick the Template you like and drag it onto the Editor. You'll see your Instagram posts appear. You can now style the Template to your own specs.\n\nCreating your own Instagram Template\n\nTo start, drag a Box block into the editor. Then drag another Box block into the first Box. Into the inner Box drag an Image block (for your Instagram images) and a Text block (for your caption). The text can be either above or below the image.\n\nCreating your data bindings\n\nNext, navigate to the Data tab. Click the Edit Content JS + CSS button at the bottom of the tab. In the JavaScript section, paste the following code. To see where, watch the video below.\n\n  fetch(`https://cdn.builder.io/api/v1/instagram/media?apiKey=${context.apiKey}`)\n  .then((res) => res.json())\n  .then((data) => {\n    state.instagram = data.data;\n  })\n\n\nWhile still in the data tab, select the inner box containing the image and text and select Instagram in the Repeat for each dropdown menu. This will create a box for each Instagram post.\n\nNext, select the image. While in the data tab, click + New Binding and choose Image for the Get field and Instagram Item - Media Url for the From field.\n\nRepeat this step for the text, but select Text for the Get field and Instagram Item - Caption for the From field.\n\nNote, as shown in the video below, if you don't see Caption, just choose another element such as username, and then edit the code using code view < > from username to caption.\n\nNow your Instagram images and captions appear! You can customize and style your Instagram template.\n\nSave your new Instagram Template\n\nTo save the Instagram Template you just created for use in other areas of your app, simply select the outer box that contains all the other boxes and in the Edit dropdown, click Save as Template. Choose whether you want to save the Template for use across your Organization. Now you have can have your Instagram posts appear anywhere you drag the Template.\n\nHere's how your Instagram posts look. Feel free to style your Template to meet your needs.\n\nThat's it! You now have your Instagram posts integrated into your Builder app, and a Template you can use anywhere!\n\nFor more information, refer to Creating Templates."
  },
  {
    "title": "Symbols with blocks - Builder.io",
    "url": "https://www.builder.io/c/docs/symbols-with-blocks",
    "html": "Creating Symbols that Accept Blocks as Inputs\n\nSymbols help you work more efficiently by centralizing reusable content. This document shows you how to configure your Symbol so that you can drag and drop blocks as needed into the Symbol. This is helpful for iterating on a Symbol, A/B testing, and targeting.\n\nPrerequisites\n\nTo add blocks to a Symbol, you need to have a Symbol to work with. If you don't already have one, create one with the instructions in How to Make a Symbol.\n\n👉 Tip: If you use Builder's React SDK, make sure you're on a version >= 1.1.41.\n\nStep 1: In the Symbol\n\nTo configure a Symbol to accept blocks, take the following steps:\n\nOpen your Symbol.\nFrom the Code section of the Insert tab, drag in a Slot block.\nClick the Publish button.\n\n👉 Tip: You can have multiple slots as long as you give them different names. You can set the name of a slot from the Options tab when selected.\n\nStep 2: Using the Symbol\n\nAfter you've published the Symbol, you can use it by following these steps:\n\nOpen the page where you want to use the Symbol.\nIn the Insert tab, expand the My Symbols section and drag in your Symbol.\nWith your Symbol on the page, the Visual Editor indicates the Slot with a blue section and + Add Block button.\nDrag any block into the Slot.\nNext steps\n\nSymbols are a powerful Builder feature. To find out more about Symbols, check out the following guides:\n\nScheduling Symbols: Decide when a Symbol goes live.\nAdding Inputs to Symbols: Bind data to your Symbols"
  },
  {
    "title": "Adding Inputs to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/adding-inputs-to-symbols",
    "html": "Adding Inputs to Symbols\n\nTo create and maintain a reusable part of your website in one place, use Symbols. A minimal Symbol is identical everywhere, but sometimes you need an almost identical piece of your site that you can tweak individually without affecting other instances of that Symbol.\n\nIn cases where you want to enable editing of certain features but keep maintenance centralized, you can configure Inputs for your Symbols. An Input is a way for you specify that a certain part of the Symbol, such as text or an image, is changeable.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols and have a Symbol you'd like to configure. If you're new to Symbols, check out the following articles first:\n\nReusing Blocks\nIntroduction to Symbols\nHow to make a Symbol\nAdding an Input to a Symbol\n\nTo make a Symbol editable on a per instance basis, you need to configure Inputs. Use Inputs to make text blocks, images, or any other kind of content in a Symbol editable.\n\nIn the Symbol\n\nOn the Symbol's Data tab:\n\nAdd a new Content Input by selecting + New Field in the Content Inputs section.\nName your new field and choose its type.\nIn the Content State section, find your new Input and enter some default text.\nSelect the Block you want to make editable and click Edit.\nSelect the four dots and specify the Input you just created.\nSelect the Publish button to make your changes in all instances of the Symbol.\nOn the page where you're using the Symbol\nAdd your Symbol to the page if you haven't already.\nSelect your Symbol.\nOn the Options tab, edit the content of the Inputs you created.\nDeleting Content Inputs\nOpen the Symbol and go to the Data tab.\nUnder Content Inputs, select the X to delete the Input.\nSelect the block that was associated with the Input.\nOn the Options tab, select the four dots and select Remove Binding.\nMaking a Symbol inline or turning a Symbol into a regular Block\n\nDecoupling a Symbol from its Source creates a standalone Block, which no longer inherits from the Source Symbol. This Symbol becomes inline.\n\nSelect the Symbol and click the Edit button.\nIn the Edit window, select Detach Symbol."
  },
  {
    "title": "Scheduling Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/scheduling-symbols",
    "html": "Scheduling Symbols\n\nWhen you need a reusable Block but want it to publish only under certain circumstances, create a Dynamic Symbol. This article walks you through how to set up a hero image on your site that you want to switch according to a schedule.\n\nThe following four images are examples of season-specific heroes that you can schedule to display at the appropriate times in Builder–one each for summer, fall, winter, and spring.\n\nPrerequisites\n\nYou'll get the most out of this article if you're already familiar with the fundamentals of Symbols. You should have the following:\n\nAt least two Symbols to work with\n\nIf you're new to Symbols, check out the following articles first:\n\nReusing Blocks: get to know all the options.\nIntroduction to Symbols: learn about what Symbols can do for you.\nHow to make a Symbol: follow a quick tutorial to make basic reusable blocks.\nCreate a custom Model\n\n👉Tip: If you already have a custom model, you can skip to the next section.\n\nGo to the Models section.\n\nSelect the +Create Model button.\n\nChoose Section.\n\nName your new Model and select the Create button. In this example, the name is Homepage Hero, but you can name it anything that works for your project.\n\nIn the Symbols: picking dates\n\nOpen the first Symbol and select the beginning date and time for when you want the Symbol to appear on your site. To get the date picker, click on the calendar icon.\n\nSelect the end date and time for the Symbol.\n\nSelect the Publish (Scheduled) Update button (not pictured).\n\nRepeat the scheduling process for any other Symbols that need scheduling.\n\nWhen you've scheduled your Symbols, you'll see their dates in the list in the Content area of Builder.\n\nIn the Page: using Dynamic Symbols\n\nIn the Page where the Symbol should appear, go to the Insert tab and select the Show More button.\n\nDrag and drop a Symbol Block onto the page.\n\nSelect the Edit button.\n\nIn the Model dropdown, select your Model. Here it's Homepage hero, the custom Model we made in the beginning of this article.\n\nLeave Entry blank.\n\nToggle Dynamic to the On position.\n\nMaking sure the right Symbol shows\n\nTo have a default Symbol, publish one Symbol with no dates associated and drag it to the bottom of the group of Symbols you're scheduling.\n\nIn this example, there are four scheduled Symbols and one backup, just in case there's a gap in the dates."
  },
  {
    "title": "Introduction to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/symbols-intro",
    "html": "Intro to Symbols\n\nWhen you want to create one element, reuse it throughout your site, and update all instances at once, use a Symbol. When you edit and Publish updates, the Symbol updates apply immediately to all occurrences of that Symbol throughout your app.\n\nYou can use Symbols for any content you want to reuse, such as a header, footer, or products. In fact, you can use it for repeated content that you want to use many places, such as a definition, an introductory paragraph or even a section of illustrated code.\n\nMake it once, reuse infinitely\n\nSave time by creating reusable elements such as headers, footers, navigation, and forms. Updates apply automatically to all instances of your Symbol.\n\nTo create your own Symbol, see How to create a Symbol.\n\nCustomizing your Symbols\n\nOccasionally, you might require an element like a product recommendation section or banner that needs to vary under specific conditions. In such cases, you can detach a Symbol from its source, Making a Symbol inline, which converts it into a standard Builder block. This way you can make inline changes for that particular instance.\n\nFor more on customizing Symbols, visit Adding Inputs to Symbols.\n\nTip: For a reusable component that you can edit individually, see Creating Templates. Templates are like Symbols, but when you edit a Template on a page, the other instances of that Template don't change.\n\nAdding a symbol to another account\n\nAt this time, you cannot transfer a symbol from one account to another. One workaround is to download your symbol and upload it to your other account.\n\nOpen the symbol you want to copy.\nRight click on the symbol and select Download content as JSON.\nCreate a new page in your other account, right click in the editor window, and select Upload builder.json file."
  },
  {
    "title": "Managing Content Size - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-content-size",
    "html": "Managing Content Size\n\nKeeping your content as small as possible is a best practice throughout web development. With less to deliver, your content can load faster and improve your app's UX.\n\nWhile minimizing how much data your users have to download, you can still deliver graphics, video, and beautiful content with a few pointers and techniques in mind.\n\nUsing optimized images and videos\n\nImages and videos are often large files, which means if they aren't optimized, you could be making visitors to your site download more data than they need. This in turn can slow down your site precisely when you need to capture visitor attention.\n\nBuilder comes with a number of features that automatically optimize assets that tend to use a lot of data.\n\nFor still pictures, use the Image block, as recommended. For more detail, read Working with Images.\nFor videos and gifs, get acquainted with your options for featuring videos in Working with Videos.\nUsing Symbols\n\nIf you have content that is potentially reusable, consider using a Symbol to help mitigate size issue on a Page. The benefits of using Symbols include:\n\nSymbols don't contribute to the file size.\nA symbol turns any component into reusable content that you can drag and drop onto any Page.\n\nFor more information on Symbols, read Intro to Symbols and Making a Symbol.\n\nChecking content size\n\nIn the Visual Editor:\n\nRight-click in the work area of your content entry.\nFilter and select Download Content as JSON.\n\nAfter you download the content, right click on the downloaded file and check file size. On a Mac, choose Get Info and on Windows choose Properties.\n\nReducing file size\n\nWhen a content entry is too big, saving returns an error. This section covers the error and suggests additional measures you can take to reduce the size of your content entry:\n\nRecommendations\n\nIf you have optimized images, used the Image and Video blocks, and—if applicable—used Symbols, but are still getting the above error, check the following table for common pitfalls and suggestions for improvement.\n\nIssue\tSuggestion\n\nToo many A/B test variations on a Page\n\n\t\n\nRemove unnecessary or unused tests or variations, so they don’t count toward the file size limit.\n\n\n\n\nToo many elements on the page or big chunks of code in custom code blocks; for example, large SVG in custom code blocks.\n\n\t\n\nUse a jpg or png in an Image block instead of an svg in custom code blocks. Builder's Image and Video blocks automatically optimize pictures and videos. If you still need to use an svg, be sure to minify it using an external tool.\n\nUsing a jpg or png rather than an svg saves space because the actual image is not stored in the content entry, unlike an svg.\n\nFor more accuracy, a developer can check file size in the browser's developer tools Network tab.\n\nWhat's next\n\nIn addition to managing content size, always use Best Practices to help you build great experiences."
  },
  {
    "title": "Using Builder with Customer Data Platforms - Builder.io",
    "url": "https://www.builder.io/c/docs/cdp-with-builder",
    "html": "Using Builder with Customer Data Platforms\n\nCustomer Data Platforms (CDP) help you track and identify user characteristics and group them into Traits, Personas, and Audiences.\n\nWithin Builder, you can use these CDP groups as custom targeting attributes for robust personalization.\n\nStep 1: Add a custom targeting attribute to Builder\n\nYou can personalize Builder content based on various attributes. For example, to target content based on the current user audience type, define a custom targeting attribute for audience:\n\nGo to Account Settings.\nClick the Pencil icon next to Custom Targeting Attributes.\nClick +New Target Attribute\nEnter a name such as audience for Name.\nLeave String as the Type.\nClick Save.\nStep 2: Configure your code\n\nNext, from your codebase, fetch the current user audience type and set it using Builder's SDK:\n\nbuilder.get('your-model', {\n// Before the Builder content is fetched, set up segment\n// alternatively, Builder also accepts the targeting \n// attribute as a query param for direct API calls\n const audienceSegment = await myCustomCDP.identify({ user: currentUser.id })\n \n// fetch corresponding content to the targeted audience\n builder.setUserAttribute({ audience: audienceSegment.name })\n\n\n\nNow that you have set up your host to send the user's audience type, you can target content specifically to any of the audience types defined in your CDP.\n\nAdditionally, tracking events enables your CDP to automatically assign the audience type to your current users based on their interactions with your content:\n\n import { BuilderComponent } from '@builder.io/react'\n\n <BuilderComponent \n   model=\"page\" \n   contentLoaded={(data, content) => {\n   amplitude.track('builderImpression', {\n      contentId: content.id,\n      contentName: content.name,\n      testVariationId: content.testVariationId,\n      // Make sure to edit the variant name in Builder with a descriptive name\n      testVariationName: content.testVariationName\n     })\n   }\n />\n \n\nHow Builder and CDPs work together\n\nTraditionally, creating personalized content for specific audience types, such as VIPs, followers, or casual users required implementing numerous if-else statements in the code, leading to complex and difficult-to-maintain logic.\n\nCustomer Data Platforms (CDPs) help solve this issue by providing advanced machine learning algorithms or rule-based systems to categorize users into different traits, personas, or audiences based on their characteristics and interactions. For instance, CDPs can mark users as followers if they subscribe to a newsletter, or as VIPs if they have made significant purchases.\n\nTo use a CDP's audience categorization in Builder, developers need to consult the CDP by passing the current user ID (or anonymous ID) to the CDP's API endpoint for user categorizing. The CDP then provides information about the user's traits, behaviors, and interactions, which can help determine the appropriate audience type.\n\nOnce the audience type is identified by the CDP, it should be passed down as a user attribute to Builder, by using the setUserAttribute() function provided by Builder's SDK, as shown in the code snippet above. Then you can use the audience attribute for custom targeting in Builder, enabling content personalization based on the user's audience type.\n\nMoreover, CDPs offer flexibility in defining various attributes for targeting, such as \"big spender\" or other custom traits. This helps developers target content based on a wide range of user characteristics, which ensures more granular and effective personalization.\n\nWhat's next\n\nFor more information on targeting in Builder, refer to:\n\nTargeting and Scheduling Content\nCustom targeting Attributes"
  },
  {
    "title": "Targeting with e-commerce plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-targeting",
    "html": "Targeting with E-commerce Plugins\n\nYou can target your content using custom types provided by e-commerce plugins after your developer has set one up. For example, you can:\n\nDisplay an announcement bar with a coupon code when customers have a specific item in their cart.\nSet up calls-to-action that display when viewing products from certain collections.\nMake recommendations based on the item your customer is currently viewing.\nTargeting your content with e-commerce targeting condition types\n\nYou can start by selecting Targeting from Visual Editor's top toolbar.\n\nIn the Targeting window, select +TARGET to add a new target.\n\nSelect the drop-down box next to WHERE to add a new targeting condition.\n\nNotice that in addition to the default Device and Url path, the e-commerce plugin also adds three new targeting condition types: Item in cart, Collection handle, and Product handle.\n\n👉 Tip: The example below displays targeting condition types specific to the Shopify plugin. The types that you see may differ based on which plugin you use.\n\nLet's select Item in cart for our example.\n\nAfter selecting a condition type, you can select a resource to match your new targeting condition.\n\nSelecting Choose product in the example below displays a searchable list of products from our connected Shopify store, where we can choose a product to target.\n\nIn this example, we select Short sleeve t-shirt from the example list below to target the product handle associated with the product.\n\nHaving set up the targeting condition, the content now appears whenever a Short sleeve t-shirt is in the user's cart.\n\nfor developers\n\nAfter creating targeting conditions for your content, you must configure your site to pass the appropriate data to Builder.\n\nYour targeting won't work until completing this step because Builder can't automatically infer when an e-commerce targeting condition—for instance, when a user has added a particular item to their cart—has been met.\n\nThis step involves your developer. See Setting up e-commerce targeting for more information."
  },
  {
    "title": "Scheduling Content - Builder.io",
    "url": "https://www.builder.io/c/docs/scheduling",
    "html": "Scheduling Content\n\ngrowth plans\n\nYou can specify a date and time to publish a Page or Section so that your content goes live when you want it to.\n\nTip: This document covers concepts and scheduling individual content entries. For scheduling in bulk, visit the Scheduling Multiple Content Entries section of Bulk Actions.\n\nTo schedule a Page or Section:\n\nOpen the Page or Section you want to schedule.\nIn the Visual Editor, click the Schedule Entry icon in the upper right of the screen. The icon resembles a calendar with a small clock.\nSelect the start and end dates. If you do not choose an end date, the entry will remain in a published state. If you choose an end date, make sure to have a fallback entry. For more detail, read Working with schedules that end later in this document.\n\nIn addition, you can use the Scheduler to view and edit scheduled content entries.\n\nCreating a new version\n\nWith versions, you can iterate freely to schedule variations of your content.\n\nTo make a new version of a content entry:\n\nGo to the Versions tab.\nClick the New Version button.\n\nAlternatively, click the three dots in the upper right corner of the page and select Duplicate. Duplicating or creating a new version has identical results.\n\nFor more information on using scheduling with targeting, visit Targeting Content.\n\nHow Builder determines priority\n\nWhen you have multiple versions of a content entry, Builder uses specific criteria to determine which content entry to deliver.\n\nThe criteria that Builder uses to choose the content entry to deliver are:\n\nThe content entries must be published; if they are scheduled, their scheduled publication must include the current date and time.\nAny targeting attributes must be met.\nBuilder starts evaluating from the top of the content list. If two published content entries both meet the first two criteria, Builder chooses the one that comes first in the list.\nExample\n\nConsider the following example of three versions of an about page; about, about 2, and about 3. All content entries have the same URL, with one currently published and two other versions scheduled one after the other.\n\nThe screenshot below shows the example about page versions in Builder. The one on the bottom of the list will always be fetched as long as it's published unless about 2 or about 3 are published, which is during the time between the start and end dates for those schedules.\n\nThe following table notes each content entry, its schedule (if any), and notes on how Builder prioritizes that content entry.\n\nVersion of page\tSchedule\tNotes\n\nabout 3\n\n\t\n\nNov 12 – Nov 20\n\n\t\n\nGoes live only between the scheduled start and end dates\n\n\n\n\nabout 2\n\n\t\n\nNov 6 – Nov 12\n\n\t\n\nGoes live only between the scheduled start and end dates\n\n\n\n\nabout\n\n\t\n\nnone, currently published\n\n\t\n\nLive, unless about 2 or about 3 are published. When the schedule for about 3 has ended, this page (about) is delivered.\n\nAlways have a fallback\n\nNotice the order of the entries in Builder. The two scheduled versions are higher in the list than the default version and the default version remains published, even during the timeframe when about 2 and about 3 are scheduled.\n\nThis way, if for any reason about 2 or about 3 doesn't publish when expected (such as with an unintended gap in the schedule), the original about page acts as a fallback and renders.\n\nTip: To reprioritize content entries, drag and drop them in the list using the drag handle.\n\nWorking with schedules that end\n\nThough an end date for a content entry is optional, be aware that if you do have an end date scheduled, that Builder unpublishes that entry at the specified date and time.\n\nTo make sure that you still have content available, always have a fallback content entry.\n\nExample: a temporary version of a Page\n\nConsider an example of a homepage that you'd like to change for a week, but then after that week is over, you'd like to automatically revert back to your usual homepage.\n\nThe workflow would be:\n\nMake a new version of the original homepage and make your changes in the new copy.\nSchedule the copy of the homepage to go live for the week you'd like it to replace the usual homepage.\nLeave the original homepage published. In this way, when the temporary homepage goes offline, the original homepage will be served instead.\n\nTwo important points to remember are:\n\nKeep the URLs the same.\nThe temporary page should be higher in the content list than the fallback (usually the original).\nWhat's next\n\nIn addition to scheduling within a content entry, you can manage schedules in other ways and use Targeting to deliver the right content to the right customers at the right time.\n\nWork with your schedules Using the Scheduler and Calendar View.\nFor more on targeting, refer to Targeting with E-commerce Plugins.\nFor custom targeting for developers, refer to Custom Targeting Attributes."
  },
  {
    "title": "Using the Scheduler - Builder.io",
    "url": "https://www.builder.io/c/docs/scheduler",
    "html": "Using the Scheduler and Calendar View\n\ngrowth plans\n\nWhen you schedule content in the Visual Editor, you can view and edit those scheduled content entries in Builder Scheduler. The Scheduler displays your scheduled content in a familiar calendar view, which shows all scheduled entries for a given time frame.\n\nYou can display your scheduled content entries in a month calendar view, by week, by day, or by agenda.\n\nPrerequisites\nTo access the Scheduler, you must have a paid plan.\nTo use the Scheduler's features, make sure you have content entries that are already scheduled. For more detail on scheduling content, see Targeting and Scheduling Content.\nUsing the Scheduler calendar view\nMake sure you have some scheduled content.\nGo to Scheduler. If you have any scheduled content for the time frame on display, that content entry shows on the calendar.\nClick a scheduled content entry to view or edit its dates.\nTo save your changes, click the Update Schedule button.\n\nThe following video demonstrates these steps.\n\nRemoving a scheduled date from an entry\n\nWhile you can remove or edit scheduling in the Visual Editor, you can also edit dates from within the Scheduler. To remove a date:\n\nGo to Scheduler.\nClick a scheduled content entry.\nClick on the date you'd like to remove.\nPress Delete.\nTo save your changes, click the Update Schedule button.\n\nThe following video demonstrates these steps.\n\nTip: If you remove both dates for an entry in the Scheduler and click Update Schedule, that entry is no longer scheduled. To schedule a content entry, follow the steps in Scheduling content.\n\nWhat's next\n\nWhile scheduling helps you publish content entries at the right time, you can combine targeting with targeting to make sure that the content reaches the right people at the right time. For more detail on how to use these features together, see Targeting with Builder."
  },
  {
    "title": "Targeting Content - Builder.io",
    "url": "https://www.builder.io/c/docs/targeting",
    "html": "Targeting Content\n\ngrowth plans\n\nTargeting content for specific audiences can help you drive customer acquisition and retention.\n\nYou can target content based on attributes such as whether customers have purchased from a specific collection, their current product page, or if they have a product with a specific tag in their cart. These are just a few examples—there are endless possibilities for targeting.\n\nPrerequisites\n\nTo get the most out of this article, you should be familiar with the following:\n\nTargeting and Scheduling Content\nTargeting options by plan\n\nTargeting options in Builder depend on your plan.\n\nAll plans come with the URL Path targeting attribute.\nGrowth and Enterprise plans offer both URL Path and Device targeting capabilities.\nWith Growth plans and above, can use your own Custom Targeting Attributes.\nBuilder provides e-commerce plugins for various platforms, each equipped with custom targeting attributes.\nAccessing targeting attributes\n\nTo use targeting:\n\nOpen the content entry for which you'd like to configure targeting.\nClick the Targeting icon at the top of the Visual Editor.\nIn the Targeting dialog, click +Target, and choose a property from the dropdown menu.\n\nAs an example, the following video shows targeting where the URL is /demo and the Device is mobile. This means this page is to be delivered when the device the visitor is using is a mobile device.\n\nTargeting by device with SSR? When using SSR or SSG, and targeting by device—such as mobile, tablet, or desktop—you must reference the targeted device in userAttributes as in the following example:\n\nuserAttributes: {\n    ...\n  device: \"mobile\"\n}\n\n\nFor more details on userAttributes, visit the userAttributes entry in the Content API documentation.\n\nFor a Next.js-specific example, refer to this example on GitHub for retrieving userAgent and device type server side.\n\nUsing order with targeting\n\nThe order of content entries in Builder determines how Builder evaluates and determines which content entry to deliver. Builder starts at the top of the list of entries at the specified URL and works its way down to find the entry to render.\n\nFor example, when you have multiple pages set up as alternatives for a specific targeting condition, they all share the same URL. When a user requests that URL, Builder checks each page in the list associated with that URL, starting at the top. The first page that meets the specified targeting condition is the version that is displayed to the user.\n\nExample\n\nConsider three versions of a homepage; home, home 2, and home 3. Each has different content, but they are all at the same URL, as in the following:\n\nhome 3, targeting mobile\nhome 2, targeting desktop\nhome (fallback), with no targeting\n\nHere's how Builder determines which Page to deliver:\n\nFirst, Builder considers all published Pages at the requested URL, /.\nIf home 3 has the Device targeting attribute set to Mobile, and your user visits yoursite.com from their phone, they get the content from home 3.\nIf home 2 targets Tablet, Builder delivers that Page to tablet users.\nThis example also has a fallback, home (fallback), just in case. It's a best practice to be sure all your conditions have a fallback Page in case none of the conditions are met.\n\nWhen you configure targeting, you establish a condition about a user and then deliver the appropriate content to that user. For example, you might want a user on a mobile device to have a different UI from a user on a laptop. Targeting statements follow the below pattern:\n\nWhere condition + operator + value\n\nBuilt-in conditions are:\n\nDevice\nURL Path\n\nSome examples of targeting statements are:\n\nWhere URL is /shoes\nWhere device is tablet\n\nThe operators available are:\n\nis means equal to the value\nis not means not the value. Available for conditions with one possible value; for example, a Boolean.\ncontains means the condition includes in it the string you specify for the value\nstarts with means the condition begins with the string you specify for the value\nends with means the condition ends with the string you specify for the value\n\nAdditionally, if you're on a Growth or Enterprise plan, you can customize targeting to meet your specific needs. For more information, see Custom Targeting Attributes.\n\nTargeting in-depth\n\nThe following video provides an in-depth introduction to targeting in Builder:\n\nFor more information targeting based on query parameters, visit this Builder Forum discussion.\n\nShopify custom attributes\n\nWith Shopify, Builder offers several ways to target content. For example, you can leverage your Shopify customer tags or if a user has specific items in their cart, you can display and even A/B test your content.\n\nDepending on the type of theme page you're working on, such as a homepage, a collection page, or a product page, Builder populates additional targeting parameters specific to the theme page."
  },
  {
    "title": "Integrate Environments with Your Code - Builder.io",
    "url": "https://www.builder.io/c/docs/environments-code",
    "html": "Integrating an Environment with Your Code\n\nin beta\n\nenterprise plans\n\nWhen using environments, you can integrate your code with any of your environments. This document covers how to integrate with an environment other than your main environment.\n\nPrerequisites\n\nTo get the most out of this document, ensure you already have an environment in addition to your main environment.\n\nFor detailed instructions, read Setting Up Environments.\n\nUpdating Preview URLs\n\nThis section covers how to update the Preview URL for a model in an environment.\n\nNotice that when you change the Preview URL in one existing environment, it does not affect the Preview URL on the same model in another environment.\n\nTip: The recommended workflow is to update non-main Preview URLs, even if the model is linked.\n\nIn the environment, modify the Preview URL to reflect the correct URL.\n\nIn the non-main environment you're integrating, go to Models.\nChange the model* Preview URL to the appropriate location—for example, http://localhost:####, where #### is your port, such as 3000—for local development.\nClick the Update Preview URL button.\n\n*As an example, if you're developing Pages, change the Page model Preview URL.\n\nFor more detail on Preview URLs, read Editing and Previewing your Site.\n\nUpdating the API Key in your code\n\nTo get the API key for the environment that you'd like to integrate with:\n\nGo to the main Account Settings > Environments.\nSelect and copy the API Key for the environment you want to integrate with.\nIn your code, replace the API Key of the main environment with the API key of the child environment.\nDeploy the codebase to the relevant URL using the updated API key.\n\nIf you are running the environment locally, no deployment is required. However, if the environment has a specific URL—for example, dev.my-url.com— remember to deploy the changes.\n\nFor more detailed information on API Keys in general, read Using Builder API Keys."
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/forum.builder.io",
    "html": ""
  },
  {
    "title": "Bulk Actions in Environments - Builder.io",
    "url": "https://www.builder.io/c/docs/bulk-actions-environments",
    "html": "Bulk Actions for Environments\n\nin beta\n\nenterprise plans\n\nWhen using Environments on an Enterprise plan, you can link, unlink, or push content entries in bulk.\n\nPrerequisites\n\nTo get the most out of this document, you should already have the following:\n\nBuilder Admin permissions in a Space with an Enterprise plan\nMore than one environment with multiple content entries\nFamiliarity with Using Environments, including syncing and pushing models and content entries\nBulk linking content entries across environments\n\nTip: When you link content entries, all unpushed changes in the child environment are overwritten. If you want to keep your changes in the child environment, you must push to your main environment first.\n\nTo link multiple content entries simultaneously:\n\nGo to Content.\nSelect the unlinked content entries you'd like to link.\nClick Link.\nWhen you're certain you've already pushed changes you want to keep—or are ok with unpushed changes being overwritten—click the Activate Live Sync button.\n\n\nThe video below shows this process with example QA environment:\n\nTip: When you link content entries, the content entries as well as the models must exist in the main environment as well.\n\nBulk unlinking content entries across environments\n\nTo unlink multiple content entries simultaneously:\n\nGo to Content.\nSelect the content entries you'd like to unlink.\nClick Unlink.\nIn the dialogue that opens, confirm that you are turning off Live Sync and that you understand that these content entries will no longer receive live updates by this action.\nClick the Turn Off Live Sync button.\n\nThe video below shows this process with example QA environment:\n\nBulk pushing content entries across environments\n\nTo push multiple content entries simultaneously:\n\nGo to Content.\nSelect the content entries you'd like to push.\nClick Push.\nSelect the environment you want to push to.\nIn the dialogue that opens, confirm that you are aware that this will overwrite any previously existing content in the destination environment.\nConfirm that the environments are correct.\nCheck or uncheck the option to publish upon push in the destination environment.\nClick the Push Now button.\n\nThe video below shows this process with example QA and main evironments:\n\nTip: When you push content entries, the content entries as well as the models must exist in both environments.\n\nWhat's next\n\nThis document covered bulk actions specific to environments. For more information on all bulk actions available, read Bulk Actions."
  },
  {
    "title": "SSO with Entra - Builder.io",
    "url": "https://www.builder.io/c/docs/sso-with-entra?_host=www.builder.io#single-sign-on-with-microsoft-entra-id",
    "html": "Single Sign-On with Microsoft Entra ID\n\nenterprise plans\n\nThere are two main steps to setting up SSO with Builder and Microsoft Entra ID:\n\nConfiguring Entra by creating an application integration.\nConfiguring Builder by adding an Entra SAML Config.\n\nTip: Microsoft has recently renamed Azure AD to Microsoft Entra ID. As of September 25, 2023, some of the features related to Entra ID are still named Azure.\n\nStep 1: Configuring Entra\nNavigate to the Microsoft Entra (formerly Azure) Portal.\nGo to the Microsoft Entra, where and select Enterprise Applications.\nClick on New Application.\nClick on Create your own application. A dialogue opens where you can enter the name of your application and keep the default selected option Integrate any other application you don’t find in the gallery (Non-gallery) as below:\n\nAfter you create your application:\n\nGo to Single sign-on and select SAML as the single sign-on method.\nEdit the Basic SAML Configuration by setting these values:\nIdentifier (Entity ID): https://builder.io\nReply URL (Assertion Consumer Service URL): https://builder-3b0a2.firebaseapp.com/__/auth/handler\nSign on URL (Optional): https://builder.io/login/saml/your-provider-id\n\nAfter you save, the Basic SAML Configuration should include:\n\nIdentifier (Entity ID): https://builder.io\nReply URL: https://builder-3b0a2.firebaseapp.com/_/auth/handler\nSign on URL: https://builder.io/login/saml/builder-sso-saml\nRelay State: Optional\nLogoutURL: Optional\n\nThe screenshot below shows these values in context:\n\nNext, download the certificate from SAML Certificates as below:\n\nStep 2: Configuring SSO in Builder\nVideo demo\n\nThe video below, by one of our excellent engineers, goes through the process of setting up SSO with Entra (formerly Azure) and Builder, from beginning to end. (It wasn't initially made for the docs, but it is so perfect that we just had to add it!)"
  },
  {
    "title": "SSO with Entra - Builder.io",
    "url": "https://www.builder.io/c/docs/sso-with-entra",
    "html": "Single Sign-On with Microsoft Entra ID\n\nenterprise plans\n\nThere are two main steps to setting up SSO with Builder and Microsoft Entra ID:\n\nConfiguring Entra by creating an application integration.\nConfiguring Builder by adding an Entra SAML Config.\n\nTip: Microsoft has recently renamed Azure AD to Microsoft Entra ID. As of September 25, 2023, some of the features related to Entra ID are still named Azure.\n\nStep 1: Configuring Entra\nNavigate to the Microsoft Entra (formerly Azure) Portal.\nGo to the Microsoft Entra, where and select Enterprise Applications.\nClick on New Application.\nClick on Create your own application. A dialogue opens where you can enter the name of your application and keep the default selected option Integrate any other application you don’t find in the gallery (Non-gallery) as below:\n\nAfter you create your application:\n\nGo to Single sign-on and select SAML as the single sign-on method.\nEdit the Basic SAML Configuration by setting these values:\nIdentifier (Entity ID): https://builder.io\nReply URL (Assertion Consumer Service URL): https://builder-3b0a2.firebaseapp.com/__/auth/handler\nSign on URL (Optional): https://builder.io/login/saml/your-provider-id\n\nAfter you save, the Basic SAML Configuration should include:\n\nIdentifier (Entity ID): https://builder.io\nReply URL: https://builder-3b0a2.firebaseapp.com/_/auth/handler\nSign on URL: https://builder.io/login/saml/builder-sso-saml\nRelay State: Optional\nLogoutURL: Optional\n\nThe screenshot below shows these values in context:\n\nNext, download the certificate from SAML Certificates as below:\n\nStep 2: Configuring SSO in Builder\nVideo demo\n\nThe video below, by one of our excellent engineers, goes through the process of setting up SSO with Entra (formerly Azure) and Builder, from beginning to end. (It wasn't initially made for the docs, but it is so perfect that we just had to add it!)"
  },
  {
    "title": "Environments and Permissions - Builder.io",
    "url": "https://www.builder.io/c/docs/environments-permissions",
    "html": "Managing Environment Permissions\n\nin beta\n\nenterprise plans\n\nIf you have environments such as Dev, Staging, QA, and Prod you can specify what users can do in the different environments. For example, you might want some users to focus on certain environments and designate who can push from one environment to another.\n\nThis document covers the available environment permissions that you can set in Builder.\n\nPrerequisites\n\nTo get the most out of this tutorial, you should meet the following:\n\nHave Builder Admin permissions in a space with an Enterprise plan\nHave more than one environment\nHave read Enabling Environments for a Space\nHave read Roles and Permissions and Custom Roles.\nEnvironments and permissions\n\nWhen you create an environment, Builder copies all the existing users and their permissions from the original environment into the new environment.\n\nIf your environments already exist before you create a user, you must add that user to the appropriate environment(s) and assign them a role.\n\nAdditionally, you can use custom roles to specify which permissions a user has in a particular environment.\n\nFor more detail on permissions in general, see Roles and Permissions and Custom Roles.\n\nCustomizing a role in the context of an environment\n\nTo customize a role specific to a non-main environment:\n\nIn the Account Settings Environments tab, enter the environment where you'd like to apply the environment-related permissions. It must be an environment other than your main environment.\nWithin that environment, go to Account Settings.\nClick the pencil icon to the right of Roles.\nOpen an existing role or add a new role, depending on your use case.\nWith the role expanded, scroll to the Environment Access section. This section only shows for Enterprise plans, and only in non-main environments.\nSelect the options as appropriate.\n\nThe available environment-related permissions are:\n\nAllow linking: allows users to link or unlink content from an environment. For more information on linking and Live Sync, see Syncing environments with Live Sync.\nPush content/models: allows users to push content and models from this environment to all other environments. To limit this access, uncheck this option to show a list of your environments and check only the environments that you want that role to be able to push to. If a role does not grant permission to push, users can request to push. For more detail on what pushing means, see Pushing changes from a child environment.\n\nThe following video demonstrates this process:\n\nFor more detail on permissions in general, see Roles and Permissions and Custom Roles.\n\nAdding a user to an environment\n\nAdding a user to a non-main environment is identical to adding a user to a space without environments with the only difference being that you need to explicitly add the user to the non-main environment that you'd like them to work in.\n\nTo add a user to an environment:\n\nIn the Account Settings Environments tab, enter the environment that you'd like the user to access. It must be an environment other than your main environment.\nWithin that environment, go to Account Settings > Users.\nClick the Add New User button.\nAdd the new user by filling out the dialogue and clicking the Create button.\n\nBuilder sends the new user an email with instructions for activating the new access.\n\nThe following video demonstrates this process:\n\nFor more detail on permissions in general, see Roles and Permissions and Custom Roles.\n\nRequest to push to an environment\n\nIf you have users who don't have access to push but who have completed work and are ready for that work to move to the next environment, they can request that an Admin push.\n\nRequest to push for content\n\nTo request a push as the user with restricted access:\n\nIn the environment from which you would like to push, open the content entry.\nOn the upper right of the Visual Editor, click the down arrow beside Unlinked. If this item reads Linked instead, Live Sync is already in place for this content. If you need to unlink it but don't have access, contact your team's Admin.\nChoose Request to Push to...[the destination environment].\nIn the dialogue that opens, select the Admin that you'd like to make the request of. Notice that the message already has the environment. If you change this message, be sure to keep the environment.\n\nTo receive a request to push as an Admin:\n\nIn the content entry, you can optionally open and respond to the comment, if needed, in the Comments tab. For more on comments, see Commenting in Builder.\nClick on the Unlinked dropdown.\nSelect the environment to push to.\nIn the confirmation dialogue, check that you've chosen the correct environment and, optionally, open a comparison of the content versions to compare the changes.\nClick the Push Now button.\n\nThe next video demonstrates this process by showing the request from the user and the Admin's receipt of the request along with pushing.\n\nRequest to push for a model\n\nTo request a push as the user with restricted access:\n\nIn the environment from which you would like to push, open the model.\nClick the down arrow beside Unlinked. If this item reads Linked instead, Live Sync is already in place for this model. If you need to unlink it but don't have access, contact your team's Admin.\nChoose Request to Push to...[the destination environment].\nIn the dialogue that opens, select the Admin that you'd like to make the request of. Notice that the message already has the environment. If you change this message, be sure to keep the environment.\n\nTo receive a request to push as an Admin:\n\nIn the model, click on the Unlinked dropdown.\nSelect the environment to push to.\nIn the confirmation dialogue, check that you've chosen the correct environment and, optionally, open a comparison of the content versions to compare the changes.\nClick the Push Now button.\n\nThe next video demonstrates this process by showing the request from the user and the Admin's push of the model."
  },
  {
    "title": "Using Environments - Builder.io",
    "url": "https://www.builder.io/c/docs/using-environments",
    "html": "Using Environments\n\nin beta\n\nenterprise plans\n\nAfter Setting Up Environments for a Space, you can determine which models and content entries are synced to your main environment.\n\nPrerequisites\n\nTo get the most out of this tutorial, you should have already have the following:\n\nBuilder Admin permissions in a space with an Enterprise plan\nMore than one environment\nSyncing environments with Live Sync\n\nWith Live Sync, models and content are by default linked across environments. Linked models and content sync in real time so if you make model updates in the parent environment, the other environments reflect those changes.\n\nHowever, you can turn off Live Sync for a model or content and work on that model or content independent of your main environment. Then you can push your changes to the main environment when you're ready.\n\nTip: Make sure to manually migrate webhooks so that you can ensure that the environment-specific URLs are correct.\n\nTo get changes from a child environment to the main environment, see Pushing changes from a child environment.\n\nThe following diagram shows that Live Sync only goes one way, from the main environment to child environments. When Live Sync is on, child environments reflect changes in the main environment.\n\nTurning off Live Sync for a model\nGo to Account Settings.\nOn the Environments tab, enter the environment where you'd like to turn off Live Sync. Note that you can only turn off Live Sync in child environments.\nIn the environment, go to Models.\nClick on the Model you'd like to unlink.\nOn the upper right of the Model, click the down arrow next to the Linked indicator and select Turn Off Live Sync.\nIn the confirmation dialogue that opens, click the Turn Off Live Sync button. The Linked indicator changes to Unlinked.\n\nThe following video demonstrates turning off Live Sync for a model.\n\nTurning on Live Sync for models\nTurning off Live Sync for content\n\nYou can turn off Live Sync to work on content and models independent of your main environment. Then you can push your changes to the main environment when you're ready.\n\nTo turn off Live Sync for content, do the following:\n\nTurning on Live Sync for content\n\nTip: When you turn on Live Sync, all unpushed changes in the child environment are overwritten. If you want to keep your changes in the child environment, you must push to your main environment first.\n\nPushing changes from a child environment\n\nPushing, which is a manual process, gives you full control over when and how your changes are propagated so that you can carefully review updates before pushing them to the production environment.\n\nPushing is a manual process of copying updates in the following ways:\n\nfrom a child environment to the main environment\nfrom a child environment to another child environment\n\nIf you push unlinked content to the main environment, Builder links the two environments. If however, you push from one unlinked sibling environment to another, the environments remain unlinked.\n\nIf you create or edit content or models in a child environment and want those changes in main, you must push in order of dependency:\n\nPush all changed models.\nPush dependent content, such as Symbols.\nPush the content.\n\nTip: You have to manually push changes from a child environment to the main environment—Builder does not push automatically from child environments to main.\n\nThe following diagram shows that pushing goes from a child environment to another child environment or to main:\n\nPushing model changes\n\nWhen you have an unlinked model with changes that are ready for the main environment, you can push them from a non-prod environment to the main or a sibling environment.\n\nNote that if more than one person is working on a model and someone pushes the changes in that content entry, all changes by all users are simultaneously pushed.\n\nIf you push unlinked models to the main environment, Builder links the two environments. If however, you push from one unlinked sibling environment to another, the environments remain unlinked.\n\nPushing content changes\n\nWhen you're ready to push content changes, be aware that if more than one person is working on a content entry and someone pushes the changes in that content entry, all changes by all users are simultaneously pushed.\n\nTip: If you've created a model in a child environment rather than your main environment, be sure to push the model first, then the content.\n\nRe-syncing an Environment\n\nRe-syncing is the process of resetting an environment to mirror its parent space.\n\nBy re-syncing, you delete all models and content in the environment and re-copy the models and content in the parent space to the environment. However, Builder retains the Public API Key, so you don't have to integrate again.\n\nWhat's next\n\nIf you're working with environments, make sure to read Environments and Permissions so you can specify which users can push from one environment to another."
  },
  {
    "title": "Managing Users - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-users",
    "html": "Managing Users\n\nAdding, editing, and removing users along with assigning roles is integral to running your Builder Organization and Space.\n\nPrerequisites\n\nTo get the most out of this document, you should already be familiar with:\n\nUnderstanding Organizations\nManaging Organizations\nSpaces\nAbout Users\n\nUsers exist in Builder at two levels; the Organization and in any Spaces within that Organization. At each level, you give users roles.\n\nWhen you create a user, follow this process:\n\nAdd user to Organization.\nAdd user to Space(s).\n\nThe rest of this document shows you the process of setting up users at each level.\n\nAdding a new user to an Organization\n\nTo add a user to your Organization:\n\nGo to the Organization Settings.\nIn the Users section, click the Add New User button.\nEnter their full name, email address, and select a role. At the Organization level, there are two roles; Admin and Standard. For a comparison of these two roles, see the Organization Roles table below.\nClick the Create button.\n\nNew users receive an email so they can continue setting up their account in your Organization.\n\nEditing or removing an existing user from an Organization\n\nTo edit an existing user within your Organization:\n\nGo to the Organization Settings.\nIn the Users section, click the user.\nChange the role or remove the user. To exit the dialogue without making changes, click away to close.\nWhen you've finished making edits, click the Update button.\n\nThese changes apply to the Organization. If you'd like to further adjust permissions for a user, go to the Space Settings and edit the user in that Space. For more detail, see Roles and Permissions.\n\nTypes of roles at the Organization level\n\nThe two types of roles available for Organization-level users are:\n\nAdmin: has all access. Recommended for super users\nStandard: has specifically granted access. Recommended for most users.\n\nThe following table compares the two roles to help you determine the best role for your user:\n\nType of Access\tAdmin Role\tStandard Role\n\nDescription\n\n\t\n\nAll-access super user\n\n\t\n\nAccess only to specified Spaces\n\n\n\n\nInvoice Access\n\n\t\n\nYes\n\n\t\n\nNo\n\n\n\n\nPayment and\n\nBilling Access\n\n\t\n\nYes\n\n\t\n\nNo\n\n\n\n\nView all Org's Spaces\n\n\t\n\nYes\n\n\t\n\nNo, can only access assigned Space\n\n\n\n\nAdd User\n\n\t\n\nYes\n\n\t\n\nCan add other users to a Space only if their own account was originally set up in the root org by the root org Admin.\n\nNote that if these requirements aren't met, Builder returns a message that you don't have permissions in the parent organization to add a new user. In this case, contact your root org Admin.\n\n\n\n\nSupport request for Admin-level changes\n\n\t\n\nYes\n\n\t\n\nNo\n\n\n\n\nView of Organization tab\n\n\t\n\nAccess to all info\n\n\t\n\nIncludes only the Organization name and access to Spaces that the root org Admin has added this user to.\n\nAdding a new user to a Space\n\nTip: A user must exist in the parent Organization before you can set them up in a Space. Additionally, Organizations have their own roles that impact Space permissions. For more information, see Types of roles at the Organization level.\n\nTo add a new user to a Space:\n\nMake sure an Organization Admin has already added the user to the parent Organization. For more information, see the Managing users section of Managing Your Organization.\nGo to the Space Settings.\nClick the Users tab and click the Add New User button.\nEnter the user(s) email address(es) and select a role.\nClick the Send Invite button.\nMake sure the user follows the instructions in the email from Builder to complete their account setup.\nAdding users in bulk\n\nThe process for adding users in bulk is the same as adding a single user except that you continue to add user emails in the add users by their email addresses field.\n\nWhen you've typed the email address of one user, press Enter or Return and repeat for each additional address.\n\nThe process for adding users in bulk at the Organization level is the same as adding at the Space level; go to Organization Settings, go to the Users tab, and click Add New User.\n\nThe following video shows the process of adding more than one user at a time in the Space Settings.\n\nWhat's next\n\nTo learn more, see Roles and Permissions, Account Settings, and Spaces."
  },
  {
    "title": "GDPR and US Compliance - Builder.io",
    "url": "https://www.builder.io/c/docs/gdpr",
    "html": "GDPR and US Compliance\n\nBuilder complies with General Data Protection Regulation (GDPR) and with current US data protection laws, such as California Consumer Privacy Act (CCPA), Virginia Consumer Data Protection Act (VCDPA), and others.\n\nCookies\n\nWhen using the Builder SDK or HTML on your website, Builder sets cookies and localStorage items in order to provide content analytics and A/B testing functionality.\n\nCookie or local storage name\tPurpose\n\nbuilderSessionId\n\n\t\n\nContent analytics (impressions, clicks, etc.)\n\n\n\n\nbuilderVisitorId\n\n\t\n\nContent analytics (impressions, clicks, etc.)\n\n\n\n\nbuilderio.variations.<some-id>\n\n\t\n\nAB testing functionality\n\n\n\n\nbuilder.tests.<some-id>\n\n\t\n\nAB testing functionality\n\nTurning off tracking and cookies\n\nIf you give your customers a UI to opt-in to cookies and tracking, you can listen for their response and change tracking preferences. This toggles Builder cookies and tracking on or off accordingly.\n\nWith the HTML API, set a window variable to window.builderNoTrack = true. In this way, Builder does not make any tracking requests to our backend, meaning we do not record visitor ids or any information about the site visitor.\n\nIf you are using a Builder SDK, you can set builder.canTrack = false to disable any tracking and setting of cookies or local storage items.\n\nYou can use either window.builderNoTrack or builder.canTrack to toggle tracking, cookies, and local storage.\n\nWhat's next\n\nFor more information, see the following:\n\nEurope Builder DPA\nUS Builder DPA"
  },
  {
    "title": "Understanding Environments - Builder.io",
    "url": "https://www.builder.io/c/docs/environments-intro",
    "html": "Understanding Environments\n\nin beta\n\nenterprise plans\n\nEnvironments serve as isolated workspaces where you can experiment, test, and make changes to your models, content, and code without changing your live production environment until you're ready.\n\nWith an Enterprise plan, you can set up up to three (in total) environments tailored to your specific needs, such as Dev, QA, and Prod. Each environment represents a distinct stage in the production cycle, where you can seamlessly transition your work from one environment to another.\n\nUse cases\n\nUses cases for environments can include:\n\nCode updates independent of Builder: Adding a \"Summer's here!\" heading to a beta page, tests for Builder-related issues, then pushes changes to main environment.\nModel schema change: In a Image data model, you remove the descriptor text that appears below the image in the dev environment. After testing for any issues on the dev website, you can push the changes to the main environment, reflecting them on the live website.\nSync automatically\n\nLive Sync, which is on by default, automatically provides:\n\nReal-time synchronization of models and content across linked environments.\nSynchronization of changes made in the parent environment to the child environments.\n\nWhile the automation of Live Sync is convenient, you can also turn off this feature as needed for specific models and content entries. This means you can make modifications and testing without impacting the main environment.\n\nFor more detail, see Syncing environments with Live Sync section of Using Environments.\n\nPush changes when you're ready\n\nWith multiple environments, you can work in a non-production environment to refine your project without risking works-in-progress showing up on your live site. When your deliverable is ready for publication, you manually push the updates.\n\nThis gives you:\n\nControl of the update process.\nControl over the timing and propagation of changes.\nA way to carefully review before deploying updates to the production environment.\n\nFor more detail, see Pushing changes from a child environment section of Using Environments.\n\nRe-sync to mirror the parent space\n\nWhen you create an environment, it mirrors the parent (production) environment by default. As you make changes to that child environment though—through actions such as content, model, or user changes—you have to push the changes in the child environment to the parent environment. Alternatively, if you would like to discard those changes, you can reset the child environment by re-syncing the child with the parent.\n\nWhen the parent space, such as main (also known as the production environment), has changes that you'd like to pull down to the child spaces, you can re-sync to update the child environment. Re-syncing:\n\nResets and synchronizes an environment with the parent space.\nDeletes existing models and content in the environment.\nReplaces models and content with the latest versions from the parent space.\nEnsures consistency and maintains an up-to-date development environment.\n\nFor more detail, see the Re-syncing an environment section of Using Environments.\n\nUse bulk actions with environments\n\nWith bulk linking, unlinking, and pushing capabilities, teams can streamline content synchronization and deployment processes. Here's a summary of the bulk actions available in Builder's environments:\n\nBulk linking: Simultaneously link multiple unlinked content entries to ensure synchronization between environments.\nBulk unlinking: Unlink multiple content entries to discontinue live updates for those entries.\nBulk pushing: Push multiple content entries to a chosen destination environment to overwrite any existing content in that environment.\n\nFor more information, read Bulk Actions in Environments.\n\nGrant permissions by environment\n\nEnvironment-based permissions in Builder provide fine-grained control over user access and actions so you can streamline collaboration and development processes.\n\nYou can customize roles specific to environments, granting or restricting permissions such as linking content, pushing content and models, or requesting pushes.\n\nUsers with restricted access can request pushes to move their completed work to the next environment, and Admins can review and respond to these requests.\n\nFor more information, read Managing Environment Permissions.\n\nIntegrate your code per environment\n\nYou can integrate your code with a non-main environment so you can develop and test before deployment. In this way, you can make sure updates are as intended upon delivery.\n\nFor instructions on integrating an environment with your code base, read Integrating an Environment with Your Code.\n\nEnvironments compared to Workflows\n\nWhen you are setting up your process for development and content creation with Builder, it's helpful to understand the options available. Both Environments and Workflows are designed to enhance the content creation and development processes for teams.\n\nEnvironments offer separate workspaces for different versions and instances of content and models, allowing teams to work in isolated environments, test changes, and seamlessly synchronize updates.\n\nHowever, Workflows provide a structured approach to content governance by defining stages, roles, and responsibilities, which helps streamline production, ensure content quality, and foster better collaboration.\n\nThe table below shows a comparison of Workflows and Environments in Builder:\n\n\tEnvironments\tWorkflows\n\nPurpose\n\n\t\n\nSeparate workspaces for working on different versions of your content and models. Typically used for development, testing, or staging purposes.\n\n\t\n\nDefine and manage the content creation process within the platform. Create a structured process with stages, roles, and responsibilities for creating, reviewing, and publishing content.\n\n\n\n\nFunctionality\n\n\t\n\nSync or unlink models and content between different environments. Live Sync is on by default, for real-time synchronization of changes between environments. However, you can turn off Live Sync to work on specific models or content independently.\n\n\t\n\nDefine stages—for example, Draft, In Progress, Ready for Review, Completed—and assign roles or individual users to each stage. Incorporate Rules, which are specific criteria for content approval and movement through stages.\n\n\n\n\nBenefits\n\n\t\n\nFlexibility and control over managing different versions or stages of content and models. Make changes in isolated environments before pushing them to the main environment, ensuring a controlled and organized development process.\n\n\t\n\nEnsure consistent and structured content creation, improve content quality, streamline production, and enhance collaboration among team members.\n\n\n\n\nSetup\n\n\t\n\nCreate child environments, turn Live Sync on or off for models and content in each environment, and manually push changes from child environments to the main environment or other child environments.\n\n\t\n\nDefine the Workflow name, description, owners, models to apply the Workflow to, and stages with associated roles and Rules.\n\nBy leveraging Workflows and Environments, teams can optimize their deliverable processes, ensuring efficient content creation, development, and deployment while maintaining control and flexibility throughout the workflow.\n\nWhat's next\n\nIf you're ready to get started with Environments, read Setting Up Environments."
  },
  {
    "title": "Impressions Compared to Page Views - Builder.io",
    "url": "https://www.builder.io/c/docs/impressions-and-pageviews",
    "html": "Impressions Compared to Pageviews\n\nWhile there are similarities between Impressions and Pageviews, Builder employs distinct methods to track and measure them, resulting in key differences.\n\nImpressions\n\nImpressions represent views of specific content pieces on your site. Builder tracks impressions as part of its analytics and heat mapping features for Growth and Enterprise plans.\n\nEach Builder content entry is associated with JavaScript code that records when the content is loaded onto your page. This code captures anonymous visitor information, including user distinctions, which is then utilized in the Insights dashboards.\n\nFor more detail, read Understanding Impressions.\n\nPageviews\n\nPageviews track the overall usage of your site or app containing visual content created in Builder. Page views are counted by rendering a tiny hidden tracking pixel, and each page with Builder content entries is assessed for accurate counting.\n\nFor more information, read Understanding Pageviews.\n\nComparision: Impressions and Pageviews\n\nBecause you could have multiple content entries on one Page of your site, it’s possible that a single Page could fire multiple Impressions, but it should only fire one Pageview.\n\nRefer to the table below for more context on the differences:\n\n\tPageviews\tImpressions\n\nContent level\n\n\t\n\nPage-level event\n\n\t\n\nContent entry-level\n\n\n\n\nTracking method\n\n\t\n\nTracking pixel\n\n\t\n\nContent entry JavaScript\n\n\n\n\nData model content\n\n\t\n\nDoesn't count toward Pageviews\n\n\t\n\nDoes count toward Impressions\n\n\n\n\nData captured\n\n\t\n\nLimited to display of tracking pixel\n\n\t\n\nAnonymous info about visitor and content collected for reporting purposes\n\n\n\n\nCrawler impact\n\n\t\n\nBots generally have no effect except with full headless browser crawling.\n\n\t\n\nBots generally have no effect except with full headless browser crawling.\n\n\n\n\nCompared with GA*\n\n\t\n\nSimilar results\n\n\t\n\nCounts may differ due to differences in tracking mechanisms\n\n*GA stands for Google Analytics.\n\nCrawler impact on metrics\n\nBots generally look at HTML only, not images or scripts, so they don't affect Pageviews or impressions. Only full headless browser crawling will count images (and Pageviews) or cause JavaScript impression code to run.\n\nIf you detect a crawler is accessing your site, you can choose to not render any content from Builder to remove any cost impact.\n\nWhat's next\n\nRead Understanding Impressions and Understanding Pageviews if you haven't already.\n\nAdditionally, consider Viewing Metrics from the Insights Tab where you can access data on how visitors engage with your content."
  },
  {
    "title": "Understanding Pageviews - Builder.io",
    "url": "https://www.builder.io/c/docs/pageviews",
    "html": "Understanding Pageviews (Visual Views)\n\nPageviews, also known as visual views, track usage of the platform as part of your Builder subscription.\n\nPageviews tell you how many views you're getting on your site or app that contains visual content—content from a Page or Section model—created in Builder.\n\nYou can access Pageviews in Account Settings under the Subscriptions tab.\n\nHow Pageviews are tracked\n\nPageviews are recorded when a tiny (1x1) hidden image, called a tracking pixel, is rendered upon someone visiting your site or app.\n\nIf a single Page contains multiple content entries from Builder—such as two symbols—Builder ensures that these pixels are only counted once to avoid double counting by using a cache period in which the pixel request is cached in the user’s browser.\n\nIn this way, multiple pixel requests on the same Page from different Builder content entries only result in one tracking pixel request.\n\nTechnically, this method can result in undercounting Pageviews if a site visitor is navigating pages very quickly, but in most cases, this technique yields an accurate representation of Pageviews.\n\nExample: a Page with multiple Sections\n\nConsider an example of a Page that features three Builder Sections. When a user visits that Page, it counts as just one Pageview.\n\nBuilder ensures that the tracking pixel, used to record Pageviews, is only counted once even if there are multiple content entries—in this case, Builder Section models—from Builder on the same Page.\n\nThis is done to avoid double counting and multiple pixel requests from different Builder content entries on the same page result in only one tracking pixel request. In this way, it is considered as one Pageview regardless of the number of Builder Section models on that Page.\n\nWhat doesn't count toward your Pageviews\n\nIn some cases, specific elements and actions within Builder are exempt from counting toward your Pageviews, offering cost savings and flexibility.\n\nGenerating code\n\nGenerating code in the Visual Editor does not count toward your Pageviews. For information on how to generate code from your Pages and Sections, visit Generating Code with Visual Copilot.\n\nContent from Data models\n\nContent from Data models does not count toward your Pageviews, and are effectively free in this regard. For Data models, Builder only uses bandwidth metering.\n\nGA pageviews and Builder Pageviews\n\nBuilder Pageviews are similar to Pageviews in Google Analytics (GA). One visitor to one Page is one Pageview. The same visitor visiting two Pages on your site with Builder content equals two Pageviews.\n\nViewing or previewing your own content in the Builder app does not count as a Pageview.\n\nIf you aggregate all of your content in Builder by Page URL and compare Pageviews for those URLs in Google Analytics, the counts will be close. However, there could be differences for the following reasons:\n\nGoogle Analytics' tracking with JavaScript and Builder’s Pageview pixel are different mechanisms where tracking is invoked at different times.\nDepending on ad blockers or other browser extensions a user has, Google Analytics or Builder (or both) could fail to track a visit.\nBuilder sets a long pixel cache time to make sure Pageviews are not overcounted. Depending on visitor behavior, this could lead to Builder undercounting total Pageviews.\nWhat's next\n\nFor more information, read Understanding Impressions and then Impressions Compared to Page Views."
  },
  {
    "title": "Cookies - Builder.io",
    "url": "https://www.builder.io/c/docs/cookies",
    "html": "Cookies\n\nIn web development, cookies are small text files stored on a user's device when they're interacting with a website. These files contain information that the website can use to remember the user's preferences, login status, or activity on the website.\n\nThis document covers the five main types of cookies Builder uses in the Builder web application and the Builder.io website.\n\nStrictly necessary cookies\n\nStrictly necessary cookies are essential for the proper functioning of a website and cannot be disabled in the Builder system. These cookies are typically only activated in response to user actions that request services, such as setting privacy preferences, logging in, or filling out forms.\n\nUsers have the option to configure their browser to block or receive alerts about these cookies. However, if these cookies are blocked, some parts of the website may not work correctly.\n\nStrictly necessary cookies do not store any personally identifiable information, and they are only used to provide essential functionality to the website.\n\nCookie name\tCookie type\n\nbuilder.userLoggedIn\n\n\t\n\nStrictly necessary\n\n\n\n\nbuilder.userId\n\n\t\n\nStrictly necessary\n\nPerformance cookies\n\nPerformance cookies help Builder improve the overall UX by tracking site visits and traffic sources. These cookies provide valuable insights into page demand and visitor behavior.\n\nIf visitors choose not to allow these cookies, Builder.io cannot track site performance or determine when users visit the site, which means the user might be missing out on the best experience.\n\nAny information collected by performance cookies is aggregated and anonymous.\n\nCookie name\tCookie type\n\nbuilder.landing\n\n\t\n\nPerformance\n\n\n\n\nAMP_2532be1b04\n\n\t\n\nPerformance\n\n\n\n\namp_2532be\n\n\t\n\nPerformance\n\n\n\n\nhubspotutk\n\n\t\n\nPerformance\n\n\n\n\nfs_uid\n\n\t\n\nPerformance\n\n\n\n\nAMP MKTG_2532b...\n\n\t\n\nPerformance\n\n\n\n\nintercom-id-xazs9xxv\n\n\t\n\nPerformance\n\n\n\n\n_stripe_mid\n\n\t\n\nPerformance\n\n\n\n\nb_visitor\n\n\t\n\nPerformance\n\n\n\n\n_hstc\n\n\t\n\nPerformance\n\n\n\n\nmessagesUtk\n\n\t\n\nPerformance\n\n\n\n\nintercom-device-id-...\n\n\t\n\nPerformance\n\n\n\n\n_zlcmid\n\n\t\n\nPerformance\n\n\n\n\nb_initial_referrer\n\n\t\n\nPerformance\n\n\n\n\n_ga_LFJQTJMFD3\n\n\t\n\nPerformance\n\n\n\n\n_ga\n\n\t\n\nPerformance\n\nFunctional cookies\n\nFunctional cookies help the website provide enhanced functionality and personalization. They may be set by Builder.io or by third-party providers whose services we at Builder have added to our pages.\n\nIf you do not allow these cookies then some or all of these services may not function properly.\n\nCookie name\tCookie type\n\nbuilder.apiKey\n\n\t\n\nFunctional\n\n\n\n\nbuilder.darkMode\n\n\t\n\nFunctional\n\nTargeting cookies\n\nTargeting cookies may be set through the Builder.io site by our advertising partners. Those companies may use them to build a profile of your interests and show you relevant advertisements on other sites.\n\nTargeting cookies do not store directly personal information but are based on uniquely identifying your browser and internet device.\n\nIf you do not allow these cookies, advertising is less targeted.\n\nSocial media cookies\n\nSocial media cookies make sharing our content with your friends and networks easier.\n\nThey are capable of tracking your browser across other sites and building up a profile of your interests. This may impact the content and messages you see on other websites.\n\nIf you do not allow these cookies you may not be able to use or access these sharing tools."
  },
  {
    "title": "Understanding Usage - Builder.io",
    "url": "https://www.builder.io/c/docs/usage",
    "html": "Understanding Usage\n\nGain valuable knowledge about your website's traffic and resource consumption by monitoring detailed usage analytics on pageviews and Bandwidth usage per URL.\n\nWith this insight, you can make informed decisions, align your resources effectively, and maximize value of your subscription.\n\nAccessing your pageviews by URL\n\nBuilder tracks pageviews using an actual image pixel rather than JavaScript. This means each pageview event does not have as much detail associated with it when compared to impression tracking data, which does use JavaScript.\n\nTo approximate pageviews by URL, Builder correlates impression data with pageview data and performs calculations to estimate the number of impressions per URL.\n\nThis estimation enables the derivation of a percentage of pageviews attributed to each URL, providing customers with insight into their website's traffic.\n\nTo view the pageviews for your website:\n\nGo to the Subscription section of your Account Settings.\nOn the right side, select By Request.\nFor more information on each line item, click on the URL.\n\nThe video below demonstrates this process and shows that the item clicked on is a popular blog post.\n\nThe By Request view displays the top pageviews by request for the selected month. The table shows the estimated count of pageviews for each URL, along with the percentage it contributes to the total pageviews.\n\nIn the table, all entries are clickable, so that you can go to the specific URL. Additionally, you can adjust the number of items displayed in the table, with options ranging from 10 to 100.\n\nTracking your bandwidth\n\nTo track your bandwidth:\n\nGo to Account Settings > Subscription.\nBandwidth stats are in the middle tile.\nViewing bandwidth usage by URL\n\nBandwidth is the volume of information that can be sent over a connection in a measured amount of time.\n\nUnderstanding your bandwidth usage is crucial for optimizing resource consumption. Builder's Bandwidth Usage feature provides detailed insights into the amount of bandwidth consumed by different assets, files, and content requests on your website.\n\nTo view your bandwidth data:\n\nGo to the Subscription section of your Account Settings.\nClick on the Bandwidth tile.\nSelect By Request.\nFor more information on each line item, click on the URL.\n\nThe video below demonstrates this process and shows that the item clicked on is a popular video asset.\n\nThe table displays the bandwidth usage for each URL. All entries are clickable, so you can identify which assets utilize the most bandwidth. Additionally, you can adjust the number of items displayed in the table, with options ranging from 10 to 100.\n\nNote that API requests contribute to your monthly bandwidth quota, such as:\n\nDownloading of media when visitors view images or assets hosted by Builder\nReading or writing data from our APIs, such as the Content API, GraphQL API, HTML API, and Write APIs\nWhat's next\n\nTo learn more, read:\n\nUnderstanding Pageviews\nUnderstanding Impressions\nAccount Settings Overview (also contains more information on Bandwidth)"
  },
  {
    "title": "Create a Site Theme - Builder.io",
    "url": "https://www.builder.io/c/docs/site-theme",
    "html": "Popular Tutorials\n\n>\n\nCreate a Site Theme\nCreate a Site Theme\n\nThis tutorial shows you how to create a Data model for site theme colors, create seasonal content entries for different color palettes, and use the different color themes with content.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 3 minutes\n\nThis tutorial guides you through using Data content entries with color palettes to instantly change the colors on a Page as in the following video.\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nStep 1: Create a data model\nGo to Models.\nClick the + Create New button.\nName and describe your model. This example uses the name Site theme and the description Colors for site.\nAdd a custom field by clicking on the + New Field button.\nName the new field according to the colors you want to use and set the Type to Color. Here, the color fields are Header, Body copy, Primary, and Secondary. Repeat for each custom field. By setting the Type to Color, you provide a color picker to teammates using the data model to create content entries.\nClick Save.\n\nThe following video demonstrates the above process:\n\nStep 2: Use your data model to make content entries\n\nThe next step is to use the Data model you just made. To have two sets of colors to toggle between, you need two content entries. Follow these instructions to make one content entry for Spring Colors and another content entry for Fall Colors.\n\nGo to Content.\nClick the + New button.\nSelect Site theme.\nName the new content entry Spring Colors.\nPick a color for each of the custom fields; Header, Body copy, Primary, and Secondary.\nClick Publish.\nRepeat these steps to create a Fall Colors content entry.\n\nThis video shows the process of making the two content entries:\n\nStep 3: Use the colors with your content\nGo to the Page or Section content entry where you'd like to use the colors from the Data content entry you created in the previous section. This example uses a pre-made Page with some placeholder content.\nGo to the Data tab.\nClick the Builder icon.\nIn the dialogue that opens, choose Site theme.\nClick the Pick an Entry button.\nChoose Fall Colors.\nSelect a Text block and go to the Style tab. Open the Typography section and select Text Color > Binding.\nUnder Get the value for this from, select Site Theme - Data - Header.\n\nRepeat to apply colors to other blocks. In addition to text blocks, the next video includes changing the color of Box blocks. To change the background color of a block as in this video, open the Background section > Fill color > Binding and choose the color.\n\nTip: To switch between Data content entries, such as Fall colors and Spring colors in this example, go to the Data tab, click the pencil icon next to the current Site theme, and select another Site theme. The video below shows toggling between the Fall and Spring color palettes and how the colors on the page switch instantly.\n\nNext steps\n\nTo get even more out of Data models with Builder, check out Integrating CMS Data.\n\nIf you're ready to dig into some code for an editable theme, see the Builder Next.js Shopify starter on GitHub.\n\nFor more general information on Data models, refer to the Data Models documentation."
  },
  {
    "title": "Create a Countdown Timer Hero - Builder.io",
    "url": "https://www.builder.io/c/docs/countdown-hero",
    "html": "Popular Tutorials\n\n>\n\nCreate a Countdown Timer Hero\nCreate a Countdown Timer Hero\n\nThis tutorial covers two options for adding a countdown hero to your project, one based solely in the Visual Editor that uses a built-in template, and for those who want more fine-grained control, a custom code option.\n\nSkill set: Intermediate\n\nArea: UI OR code\n\nVideo Length: 21 sec\n\nPrerequisites\nYou'll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nOption 1: Using a built-in template\n\nUse the Countdown featured template, as in the video:\n\nGo the Insert tab > Featured Templates\nClick View All Templates.\nSearch for \"countdown\".\nChoose one of the countdown templates.\nOption 2: Using custom JavaScript\n\nIf you have access to code features, you can create a countdown with custom code. Note that we recommend that a developer finetune this example implementation.\n\nIn this example, the days text box is bound to state.days, the hours is bound to state.hours, the minutes are bound to state.minutes, and the seconds are bound to state.seconds.\n\nIn the Visual Editor, add four text boxes, one for each number—days, hours, minutes, seconds—that will dynamically show the countdown values.\nIn the Data tab > Code, click the Edit Content JS + CSS button. This opens the JavaScript and CSS editor for further customization.\nWithin the Builder.isBrowser if statement, locate the existing code and update the finalDate variable to the Unix timestamp of the desired countdown end date. For example, to countdown to New Year's Day 2030, set finalDate to 1893456000000 (Unix timestamp of New Year's Day 2030).\n\nThe code should resemble this:\n\nconst second = 1000;\nconst minute = second * 60;\nconst hour = minute * 60;\nconst day = hour * 24;\n\nstate.days = \"0\";\nstate.hours = \"0\";\nstate.minutes = \"0\";\nstate.seconds = \"0\";\n\n// New Year's Day 2030 - Unix time in milliseconds\nlet finalDate = 1893456000000;\n\nconst countDown = new Date(finalDate).getTime();\nwindow.setInterval(myTimer, 1000);\n\nfunction myTimer() {\n   let now = new Date().getTime();\n   let distance = countDown - now;\n   state.days = Math.floor(distance / day);\n   state.hours = Math.floor((distance % day) / hour);\n   state.minutes = Math.floor((distance % hour) / minute);\n   state.seconds = Math.floor((distance % minute) / second);\n}\n\nWhat's next\n\nTo get even more out of Templates with Builder, read Creating Templates."
  },
  {
    "title": "Setting Up Server-side Redirects - Builder.io",
    "url": "https://www.builder.io/c/docs/url-redirects",
    "html": "Popular Tutorials\n\n>\n\nSet Up Server-side Redirects with Next.js\nSet Up Server-side Redirects with Next.js\n\nThis tutorial shows you how to create a Data model to configure server-side redirects in Builder. A server-side redirect is a technique for rerouting site traffic from one web address to another. For example, if you create a Page and later want to reroute visitors to another Page that has a different URL, you'd set up a URL redirect.\n\nUse cases for server-side redirects include:\n\nReroute traffic to an updated Page from an outdated one.\nPhase out an old URL without breaking links to the old URL.\nRedirect traffic when you're updating URL naming conventions.\n\nSkill set: Intermediate\n\nArea: UI and code\n\nVideo Length: 2 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nStep 1: Create a Data model\nGo to Models.\nClick the + Create New button.\nName and describe your model. This example uses the Name URL Redirects and the Description Manage URL redirects for site content.\nAdd a custom field by clicking on the + New Field button. Name the first new field sourceUrl with a Type of Url.\nRepeat the previous step for a field called destinationUrl of Type Url and a third field called redirectToPermanent of Type Boolean.\nClick Save.\n\nThe following video demonstrates the above process:\n\nTip: When you configure your codebase to use the redirect in Step 3, you'll need the name of the model you just created. The name, known as the Unique identifier in the Builder UI, in this example is url-redirects, which you can find by clicking the Show More button.\n\nFor a video pointing out the location of the name, refer to the Finding the model name section of Data Models.\n\nStep 2: Use your data model to make content entries\n\nThe next step is to use the Data model you just made. Here you make a Data content entry to redirect a URL called /site/intro to /site/getting-started.\n\nGo to Content.\nClick the + New button.\nSelect URL redirect.\nFor the SourceUrl, enter /site/intro.\nFor the DestinationUrl, enter /site/getting-started.\nName the new content entry /site/intro -> /site/getting-started. This way, when the URL Redirects are listed in the content area of Builder, each redirect's purpose is in the name, so you don't have to open them to see the URLs that are being redirected.\nClick Save.\n\nThis video shows the process of making a server-side-redirect as outlined above:\n\nStep 3: Configure your code\n\nThe next step is to configure your codebase as in the next code snippet. Use builder.getAll() to get all the redirects from Builder. Then, create an object that Next.js can use and, optionally, add an error handler. The code snippet in this section covers each of these tasks in turn.\n\nTip: The next.config.js file has a 1024 entry count limit. For more context, refer to Vercel's guide, How can I increase the limit of redirects or use dynamic redirects on Vercel?.\n\nIn next.config.js, add the following code:\n\nconst { builder } = require('@builder.io/sdk');\n\nmodule.exports = {\n  async redirects() {\n    return builder\n      .getAll(\n        // This is the unique identifier in the model\n        'url-redirects',\n        {\n          // Find your Public API Key in Account Settings\n          apiKey: 'YOUR_API_KEY',\n          // These two options make sure you get the latest, unfiltered data. \n          options: { noTargeting: true },\n          cachebust: true,\n        }\n      )\n      .then(\n        (results) =>\n          results\n            // Filter out partially filled data to make sure\n            // you have all the fields for redirects\n            .filter((content) => {\n              const data = (content || {}).data || {};\n              return !!(data.urlFrom && data.urlTo);\n            })\n            // Create the \"redirect\" object Next.js expects\n            .map(({ data }) => ({\n              source: data.urlFrom,\n              destination: data.urlTo,\n              permanent: !!data.permanentRedirect,\n            })),\n        (error) => {\n          // Error handler to log issues looking up redirects, \n          // but the deploy itself doesn't fail.\n          // To instead stop the deployment in case of issues with the\n          // redirects, remove this function.\n          console.error(\"Error setting up redirects\", error);\n          return [];\n        },\n      );\n  },\n}\n\n\nTo find your Public API Key, go to Account Settings. For more information on the Public API Key, see Using the Builder API Key.\n\nFor more information, refer to Vercel's Redirect documentation.\n\nStep 4: Add a webhook\n\nWith Next.js sites, you need to trigger a rebuild for new redirects. Since Next.js evaluates the next.config.js only once when building an app, newly added redirects don’t take effect immediately. To cause this rebuild, use a webhook.\n\nTip: For this part of the tutorial, you need a webhook URL on the backend. If you're using Vercel, see their Deploy hooks documentation.\n\nTo add a Webhook to the data model take the following steps:\n\nGo to Models.\nOpen the URL Redirects model you made in Step 1: Create a Data model.\nClick the + Show More Options button.\nClick the Edit Webhooks button.\nClick + Webhook.\nExpand the new Webhook 1 and paste your webhook URL into the URL field.\nClick Done.\n\nThe following video demonstrates the above process:"
  },
  {
    "title": "Building a Page using Templates - Builder.io",
    "url": "https://www.builder.io/c/docs/building-with-templates",
    "html": "Building a Page Using Templates\n\nBy taking advantage of a pre-built Template in Builder, you can create your first Builder page quickly. Follow this tutorial to create your page in four steps. Once the page is created, have fun editing it and customizing it to your needs while learning how Builder works.\n\nPrerequisites\n\nTo get the most out of this article, you should already have the following:\n\nA Builder account\nA Space within your Builder account in which to start building\nThe four steps\n\nHere are the four main steps to creating your page based on a Template.\n\n1. Click New in the upper-right corner of your Builder space:\n\n2. Click Page:\n\n3. When the dialog opens, give your page a title, and edit the generated URL if you prefer a different one. Then click Create Page.\n\n4. The Templates menu opens, showing you the available Templates. Choose FAQ Page if you are following along.\n\nThat's it! Your page is created. Here's how it looks:\n\nNow that you're done...\n\nYou can move on to a tour of the Visual Editor in Getting around Builder: the Visual Editor, or you can try the steps here to edit any of the elements you'd like to change.\n\nHere's how you can change the Hero headline (in the large image on top).\n\nClick the headline, then click Edit.\n\nChange the text using the dialog box that opens. Then close the dialog.\n\nYou can also change the image in the Hero banner. To do so, click the Hero, then click the Edit button.\n\nClick Choose Photo in the dialog that opens.\n\nChoose a photo from the library by clicking it. The photo will resize to fit the banner area.\n\nHere's the result.\n\nYou can change the text in the accordion expandable sections by hovering and clicking the Edit button.\n\nChange the text if you like.\n\nYou can also edit the icons, their text, and their links. Click the Edit button above the icons.\n\nChange the text, photo, or both. Change the link and the descriptive text.\n\nHere's a video of your page. Congratulations! You've built and customized your first page in Builder!\n\nGo rogue!\n\nSince you've created a test page, why not fiddle around with styles and settings? Change images. Add more text. Move things around. Delete anything you don't like.\n\nIn other words, have fun!"
  },
  {
    "title": "Set Up and Use Product Data - Builder.io",
    "url": "https://www.builder.io/c/docs/product-data",
    "html": "Popular Tutorials\n\n>\n\nSetting Up and Using Product Data\nSet Up and Use Product Data\n\nWith one Data model, your teammates can create, edit, and use Data content entires to change content instantly. The following video shows an example of switching between two Data content entries made from the same Product Data model.\n\nBy coordinating the shape of your data with your UI, developers, designers, and writers can all work in parallel:\n\nSkill set: Intermediate\n\nArea: UI\n\nVideo Length: 4 minutes\n\nPrerequisites\nYou'll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nStep 1: Create a Data model\nGo to Models.\nClick the + Create New button.\nName and describe your model. This example uses the Name Product and the Description Product we sell.\nAdd a custom field by clicking on the + New Field button. Name the first new field name with a Type of Text.\nAdd Helper Text so teammates know what to enter in each field.\nRepeat the previous two steps for each field and adjust the Helper Text and Type according to the kind of field you want. This example uses:\n\nName, Type Text\n\nPhoto, Type File\n\nTagline, Type Text\n\nCopy, Type Long text\n\nDeliverable, Type Text\n\nPrice, Type Number\n\n7. Click Save.\n\nThe following video demonstrates the above process:\n\nStep 2: Use your data model to make content entries\n\nThe next step is to use the Data model you just made. Here, you make two Data content entries; Shoes and Pie.\n\nGo to Content.\nClick the + New button.\nSelect Product.\nFill out each custom field.\nName the new content entry Shoes.\nClick Publish.\nRepeat the previous step and make another called Chef's Pie with pie-related data.\n\nThis video shows this process of making two Product Data entries:\n\nStep 3: Use your data in the Visual Editor\n\nThis tutorial example uses a pre-existing product page with placeholder content and a built-in template for the layout.\n\nOpen the content where you'd like to use the data.\nIn the Visual Editor, go to the Data tab.\nClick the + Connect Data button.\nChoose Builder and then choose the Data model you made in Step 1: Create a Data Model. In this example, the Data model is Product.\nClick Pick an Entry.\nChoose one of the two you created in Step 2: Use your Data model to make content entries. In this example, the two options are Shoes and Chef's Pie.\nBind the data to each block by clicking the icon with four dots and choosing the data that you want to populate that block. Repeat for each block.\nWhen you're done binding the data, you can click on the pencil icon next to the entry you chose in the Data tab and switch to another entry, so that the content changes instantly.\n\nThe following video demonstrates the above process:\n\nWhat's next\n\nTo get even more out of Data models with Builder, check out Integrating CMS Data.\n\nFor more general information on Data models, refer to the Data Models documentation.\n\nExtend using your Data models by exploring Reusable Blocks."
  },
  {
    "title": "Mixing Content from Different Models - Builder.io",
    "url": "https://www.builder.io/c/docs/mixing-content",
    "html": "Popular Tutorials\n\n>\n\nMixing Content from Different Models\nMixing Content from Different Models\n\nLearn how to embed a section that displays data model content inside of a Next.js page. Includes:\n\nOverview of the video's contents\nNext.js and Shopify starter with Shopify plugin setup instructions\nCode for this tutorial\nLive demo\n\nSkill set: Familiar with Code\n\nArea: UI and Code\n\nLength: 33 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nNext steps\n\nTo learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started."
  },
  {
    "title": "How to Make a Grid Layout - Builder.io",
    "url": "https://www.builder.io/c/docs/grid-layout",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Grid Layout\nHow to Make a Grid Layout\n\nCreate a responsive grid layout with techniques that you can adapt to different designs.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 5 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nCreating a grid using a Columns block\n\nThe usual way to create a grid is to use the Columns block, and this technique can be used most of the time.\n\nTo do so, in your page, click the Insert tab, and under Layout, drag the Columns block onto the work area.\n\nSelect the Columns block, and click the Edit button to adjust the number of columns.\n\nIn the Columns menu that opens, you can add or remove columns, set at which device the columns will stack, adjust the spacing between them, and set the direction when stacked.\n\nTo add more rows of columns to make your grid, next to the Edit button, click the down arrow. Select Duplicate. If you style the first block of columns before you duplicate, you won't have to adjust the styles in the subsequent rows of columns.\n\nHere's a 2X3 grid. You can delete the Text blocks below each if you like.\n\nFor more information on using columns, visit Using Columns to Build Responsively.\n\nCreating a grid using Grids\n\nTo create a grid using the Builder Grid, you'll need to have an element, here a Box, with another Box inside it. This is because to use the Child Element styling, there must be children.\n\nDrag a Box onto the blue work area. Then drag another box onto that Box.\n\nSelect the outer of the two boxes. You can check the Layers tab if you're not sure which you've selected.\n\nWith the outside/parent Box selected, go to the Style tab and under Layout and Child Layout, click the Grid icon. The tooltip on the Grid icon has the label \"Wrap.\"\n\nThe Layers tab shows that the parent Box now has the Grid icon next to it.\n\nNow drag a Box into that box, and with the outer Box selected, on the Style tab you can give it a background color to make it more obvious while following along.\n\nNext, click the Edit button for the small Box and select Duplicate.\n\nDuplicate the Box another four times so you have six small boxes in all.\n\nNext, select the outer box and on the Style tab change the Justify Content setting to Space Between."
  },
  {
    "title": "How to Make an Announcement Bar - Builder.io",
    "url": "https://www.builder.io/c/docs/announcement-bar",
    "html": "Popular Tutorials\n\n>\n\nHow to Make an Announcement Bar\nHow to Make an Announcement Bar\n\nThis video shows you how to create a narrow announcement bar that spans the whole width of the page with brief copy.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1.5 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nSteps to create the announcement bar\n\nTo begin creating your announcement bar, open the Insert tab, and drag a Section block onto your page.\n\nDouble-click the default text in the Section and change it to your own text.\n\nNext, change the background color of the Section. Select the Section, and on the Style tab, scroll down to the Background section and choose a new color.\n\nNow, change the text color. Select the Text block, and on the Style tab scroll down to the Typography section and select a color.\n\nFinally, adjust the padding in the Section block to reduce the height of the announcement bar.\n\nSelect the Section, and on the Style tab, scroll down to Margins and Padding and change the default 50px top and bottom padding to 10px each.\n\nThe announcement bar looks like the one below once published.\n\nNext steps\n\nTo learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started."
  },
  {
    "title": "How to Make a Multi-column Section - Builder.io",
    "url": "https://www.builder.io/c/docs/multicol-section",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Multi-column Section\nHow to Make a Multi-column Section\n\nThis video shows you how to create a section of a page that has multiple columns. In this example, there are five columns, each with an image and for-placement copy.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: ~1 minute\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nNext steps\n\nTo learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started.\n\nFor more information on Columns, refer to Using Columns to Build Responsively."
  },
  {
    "title": "How to Make a Full-width Two Column Section - Builder.io",
    "url": "https://www.builder.io/c/docs/full-width-2column",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Full-width Two Column Section\nHow to Make a Full-width Two-column Section\n\nThis video shows you how to create a section of a page that has two columns–one with a pull quote and the other with a picture. Full-width means that this section spans from one edge of the viewport to the other.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 4 minutes\n\nPrerequisites\nYou'll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nCreating the layout\n\nThe video above illustrates all the steps you need to create this two-column layout. Below are the individual steps.\n\nTo begin, from the Insert tab, drag a Section block onto the blue work area.\n\nNext, on the Style tab, under Background, give your section a background color. You can paste in the RGBA values, hex value, or choose from the picker.\n\nThen, from the Insert tab, drag a Columns block into the Section. A blue line will appear inside the Section above the text.\n\nHere's how the columns look. Delete the left Image and the Section text.\n\nKeep the Column's Text block, indicated in blue. You'll use that for the pull quote.\n\nEdit the text in the left column to add your quote. In the Style tab, under Typography, change the font size to 40px.\n\nUsing the down arrow next to the quote Text block, duplicate the Text block. Then edit the text for your attribution. Here we made the font size 20px and changed the font face to Allan.\n\nWith both Text blocks selected, on the Style tab click the left align button to align the text to the left.\n\nAdd your photo using the Edit button above the image. Then delete the Text block below the image.\n\nUsing the Edit button above the image again, set the Alt text for screen readers, and if you like, enter a URL to your product to make the photo clickable.\n\nIf you click the eyeball icon in the top-right corner of the Visual Editor, you can preview your current draft.\n\nHere's the finished layout:"
  },
  {
    "title": "How to Make a Footer Symbol - Builder.io",
    "url": "https://www.builder.io/c/docs/make-footer-symbol",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Footer Symbol\nHow to Make a Footer Symbol\n\nThis video shows you how to create a basic footer inspired by Builderʻs footer. Learn how to create a footer that is responsive, has columns, and a logo.\n\nSkill set: Advanced\n\nArea: UI only\n\nLength: 5 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nNext steps\n\nTo learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started."
  },
  {
    "title": "Create a Changeable Background - Builder.io",
    "url": "https://www.builder.io/c/docs/change-bg",
    "html": "Popular Tutorials\n\n>\n\nCreate a Section with a Changeable Background\nCreate a Section with a Changeable Background\n\nLearn how to make a section with a background that changes when you hover over certain areas. Then check out these demos:\n\ninteractive example, also known as a fiddle\na preview so you can see the end result\n\nAlong the way you'll learn how to bind events to your Builder elements, how to set and read state, and how to add custom code.\n\nSkill set: Basic\n\nArea: UI plus a little code\n\nLength: 17.5 minutes\n\nPrerequisites\nYou'll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\n\nTo complete this project you will:\n\nAdd a box with three images inside\nPosition each image on top of the other\nCreate three hover buttons to control which image is visible\nSet and get the state of the image area which indicates which image is currently visible\nAdd a hover event to each button\nAdd code to switch the image\nAdd a CSS transition\nAdding a Box block with three images\n\nDrag a Box block from the Insert tab onto the blue work area.\n\nOn the Style tab, click the down arrow next to Width and set the box to full page width. In the same manner, click the arrow next to Height and remove the height using Remove Style.\n\nOnce again in the Style tab give the box a min height of 500px.\n\nNext, drag an image from the Insert tab into the box. Then with the image selected, on the Style tab under CSS Properties, click + New and add a new property for position. Assign the value to be Absolute. Then add an image of your choice using the Edit button.\n\nYour first image appears on the page. Now duplicate the Image using the Duplicate option from the down arrow next to the Edit button.\n\nNext, using the Edit button again, chose Change Photo, and select a photo of your choice. Notice that the new photo will be visible, but the first one is still there because they both have the same absolute position.\n\nDuplicate the image once again the same way, and select a third image. That will now be the image visible to you.\n\nCheck the Layers tab; three images are listed inside your box.\n\nWhile you're on the Layers tab, give each image a name. Here we'll use colors that represent the particular image: orange, blue, and purple because that is the order in which we placed the images. This screen shows the order if the images did not have position: absolute set in the Style tab.\n\nYour images are all ready to change dynamically. Next you'll add buttons to control which image is shown.\n\nAdding the buttons\n\nTo add the buttons that will change your image, first drag a Box block onto the work area like before. In the Style tab, you can set the Box to Full Page Width for this example, but it's not critical. Then drag three Buttons into the box from the Insert tab.\n\nOnce you set the width of each button on the Style tab, here's how the buttons will look. Note that they are stacked by default.\n\nChange the label of each button to represent the color of the image you want to show when you hover over that button.\n\nNext, style the buttons. On the Style tab you change the fill color for each button if you like, but it's not required.\n\nThen, to align and position them, select the box that contains the buttons, and on the Style tab under Layout and Child Layout, click the Row button, indicated by the three blue dots.\n\nJust under the rows setting is the Justify Content setting. Set it to Space Around if you prefer that look.\n\nTip: If you don't see Child Layout make sure you've selected an element that has at least one element inside it.\n\nNow all your elements are in place. Next, you'll hook up the hover actions so the images can change.\n\nAdding the hover feature\n\nTo get the hover behavior, you need to set properties and actions on both the buttons and the images.\n\nButton code\n\nBegin by selecting one of the buttons. Then in the Data tab click + New Event. Select Mouse enter for the On field and click the Edit Action button.\n\nNext, click the + Action button, then Custom code.\n\n  state.activeImg = \"orange\";\n\nTip: You can expand the code window by clicking the full window icon in the upper right, as in the screen above.\n\n state.activeImg === 'purple' ? 100 : 0;\n\nThe screenshot below shows that the value for style.opacity comes from the code you just added, which tests the value of activeImg inside the state object.\n\nAnother way two write the test for state.activeImg is\n\nif (state.activeImg === \"purple\"){\n    return 100;\n}\nelse {\n    return 0;\n}\n\n\nDo the same for the other two images, selecting one in the Layers tab, opening the Data tab, and adding the code via the + New Binding link.\n\nThe Layers tab shows which elements you have added a binding to.\n\nHere's how your page should look now:"
  },
  {
    "title": "How to Make a Footer - Builder.io",
    "url": "https://www.builder.io/c/docs/make-footer",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Footer\nHow to Make a Footer\n\nThis video shows you how to create a basic footer inspired by Builderʻs footer. Learn how to create a footer that is responsive, has columns, and a logo.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 10 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\n\nLet's take a look at the steps to create a footer.\n\nTo begin, from the Insert tab, drag a Section block onto the blue work area in the Visual Editor.\n\nInto the Section you just added, drag a Columns block.\n\nNow, to reproduce the horizontal lines above and below the footer content, as in the Builder.io footer, you'll use a box with a border.\n\nFrom the Insert tab, drag a Box block inside the Section above the Columns.\n\nIn case you're not sure where you dragged the box, check the Layers tab. The Box should be the first element inside the Section. If it isn't, just drag the layer there. Note that the Box should not have anything inside it.\n\nNext, style the box to make a border/horizontal rule. With the Box selected, on the Style tab give the Box a 1px border. Select a color; here it's gray. Make sure to choose Solid for the Border Style field.\n\nTo make the bottom border, duplicate the box. With the Box selected, click the down arrow next to the Edit button and select Duplicate. Then drag the new Box to the bottom of the Section.\n\nAs you did before, you can check the Layers tab and move the Box using the Layers, if needed. You can see that the second Box is where it should be by closing the Columns block layer using the little arrow. Then you'll notice that the Box is outside the Columns block but inside the Section.\n\nThis screen shot shows the two box borders.\n\nChoose your logo as the Image for the left column by selecting Choose Photo from the Image Edit button. Choose Contain for the Background Size.\n\nNext, on the Style tab with the logo selected, give it a max height of 80px and a min height of 60px. Then delete the large Image block on the right.\n\nNow begin adding your text for the links and apply the styles.\n\nEach line of text should be its own text block so that you can apply padding to the text. Because this text will be linked later, the padding makes the target area of the link bigger.\n\nNote the 10px padding added on all sides for each text block using the Style tab.\n\nTo add a second column for links, with the Columns block selected, click the Edit button and click +Column. This will duplicate the last column, including its contents and styles.\n\nNext, edit the text under the logo.\n\nNow, change the text in the two columns and link each line appropriately.\n\nHere's the result:\n\nThe final step is to check your footer for responsiveness.\n\nUsing the tablet and phone buttons at the top of the Visual Editor, review your new footer. Here we noticed the logo text was a little close to the footer links on both tablet and phone views. So for each view we added a 30px bottom margin. Remember that changes you make in tablet or phone view apply only to that view.\n\nThe video at the top of the page has more tips and tricks, so if you haven't checked it out, take a look."
  },
  {
    "title": "How to Make a Full-width Carousel - Builder.io",
    "url": "https://www.builder.io/c/docs/wide-carousel",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Full-width Carousel\nHow to Make a Basic Full-Width Carousel\n\nThis video shows you how to create a full-width carousel with individual images that you can scroll through by clicking left and right arrows.\n\nSkill set: Beginner\n\nArea: UI only\n\nLength: 1 minute\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nCreating a carousel\nDrag in a Carousel block from the Layout section of the Insert tab.\nDrag an Image Block into each slide. You can advance through the slides by clicking the arrows at the side of the carousel.\nTo make the carousel full-width, select the carousel and on the Style tab, in the Width field, select Full Page Width.\n\nThe video below shows these steps. A background color is added to the carousel; however, this is for demonstration purposes for showing the effect of setting the width.\n\nNext steps\n\nTo learn more of what you can do in Builder, check out the other Popular Tutorials."
  },
  {
    "title": "How to Batch Upload Images - Builder.io",
    "url": "https://www.builder.io/c/docs/batch-upload",
    "html": "Popular Tutorials\n\n>\n\nHow to Batch Upload Images\nHow to Batch Upload Images\n\nThis video shows you how to upload multiple images to Builder in a single workflow. When you've uploaded your images, you can access them under Your Recent Photos in the Choose Photo dialogue.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: ~1 minute\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\n\nThere are two ways to get to the bulk upload option. You can visit https://builder.io/upload to get the screen where you can drag or choose your files. Just be sure that you are in the Builder space where you want the images stored. The screen below shows that the Space called Sandbox is open.\n\nYou can also get to the batch upload using the Image Edit button. If you don't have an image block on your page, open the Insert tab and drag an Image block onto your page.\n\nClick the Edit button on the Image, and select Choose Photo.\n\nThe Upload Photo page opens. In the upper-right corner of that page is a link to Bulk Upload images.\n\nClicking the Bulk Upload link opens the following page where you can upload your photos by selecting a group. You can choose them from a menu, or drag them onto the page.\n\nSelect your files from the upload menu and click the Open button.\n\nThe confirmation screen shows that your images have been uploaded.\n\nWhen you're ready to use the images you uploaded, you can find them under the Your Recent Photos tab.\n\nNext steps\n\nTo learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started.\n\nFor more information on images, refer to Working with Images."
  },
  {
    "title": "How to Create a Hero Block - Builder.io",
    "url": "https://www.builder.io/c/docs/hero-block",
    "html": "Popular Tutorials\n\n>\n\nHow to Make a Hero Block\nHow to Make a Hero Block\n\nThis video shows you how to build an image that spans the whole viewport with some copy and a button on top of the image.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 3 minutes\n\nPrerequisites\nYouʻll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\n\nIn this document you'll build a hero that looks like this:\n\nAdding the image\n\nIn the Visual Editor, open the Insert tab and drag an Image block onto the blue work area of your page.\n\nClick the blue Edit button over the image and click Choose Photo. Select a photo to use.\n\nSelect the Image in the work area, then open the Style tab.\n\nOn the Style tab, under Width select Full Page Width.\n\nAdding the text\n\nOn the Insert tab, drag a Box block onto the image. The Box is shown here:\n\nNext, select the image, and on the Style tab, set the Min Height to 500px.\n\nThen drag a Text block into that box.\n\nSelect the text, and on the Style tab, select a Text Color. We chose white.\n\nNext, with the text still selected, change the font size. Here it's 45px.\n\nWith the Text block selected, you can change the width and background color from the Style tab. Here the max width is 500px, the background color is a dark brick, and the text padding is 20px all around. You can fiddle with these values to get the look you want.\n\nWith the Box that holds the text block selected, make sure the Center Horizontally icon is blue, meaning it has been set. If not, click it to center the box.\n\nAdding the button\n\nTo add the button, on the Insert tab drag a Button block into the box directly under the text.\n\nNow style the button. With the Button selected, give it a Max Width of 200px.\n\nTo center the Button horizontally, click the center horizontally icon at the top of the Style tab.\n\nYou can double check your layers by opening the Layers tab. They should look like this:\n\nIf your layers are different, you can drag them above, below, or into any other layer until yours look like the layers above.\n\nYou should have an image with a box in it, with a text block inside it. The button is also inside that box.\n\nOnce your Layers are correct, you can move the button and text up and down. You can change the vertical alignment by selecting the box and clicking the appropriate alignment icon.\n\nThe screenshot below shows the three vertical alignment options on the Style tab.\n\n👉 Tip: If you have trouble selecting the box, you can select it in the Layers tab, then move over to the Styles tab to apply the alignment."
  },
  {
    "title": "Reusing Blocks - Builder.io",
    "url": "https://www.builder.io/c/docs/reusing-blocks",
    "html": "Types of Reusable Blocks\n\nReusing parts of your page saves time and makes updates easier. To reuse things like headers, footers, and product recommendation sections, you have several options in Builder.\n\nA Symbol: perfect for an element, like a header, that's the same everywhere. Changes to the source Symbol affect all instances of that Symbol.\nA Template: ideal for an element, such as a recommendations section, that has the same structure but the contents differ.\nCustom code components: use these for custom solutions. Developers create and maintain these in your codebase and then connect them to Builder so creative team members can reuse them.\nSymbols\n\nEdit Symbols in one place and immediately update everywhere.\n\nExamples include:\n\nheaders\nfooter\nforms\nbanners\nmission statements\n\nFor more details, check out Introduction to Symbols.\n\nTemplates\n\nEdits only change the individual Template. With a Template, you use the same basic design over and over and update the contents in the individual Template instance without affecting the original Template.\n\nExamples include:\n\nblog articles\nproduct descriptions\nproduct recommendations\nitem lists\n\nBuilder comes with a variety of built-in Templates to get you started right away. To make more Templates that meet your use case, check out Creating Templates.\n\nCustom code components\n\nYour developers make custom components and connect them to Builder. The code stays in your company's codebase and creators can drag-and-drop, just like a built-in Template or Symbol.\n\nExamples include:\n\nunique components\ncomponents that already exist in your codebase\n\nFor more information, read Using custom React Components in Builder.\n\nNext steps\n\nLearn more about using Reusable blocks in the following articles:\n\nIntroduction to Symbols\nCreating Templates"
  },
  {
    "title": "Shopify Theme Builder | Build Shopify themes with Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/shopify",
    "html": "Getting Started with Builder for Shopify\n\nshopify app\n\nBuilder's Shopify app helps you customize, optimize, and re-imagine your Shopify storefront–no coding required. Builder works with any and all themes so you can create the storefront of your dreams.\n\nUsing Builder's powerful drag-and-drop editor, you can create and edit any type of content, whether you're looking to optimize the key parts of your shopping funnel, such as product and cart pages, or feature an upcoming launch or promotion across all your pages.\n\nPublishing directly from Builder, you can optimize your content and experiences with targeting, A/B testing, and see detailed analytics and heat maps to measure performance and show how visitors are engaging with your storefront.\n\nHow does Builder work?\n\nTo use Builder, first decide what parts on your site should be controlled by Builder vs. hard coded in your site or application. There are two main ways you can do this:\n\nVisual pages - full drag and drop control between your site's header and footer\nVisual sections - make a part of a page visually editable in Builder and use our targeting and scheduling to decide who sees what\nTry it out\n\nUse pages to Build to manage entire pages, like:\n\nHomepage\nContent pages (about, partners, etc)\nBlog pages\nLanding pages\nTry it out\n\nUse Sections to Build and parts around your site or app, like\n\nAnnouncement bars\nProduct detail descriptions\nCollection heros\nCart upsells\nStructuring your site\n\nOne of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users\n\nHere are some examples we recommend for how to structure various pages on your site\n\nExtending with code\n\nFor advanced use cases, you can also extend Builder with custom code, as well as use code from your theme inside Builder.\n\nFeatured Tutorials\n\nCreate a landing page in Builder\n\nEveryone\n\nGet started with Builder and Next.js\n\nDeveloper\n\nUse your React components in Builder\n\nDeveloper\n\nConnect dynamic data\n\nAdvanced\n\nPrerequisites\nA Builder account\nA Shopify account\nSetup\nIf you haven't already, create a store in Shopify.\nAdd the Shopify app to your Shopify store.\n\nOnce you have the app installed in your Shopify store, you're ready to get started.\n\nNow that you are in Builder, you can explore all it has to offer. You can either navigate your storefront in the preview pane on the right or in the sidebar on the left.\n\nClick the page or section you want to add or modify and either select +Create or View all.\n\nThe first time you edit any page or element, you will be presented with a set of options\n\nFor example, if you were to create a new homepage, you could choose to to either:\n\nCreate a new homepage\nAdd an editable section to your existing homepage\n\nNext, select who should be able to see this new page or section\n\nEveryone\nSelect visitors based on targeting\n\nOnce you confirm your choices, you're ready to start building.\n\nNeed Shopify help?\n\nAre you looking to hire some help with your Shopify store? Submit a project to our partners, Storetasker, and be matched with a Shopify expert.\n\nSubmit a Project"
  },
  {
    "title": "Keyboard Shortcuts - Builder.io",
    "url": "https://www.builder.io/c/docs/keyboard-shortcuts",
    "html": "Keyboard Shortcuts in the Visual Editor\n\nBuilder provides a wide variety of keyboard shortcuts. Many can be found by right-clicking on an element, as shown in this video.\n\nThis page lists the shortcuts available in the Visual Editor.\n\nKeyboard shortcuts\n\nAction\n\n\t\n\nShortcut\n\n\n\n\ncopy\n\n\t\n\nCmd/Ctrl+c\n\n\n\n\npaste\n\n\t\n\nCmd/Ctrl+v\n\n\n\n\ncut\n\n\t\n\nCmd/Ctrl+x\n\n\n\n\nduplicate\n\n\t\n\nCmd/Ctrl+d\n\n\n\n\ngroup a selection\n\n\t\n\nCmd/Ctrl+g\n\n\n\n\nungroup\n\n\t\n\nCmd/Ctrl+Shift+g\n\n\n\n\ncopy style\n\n\t\n\nCmd+Opt+c / Ctrl+Alt+c\n\n\n\n\npaste style\n\n\t\n\nCmd+Opt+v / Ctrl+Alt+v\n\n\n\n\nlock group\n\n\t\n\nCmd+Opt+g / Ctrl+Alt+g\n\n\n\n\ndeselect all\n\n\t\n\nCmd/Ctrl+Shift+a\n\n\n\n\nsave a checkpoint\n\n\t\n\nCmd/Ctrl+s\n\n\n\n\nmargin increase\n\n\t\n\nupArrow with margin selected in the Style tab\n\n\n\n\nmargin decrease\n\n\t\n\ndownArrow with margin selected in the Style tab\n\n\n\n\nadjust top margin\n\n\t\n\nShift+upArrow / Shift+downArrow\n\n\n\n\nadjust left margin\n\n\t\n\nShift+leftArrow / Shift+rightArrow\n\n\n\n\npadding increase\n\n\t\n\nupArrow with padding selected in the Style tab\n\n\n\n\npadding decrease\n\n\t\n\ndownArrow with padding selected in the Style tab\n\n\n\n\ndisplay command palette\n\n\t\n\nCmd+P / Ctrl+P\n\n\n\n\ndisplay developer options\n\n\t\n\nCmd+Y / Ctrl+Y / Cmd+Ctrl+A"
  },
  {
    "title": "Using AI to Create Content - Builder.io",
    "url": "https://www.builder.io/c/docs/ai",
    "html": "Using AI to Create Content\n\nin beta\n\nBuilder's AI features help you use natural language for a range of tasks, including content creation and editing, image and content generation using your components, and the creation of mini apps.\n\nTip: Any field in Builder that features a magic wand is editable with AI. Click the Magic Wand button to open the AI dialogue and tell the AI, using natural language, how you'd like the content changed.\n\nAI as an emerging technology\n\nWhile AI offers significant benefits and improvements to workflows, it is important to understand its potential limitations. We recommend taking the time to familiarize yourself with the technology and to start using AI features in a considered manner as it continues to mature.\n\nGenerating content\n\nTo use AI to generate content in the Visual Editor:\n\nIn the Insert tab, expand the Visual Editor AI section.\nClick the Generate New Content button.\nIn the dialogue that opens, describe the type of content you'd like to generate. For example, \"A page with a hero image at the top and 3 columns with 3 rows of tiles\".\nProvide a website as style inspiration.\nClick Generate.\nWhen the generation is complete, the dialogue displays options based on your prompt.\nClick on the one you'd like and then click in the Visual Editor work to drop in the design.\n\nThe above video demonstrates this process.\n\nEditing content\n\nTo edit content with AIin the Visual Editor:\n\nSelect the block you'd like to edit.\nClick the Edit Existing button. Alternatively, click the magic wand button that shows when you select the block.\nIn the dialogue that opens, describe the type of edit you'd like to make.\nClick Modify.\n\nThe above video demonstrates this process.\n\nExample instructions to the AI might include:\n\n\"Make the font bigger\"\n\"Change the background color and add some padding.\"\n\"Translate copy into another language, as in the following sections of this document.\"\nUpdating multiple Text blocks\n\nTo edit multiple Text blocks with AI in the Visual Editor:\n\nSelect the blocks you'd like to change.\nClick the Magic Wand button or press Cmd/Ctrl+o.\nIn the dialogue that opens, tell the AI what you'd like to change about the copy; for example, the tone.\nClick Modify.\n\nThe following video demonstrates changing the tone of multiple Text blocks from formal to friendly and informal:\n\nGenerating images\n\nTo add an AI-generated image:\n\nDouble-click or select and click the Edit button for a block.\nIn the Photo dialogue that opens, click on AI Generate.\nClick Generate.\nAI generates a selection of images.\n\nThe following video demonstrates generating images and selecting one:\n\nGenerating content with your components\n\nexperimental\n\nAn experimental feature, the AI Components Generator creates pages or sections, per your instructions, using your custom components.\n\nYou must have a selection of custom components for the AI to have something to work with. For details, read Integrating Custom Components.\n\nUsing AI to generate content with your own components:\n\nPress Cmd/Ctrl+k to open the Command Palette.\nIn the dialogue that opens, describe the type of content you'd like.\nClick Generate.\nAI generates a page or section, depending on your instructions. Tweak as needed.\n\nThe AI Components Generator dialogue provides two toggles that can help you guide the generation process:\n\nInclude built-in components: Specify if you'd like the generator to use the Builder built-in components.\nAllow custom styles: Specify whether or not to use your own styles or styles generated by the AI. This feature is helpful for aligning with established design systems.\n\nThe following video demonstrates generating a page based on instructions and using custom components:\n\nGenerating mini apps\n\nexperimental\n\nAn experimental feature, the Mini App Generator creates small apps within the Visual Editor.\n\nPress Cmd/Ctrl+k to open the Command Palette.\nIn the dialogue that opens, describe the type of app you'd like to make.\nClick Generate.\nAI generates a small app.\n\nThe following video demonstrates generating a small mini app:"
  },
  {
    "title": "Glossary - Builder.io",
    "url": "https://www.builder.io/c/docs/glossary",
    "html": "Glossary\n\nThe following glossary defines Builder and web design terms that appear in the Builder documentation and other resources.\n\nA/B testing\n\nA/B testing allows you to create multiple variations for a page. You can style these variations differently, and these variations will be shown at random to your users. You'll be able to see the metrics for your different variations.\n\nAlign icons\n\nAlign icons move your content, for example text, to the left, middle, or right of a page.\n\nBox\n\nBoxes are containers for grouping content. A Box contains other blocks, such as Text blocks or Columns. By grouping content in a Box, you can apply styles to that Box and its contents inherit those styles.\n\nBlock\n\nBlocks are the fundamental elements you drag onto the work area as you create in Builder's Visual Editor. Examples of blocks include an Image block, a Text block, a Box block, and Columns.\n\nChild\n\nA child emement is a piece of content that is nested inside of another element.\n\nChild layout\n\nUse a child layout section to arrange nested elements in their parent container.\n\nContent entry\n\nA content entry is a piece of content; that is, an instance of content, necessarily based on a model. Examples of content entries include Sections and Pages, which Builder lists in the Content section.\n\nCSS\n\nCSS, which stands for Cascading Style Sheets, is one of the fundamental technologies of the web, and gives Pages and Sections their style. Style, or styles, in web development refers to features of layout such as placement, colors, typography, borders, shadows, and certain animations. CSS has a unique syntax and engages with the Box Model, a key part of Responsive Design.\n\nData model\n\nThe definition of Data within a Space. For example, a blog author data model might include fields for author name, bio, job title, and handle For more detail, see Data Models.\n\nDynamic content\n\nDynamic content is content that changes, such as on hover, click, or keypress.\n\nElement attributes\n\nElement attributes are identifiers you can add to an element to control that element's behavior. You can add custom element attributes to your content such as an id, class name, or a default state of checked for checkboxes. You can find the Element Attributes section near the bottom of the Style tab.\n\nEnvironment\n\nAn environment is a special kind of Space that replicates and engages with your main Space so that you can create environments such as Production, QA, Staging, or QA. With environments, you can push and sync content and models between different environments. Requires an Enterprise plan.\n\nFor more information including demo videos, refer to Enabling Environments.\n\nFlexbox\n\nFlexbox is a CSS layout model in which the children of a container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.\n\nHistory\n\nThe history tab is where you can view your page in past states and revert back if needed. You can also view a comparison of your current page and a past state.\n\nFor more information, see the History guide.\n\nInsights\n\nThe Insights tab features a heat map, engagement, and conversion rates for your page.\n\nModel\n\nA model is the definition of a type of content, such as a Page model or Section model. Models are the basis of content entries. For more detail, see Intro to Models.\n\nMargin\n\nMargin is the space on the outside of a piece of content.\n\nOrganization\n\nThe topmost level of a Builder account. A company has one Organization that contains its Spaces. For more detail, refer to the Organizations documentation.\n\nPage Model\n\nThe definition of a Page within a Space. Builder comes with a default Page Model that you can use to make as many Pages as you need. For more detail, see Page Models.\n\nPadding\n\nPadding is the space on the inside of your content.\n\nParent\n\nA parent element is a block that acts as a container for other blocks.\n\nPreview mode\n\nPreview mode, available under the eyeball icon in the upper right of Builder's Visual Editor beside the Publish button, gives you an accurate view of what your webpage looks like before publishing.\n\nPublic API Key\n\nPublicly visible, alphanumeric ID of a Space that you use to integrate your code base and fetch data. For more information see Using Your Public API Key.\n\nSection\n\nA Section is a discrete content entry that you can use within a Page. Examples include banners and tiles.\n\nSection model\n\nThe definition of a Section within a Space. You can create Section Models and use them to make as many Sections as you need. For more detail, see Section Models.\n\nSpace\n\nA place within and Organization where you work on a project and where you integrate your code. For more detail, see Spaces.\n\nSymbol\n\nA Symbol is a piece of reusable content that you can drag and drop onto a Page or Section. By default, any changes you make to a Symbol and publish update that Symbol everywhere you are using it. To prevent this default behavior, you can make the Symbol inline, which turns it into a regular block.\n\nTemplate\n\nA template is a piece of reusable content that you can drag and drop onto any page, but differs from a Symbol in that any changes you make to an individual instance of template does not update other instances of that template elsewhere.\n\nWeb app\n\nWeb application, web app for short, refers to an application that runs in the browser. The Builder web app is the Builder software that customers access by logging in. The Builder web app includes the Visual Editor user interface (UI), and all of the other parts of Builder accessible with a Builder login."
  },
  {
    "title": "Bulk actions - Builder.io",
    "url": "https://www.builder.io/c/docs/bulk-actions",
    "html": "Bulk Actions\n\nWith Builder's bulk actions, you can apply actions to multiple content entries from the Content list. This document covers each bulk action available.\n\nAccessing bulk actions overview\n\nTo access the bulk options available:\n\nGo to Content.\nSelect the entries you'd like to apply actions to. Searching can help filter entries to your criteria.\nClick on the action. Duplicate, Publish, and Unpublish happen right away. Scheduling and Targeting prompt you for more information with a dialogue.\n\nTip: For bulk actions available specifically for environments, refer to Bulk Actions for Environments.\n\nDuplicating multiple content entries\n\nDuplicate all checked entries by clicking on Duplicate.\n\nBuilder automatically appends a number to the end of the name for all duplicated entries. For example, if there's only one entry by a certain name, Builder adds a 2.\n\nThe video below shows duplicating three entries. Notice that targeting and scheduling carry over to the duplicated entry, and that the status of all entries is Draft.\n\nPublishing multiple content entries\n\nPublish all checked entries by clicking on Publish.\n\nThe video below shows selecting multiple entries and clicking Publish. Notice that the status changes to Published.\n\nIf a content entry is scheduled at a later date than when you click Publish in a bulk action Builder marks the status as Scheduled. However, if the date is in the past, the status is marked as Expired, which means that content entry is not published.\n\nTo publish a content entry that is scheduled outside of bulk publishing, you must remove the scheduling or change the dates so that they include the time during which you are attempting to Publish.\n\nUnpublishing multiple content entries\n\nUnpublish all checked entries by clicking on Unpublish.\n\nWhen you unpublish, Builder displays a message that lets you know that unpublishing a content entry removes that entry from your live site.\n\nThe video below shows unpublishing multiple content entries with various targeting, scheduling, and statuses. Builder changes all content entries to a status of Draft, regardless of their targeting or scheduling.\n\nScheduling multiple content entries\n\ngrowth plans\n\nNote: Scheduling as a bulk action is only available for non-Shopify spaces.\n\nTo schedule all checked entries:\n\nClick on Schedule.\nChoose the dates.\nClick Update Entries.\n\nThe dates you choose in a bulk schedule apply to all selected content entries and overwrite any existing scheduled dates.\n\nThe video below shows scheduling multiple content entries. Notice that the start and end dates populate to reflect the selections.\n\nFor more information see Targeting and Scheduling Content.\n\nRemoving scheduling from multiple content entries\n\nTo bulk remove scheduling:\n\nSelect entries.\nClick Schedule.\nDelete the dates.\nClick the Update Entries button.\nTargeting multiple content entries\n\ngrowth plans\n\nNote: Targeting as a bulk action is only available for non-Shopify spaces.\n\nTo target all checked entries:\n\nClick on Schedule.\nChoose the targeting conditions.\nClick Update Entries.\n\nThe following video shows targeting by device and locale:\n\nFor more information see Targeting and Scheduling Content.\n\nRemoving targeting multiple content entries\n\nTo remove targeting from all checked entries:\n\nClick on Schedule.\nClick the x next to the targeting conditions you'd like to remove.\nClick Update Entries.\nWhat's next\n\nIn addition to bulk actions, you can streamline your workflow in other ways as well. For detailed instructions, refer to:\n\nOrganizing Your Content with Folders"
  },
  {
    "title": "Make a Landing Page: Step 1 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-1",
    "html": "Make a Landing Page\n\nThe Make a Landing Page series guides you through building a page in Builder from scratch. By the end of the series, you'll have built a beautiful page with a hero, columns, and quick, but sophisticated design elements. You'll learn how to:\n\nBuild sections of a page from scratch\nBuild what you see using alignment, columns, and styles\nMake your page look great on all devices\nWhat you'll build\n\nYou'll build a whole page from the top down with a wide hero image, copy, a button, and a layout that looks and behaves like a modern site that invites confidence in the brand.\n\nPrerequisites\n\nTo follow along in Builder, make sure you have the following:\n\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nA Builder account. If you're just trying Builder out, you can do everything in this series with a free account.\nBuilding a hero\n\nThe first video in this series shows you how to:\n\nCreate a page\nCreate a full-width hero image at the top of your page\nAdd copy and a button to the image\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nCreate a new page\nIn Builder, on your Content tab, click the +New button, give your new page a name, and click Create Page.\nChoose the Blank page rather than one of the Templates.\nAdd a photo and text\nInto the +Add Block section on your new page, drag a Box from the Insert tab.\nNow drag an Image block into the Box you just added. Edit the Image block to choose your photo.\nOnce your photo appears, drag a Text block onto it. This will contain the large headline. You'll notice the image shrinks to the height of your new Text block.\nClick your Image and on the Style tab, give your image a min-height. Make it 500px in this instance.\nChange the font size to 50px and the color to a contrasting color. Here we made it white.\nCenter your Text box vertically by selecting it, then choosing the center vertically icon in the Align section of the Style tab.\nFor the subhead, drag another Text box onto your picture. On the Style tab, make the text 25px. In the Align section of the Style tab click the Up arrow to push this subhead up.\nTo bring the header and subhead together now, select the header, and click the Down arrow this time.\nAdd a button\nTo add your button, drag the Button block from the Insert tab onto your photo just under the subhead. You'll notice the Button is full width.\nSelect the Button, and on the Style tab choose the button background color. Here we chose white, so we also changed the font color to black.\nChange the Button's padding using the Style tab. Make it about 65px on the left and 65px on the right. Change the max-width to 300px.\nNext, also in the Style tab, click the center horizontally icon. Now to move it up, click the up arrow icon.\nThe video shows you how you can also change the margins to move the Button a bit more.\nIf you want to match the Everlane button's style, you can increase the border radius from the Style tab's Border section.\nWhat's next\n\nNow that you've created a hero with copy and a button, head over to the next step to learn how to make the next section of the page:\n\nMake a Landing Page with Builder: Step 2"
  },
  {
    "title": "How to add custom fonts - Builder.io",
    "url": "https://www.builder.io/c/docs/how-to-add-custom-fonts",
    "html": "Adding Custom Fonts\n\nCustom fonts are those that aren't built-in to your system. They can include fonts you purchase or specially branded fonts your company uses. If you don't see the font you want to use in Builder by default, but you have the font files, you can upload them to Builder for use in your projects.\n\nThis document shows you how to do the following:\n\nUploading your font\n\nUsing your font in the Visual Editor\n\n👉Tip: Any fonts already installed in your Shopify theme or site's CSS automatically work with Builder and Builder Theme Studio–you do not need to add them separately.\n\nUploading your font\n\nNavigate to the Account Settings section of your account.\n\nSelect the pencil icon next to Custom fonts.\n\nClick on the placeholder Custom font 1 to expand its settings.\n\nClick Upload and select your font.\n\nNotice that to delete a font, you click Delete in this same dialogue. You can always come back here to manage your fonts later.\n\nClick the Save button.\n\nAdding file types\n\nIf you can't select your file, you need to tell your computer that any file type is permissible. In your operating system dialogue, take the following steps.\n\nOn a Mac:\n\nClick the Options button and in the Format dropdown, select All Files, as in the following image:\n\nOn a PC:\n\nNext to the File Name dropdown, select All Files, rather than the default of Custom Files, as in the following image:\n\nUsing your font in the Visual Editor\n\nIn the Visual Editor, take the following steps:\n\nGo to the Style tab.\nScroll down to the Typography section.\nClick the Font dropdown to find your custom font.\nNext steps\n\nTo explore more of what you can do with Builder, explore Popular Tutorials."
  },
  {
    "title": "Adjusting Column Behavior - Builder.io",
    "url": "https://www.builder.io/c/docs/column-behavior",
    "html": "Adjusting Column Behavior\n\nThis doc covers the settings available in the Advanced Columns section of the Options tab.\n\nBuilder provides options for you to control the behavior of your columns with just a click. Under the hood, Builder uses Flexbox to lay out columns and choose their direction.\n\nUsing Builder's Advanced Columns settings, you can decide when your columns stack on top of each other: at tablet size, at phone size, or never.\n\nBuilder also provides settings in the Advanced Columns section to reverse the order of your columns when they're stacked, and a setting to change the space, or margins, between columns.\n\nTo find these settings, with the Columns block selected, open the Options tab and scroll down to Show Advanced. Click that button.\n\nStacking columns\n\nOnce you open the Show Advanced section of the Columns Options you'll find a dropdown where you can choose at which screen size your columns will stack vertically. By default, they will stack at tablet size and smaller. However, you can choose to have them stack only if the screen is phone size, or you can never have them stack.\n\nThis video shows how to open the Columns advanced menu by selecting the Columns block. You can see that the block is selected by checking the Layers tab if you're unsure.\n\nWith the Columns block selected, open the Options tab.\nScroll down to Stack columns at: and use the dropdown to select the largest screen size at which the columns will stack.\nReversing column order\n\nAlso in the Show Advanced section of the Columns Options you'll find a toggle button that reverses the order of your columns when stacked.\n\nToggling that switch to the on position causes the columns to appear in reverse order at the stacking screen size you selected in the stacking section.\n\nThis video below shows how to open the Columns advanced menu by selecting the Columns block. Again, you can see that the block is selected by checking the Layers tab if you like.\n\nWith the Columns block selected, open the Options tab.\nScroll down to the Reverse columns when stacked setting.\nToggle the setting to reverse the order of your columns.\nChanging space between columns\n\nThe final setting in the Show Advanced section of the Columns Options sets the space between columns.\n\nThis video in this section shows how to open the Columns advanced menu by selecting the Columns block. Again, you can see that the block is selected by checking the Layers tab if you like.\n\nWith the Columns block selected, open the Options tab.\nScroll down to the Space setting.\nEnter the space in pixels. The margins change as you type.\nWhat's next\n\nNow that you're working with the advanced features of Columns, you'll probably want to delve deeper into responsive design. Intro to Responsive Design is a great place to start."
  },
  {
    "title": "Understanding Impressions - Builder.io",
    "url": "https://www.builder.io/c/docs/impressions",
    "html": "Understanding Impressions\n\nBuilder provides detailed analytics to highlight how your content is performing, including how many Impressions your content is generating.\n\nTip: Some content on this page has moved. If you're looking for information on Pageviews, read the dedicated document Understanding Pageviews.\n\nImpressions\n\nAn impression represents a view of a piece of content on your site. Builder tracks impressions for analytics and heat mapping capabilities as part of Growth and Enterprise plans.\n\nEach Builder content entry is attached to JavaScript code that records when that content entry is loaded onto your page. In this way, Builder provides detailed analytics to highlight how your content is performing, including how many Impressions your content is generating.\n\nBuilder's code collects anonymous information about the current visitor (most importantly to distinguish between users), packages it up with information about the content entry, and stores it to be used in your Insights dashboards. There's more on the Insights tab in Viewing Metrics from the Insights tab.\n\nWhat's next\n\nFor more information, read Understanding Pageviews and then Impressions Compared to Page Views.\n\nAdditionally, consider Viewing Metrics from the Insights Tab where you can access data on how visitors engage with your content."
  },
  {
    "title": "Managing Your Organization - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-organizations?_host=www.builder.io",
    "html": "Managing Your Organization\n\nAn Organization is the top-most entity in Builder and contains users and Spaces.\n\nViewing and editing account details\n\nBuilder creates your first Organization automatically the first time you sign in.\n\nTo view or edit account details for your Organization, go to the Organization's Settings. With Admin permissions, you can:\n\nEdit the name of an Organization\nEdit and view billing information\nAccess private key information\nView invoices\nManage users\n\nThe following image is a screenshot of the Organization-level Settings, which features the Organization tab with account information and users, as well as the My Profile tab, which includes information about the name of the Organization and user account info. This document discusses each section in detail.\n\nManaging Spaces\n\nOrganizations contain Spaces. This means that you can access high-level data about a Space or create new a Space from within your Organization.\n\nAdding Spaces\n\nTo view all the spaces in an Organization, along with the number of users, bandwidth, and page views for those Spaces:\n\nGo to the Organization's Spaces tab.\nTo optionally filter data on the available spaces, click the three dots at the upper right and select a month and year.\nTo create a new Space within this Organization, click the + New Space button. Each space will have separate content, separate models, and separate Public API Keys.\n\nYou can also create a new Space by going to your Organization using the fly-out menu. Under your Organization, click + New Space.\n\nArchiving Spaces\n\nTo remove a Space from an Organization, you must archive that Space. Visit the Archiving a Space instructions in Managing Spaces.\n\nManaging payment and billing\n\nTo manage payment and billing information for your Organization:\n\nGo to the Organization Settings.\nTo the right of Payment, click Add Payment Info to add a credit card or Update Billing Info as required.\n\nSelf-Service customers can pay for the subscription with American Express, MasterCard, and Visa credit cards. Enterprise customers have the option of paying with ACH or wire transfer.\n\nViewing invoices\n\nTo view invoices for your Organization:\n\nGo to the Organization Settings.\nTo the right of Invoices, click View.\nAccessing invoices for Enterprise, Shopify, and Legacy plans\n\nEnterprise plans\n\nIf you need to change payment methods or access invoices, contact finance@builder.io.\n\nBuilder invoices for Shopify app users\n\nYou can find billing and invoices through Shopify's billing platform. Review your Shopify invoice to see any Builder charges.\n\nLegacy plans\n\nFor older accounts on legacy self-serve plans that only have a single space, you can see invoices within the Space Settings.\n\nManaging Private Keys\n\nPrivate API Keys help you keep certain content private. For detailed information on Private API Keys, see the Managing Private API Keys section of Using Builder API Keys.\n\nManaging users\n\nYou must have users at the Organization level as well as in the Space they work in. Set up your users in this order:\n\nSet up your users in the Organization.\nSet up your users in the Space you want them to access.\n\nFor detailed instructions, see Managing Users.\n\nViewing Organization insights\n\nenterprise plans\n\nViewing the contents of the Insights tab for an Organization is an add-on feature available on the Enterprise plan.\n\nWhen this feature is enabled, Admins can access data such as who the most active users are, which, for example, can inform re-allocating user licenses based on activity.\n\nAdmins for the Organization have access to the Organization Insights, accessible from the Builder left sidebar. Organization Insights show you, by Space:\n\nUser names\nUser e-mail addresses\nUser role\nLast sign-in date\nCreation date\nLast refresh date\nDeleting an Organization\n\nIf you need to delete an Organization, contact us.\n\nWhat's next\n\nTo learn more about what's inside an Organization, see Roles and Permissions, Settings, and Spaces.\n\nIf you want to jump right in, visit Popular Tutorials."
  },
  {
    "title": "Convert a Layout to Columns - Builder.io",
    "url": "https://www.builder.io/c/docs/convert-to-columns",
    "html": "Convert a Layout to Columns\n\nIn your Builder pages you can take an existing layout and reap the advantages of Columns without having to redo your layout.\n\nIn case you missed the advantages of Builder's Columns feature, like instant repsonsiveness with no media queries or sizing attributes required on your side, check out Using Columns to Build Responsively.\n\nWhile you can build your page with Columns from scratch, if you don't, you can convert it later.\n\nYou can convert parts of your page to Columns if the elements you want to convert to a columns layout are already contained inside another element or Builder Block.\n\nIn this video, the existing layout had three Text blocks inside a Box. To convert to columns, select the Box block—you can check that it's selected by viewing the Layers tab. Then, in the Layout section of the Style tab, click the Columns icon under Child Layout.\n\nIn the last video, the Text blocks were already inside a Box block. If you don't have a container around the elements, you can still convert to columns.\n\nIn this video, the existing layout had three Text blocks with nothing around them. To fix that issue, select one of the text blocks, then Shift+click each of the others so that they are all selected. Then, right-click on one of the selected Text blocks and choose Group selection from the context menu.\n\nIf you check over in the Layers tab you'll notice there is now a Box block around your Text blocks.\n\nCheck the Style tab in the Layout section and you'll see the Columns option is now enabled. Click it and, magically, you have columns.\n\nNote that your layout can have any number of columns you like; the only limiting factor is how well your content lends itself to narrow columns if you have many.\n\nNext steps\n\nNow that you're an expert with Columns, you'll probably want to delve deeper into responsive design. Intro to Responsive Design is a great place to start."
  },
  {
    "title": "Understanding Organizations - Builder.io",
    "url": "https://www.builder.io/c/docs/understanding-organizations",
    "html": "Understanding Organizations\n\nAn Organization is the top-most container in a Builder account and serves as a central place to manage users, billing, and Spaces.\n\nWhen you sign into Builder for the very first time, Builder creates an Organization for you. Within that Organization, Builder also creates one Space with the same name as the Organization. Typically, a company only has one Organization, which contains the company's Space(s).\n\nThe diagram below shows the relationship between an Organization and its Spaces:\n\nHow Organizations and Spaces work together\n\nAn Organization gives you a way to manage the following:\n\nUsers at the Organization level: all users must exist in the Organization before you add them to a Space.\nSpaces\nOrganization Usage Insights\nOrganization Private API Key\nSubscription and Billing\n\nAll of your Spaces reside within your Organization. It is inside each Space that you:\n\nManage users specific to that Space\nCreate models and content entries\nAccess content insights\nSet up targeting\nManage A/B Testing\nUse integrations and plugins\nAccess your Space Public and Private API Keys\nSet up Environments (for Enterprise plans)\nLeveraging your Organization\n\nMost of the time, you'll work in a Space, but you'll switch to the Organization view when you need to do things specific to the Organization such as manage billing or add users.\n\nTo view your Organization info:\n\nHover over the Builder logo in the upper left of the Builder UI.\nClick the down arrow to see your Organization and Space options.\nHover over the Organization and in the menu that opens, click on the Go button for the Organization.\n\nThe following video demonstrates opening an Organization called Basic Docs Demos, viewing the Spaces within the Organization, as well as viewing the Organization's Settings:\n\nFor more in-depth information, refer to Managing Your Organization.\n\nHow Shopify is different\n\nIf you're using Shopify with Builder, the structure is a little different. For Shopify stores, your Organization and Space are rolled into one entity, the Organization. Within your Organization is your content, where you manage everything.If you happen to have two Shopify stores, then you have two Organizations, rather than two Spaces.\n\nWhat's next\n\nTo learn what you can do at the Organization, read Managing Your Organization, which goes through each of the options available for Organizations."
  },
  {
    "title": "Visual Copilot helps - Builder.io",
    "url": "https://www.builder.io/c/docs/visual-copilot",
    "html": "Visual Copilot\n\nin beta\n\nVisual Copilot is a suite of Builder tools to help you get your designs published faster than ever.\n\nThis document guides you through the recommended workflow and links to detailed documentation.\n\nTip: Though this document outlines a full workflow, you can use each process on its own.\n\nImport your Figma designs\nIf you have designs in Figma, you can import them directly into Builder using the Builder Figma plugin.\n\nThe key takeaways are:\n\nYou need a design in Figma and the Builder Figma Plugin.\nNo prep needed—no need to rasterize, apply auto layout, or think about responsiveness. \nDesigns are imported responsive.\nYou can import whole designs of one Page or portions of a design. If you have multiple designs, such as multiple screens, you import each into its own content entry.\nMake sure you use the Builder Figma plugin because that's how Builder prepares and imports your work.\nYou might have to tweak the imported content. Since it's in beta, always check that your design is as intended at all viewport widths.\n\nFor detailed instructions, read Importing from Figma with Visual Copilot.\n\nGenerate code from your content entries\n\nWhether you've imported your Figma designs or created them in Builder, you can export generated code with the help of AI.\n\nThe key takeaways are:\n\nTwo qualities of code are available—Fast (instant) and Quality (like a great dev wrote it).\nBoth types of code are generated with AI.\nQuality code is generated to create dev-friendly, semantically correct code.\nThe amount of Quality code you can generate is based on your plan.\nYou can customize Quality code with a chat like interface to specify framework, styling, and countless other custom requirements.\nIterate on Quality code right in the Code Generator by prompting the AI.\n\nFor more information, read Generating Code with Visual Copilot.\n\nSync generated code to your codebase\n\nWhen you've generated code for your content entry, you can sync the code from within the Generated code panel.\n\nThe key takeaways are:\n\nSync to your codebase with a command or with Devtools.\nDevtools isn't required, but it takes care of the details of integrating for you if you want to integrate.\nThough an integrated app isn't required, it makes syncing and publishing your updates seamless.\nYou control when the code is synced to your codebase so you can iterate the Generated code until you're happy.\n\nFor more information, read Generating Code with Visual Copilot, which covers syncing in addition to code generation."
  },
  {
    "title": "Builder best practices - Builder.io",
    "url": "https://www.builder.io/c/docs/best-practices",
    "html": "Best Practices\n\nIn traditional web development, you can do just about anything in a number of different ways, but usually, one way offers more benefits than the others.\n\nWith the Builder Visual Editor, you are working with the underlying front-end code to access all of the robust features of modern development. Because of this, just as with code, you can do things in many ways with Builder.\n\nAccessibility\n\nAccessibility is an integral best practice for every stage of designing, developing, publishing, and iterating on all content.\n\nBuilder gives you the tools to create and iterate. However, as each use case is different, and because you can build an infinite array of digital experiences, just as if you were entirely coding your project, you must familiarize yourself with creating and maintaining accessible content.\n\nMake sure that as you develop your projects in Builder that your content is accessible as defined by the World Wide Web Consortium(W3C), an international organization that develops and maintains web standards.\n\nThis document contains some instructions on where to edit your content along with links to accessibility resources in addition to W3C, such as WebAIM, a recognized leader in the field of web accessibility. For introductory guidance, refer to Web Accessibility for Designers.\n\nLayout\nImportant: learn about responsive design\n\nMany best practices assume a responsive foundation. Responsive design is a best practice in and of itself, whether you're coding or using a visual tool such as Builder.\n\nThis section shares some pointers, but to get a solid foundation in how to build successfully, whether you're coding or using a visual tool like Builder, read through the Builder Responsive Design documentation.\n\nThe Responsive Design docs explain the vital concepts of how browsers calculate what they display, width, margin and padding, alignment, columns, and fixing layouts, all with responsiveness in mind. And these docs are written from a no-code perspective, so anyone can learn how to build great responsive designs.\n\nKeep pages short\n\nIn general, keep pages brief and to the point. Too much content can slow down your page and lead to lower conversion rates. Instead, create more, shorter pages with focused content and link to other pages of similar scope.\n\nMake blocks full width with Full Page Width\n\nWhen making a block as wide as the viewport, use the Full Page Width setting in the Style Tab. Though you can use a function manually in the CSS, the Full Page Width setting is quicker, intuitive, and prevents typos.\n\nThe following image shows where to find the Full Page Width setting in the Layout section of the Style Tab.\n\nKeep Section blocks top-level\n\nNesting, or putting one thing inside of another, is generally a useful practice in web development; but Section blocks are best for containing other elements, rather than being themselves contained.\n\nWhile you can safely nest items inside of Section blocks, don't nest Section blocks inside of other blocks.\n\nA Section block's default styles are specifically for making the Section expand the entire viewport, so to use Section blocks with reliable, predictable results, keep them top-level, which means they can contain other blocks but should not be nested within other blocks.\n\nThe following image shows a Section block at the top-level in the Layers tab.\n\nNesting is useful for organizing, but avoid nesting too deeply as controlling the hierarchy depth helps keep the structure clear, which is helpful later for others who might work on what you've built.\n\nStyling blocks\n\nUse the Style tab's graphical settings to style blocks. By relying on Builder's default styles and the Style tab's graphical settings, your design is more flexible and easier to maintain. Most of Builder's blocks are responsive out-of-the-box, which frees you to focus on the look and feel.\n\nBy using the graphical settings in the Style tab, and leaving the manual CSS styles to developers and designers versed in the nuances of CSS for responsiveness, your blocks and layouts become easier to iterate on and maintain.\n\nGive targets recommended padding\n\nWhen adding padding to a button, form element, or other target element, make sure it's big enough to accommodate a range of pointer inputs, such as a mouse, pen, or touch.\n\nThough the recommended minimum of 24 pixels by 24 pixels is W3 Level AA accessible, the web development industry conventional standard of the enhanced Level AAA is 44 pixels by 44 pixels or the equivalent, which is informed by the W3 Web Content Accessibility Guidelines.\n\nFor instructions on how to use margins and padding in Builder, check out Margins and Padding.\n\nHiding a block\n\nTo hide a block, you can toggle the visibility on desktop, tablet, or mobile from the Visibility section of the Style tab. This toggle is preferable to changing the opacity for performance, especially in the case of sizable content.\n\nShowing a block under certain conditions\n\nWhen you want to show a block under specific conditions, use the showIf setting in the Data tab, rather than setting the opacity to zero. With the opacity set to zero, the user still has to load the element you've hidden, which can negatively impact performance.\n\nFor instructions on using showIf, refer to this blog post.\n\nText\nUse Text blocks correctly\n\nSet Text Blocks according to their semantic meaning. That is, if it is an h1, select Heading 1 from the Text dropdown in the Edit settings–if it's an h2, select Heading 2, and so on. Semantic Text Blocks improve accessibility, make styling easier, and are consistent with Shopify themes.\n\nFor semantic heading markup, use only one h1 on a page and follow a clear hierarchy by making the next level of headings h2, and those headings nested within an h2 section h3.\n\nConsider typeface and font size\n\nIn addition to color and contrast, you can improve the readability of text by carefully choosing the typeface and font size. Color, contrast, font size, and typeface all play a joint role in readability.\n\nTo edit text styles:\nGo to the Style tab.\nIn the Typography section, specify settings as needed.\n\nFor detailed information on text accessibility, refer to:\n\nWebAIM's Typefaces and Fonts\nWebAim's Links and Hypertext\nPaste text without styles\n\nWhen copying text from another app and pasting that text into Builder, you might inadvertently paste the styles along with the text. To paste without styles in Builder, use one of the keyboard shortcut:\n\nOn a Mac, Cmd/Ctrl + Shift + v\nOn a PC, Ctrl + Shift + v\nColors and contrast\n\nWhen you're choosing colors for backgrounds, text, diagrams, or images, make sure the color contrast is accessible. To check if the colors you're using are accessible, use the WebAIM Contrast Checker. Enter your colors in the Contrast Checker to test if they pass accessibility standards.\n\nTo find the rgb or hex code for a color that's set in the Builder Visual Editor:\n\nSelect the element where the color is set. For example, if the color is on the text, select that Text block.\nGo to the Style tab and go to the appropriate section. For example, if adjusting text color, expand the Typography section and click on the color swatch to display the color picker, which contains the hex and rgb codes.\nCopy the code you need and paste it into the appropriate WebAIM Contrast Checker field.\n\nIf the colors don't pass the WebAIM Contrast Checker, make adjustments in the checker to find colors that do pass. Paste the color codes that do pass into the Builder color picker.\n\nTo change colors in the Visual Editor:\n\nSelect the block you want to change.\nGo the Style tab.\nFor background colors, use the Background settings. For text, use the Typography settings.\n\nThese instructions are for colors set manually within the Visual Editor Style tab. As an alternative to setting colors manually, your developer can specify colors in a data model and you can bind to the colors. In this way, when the color changes in the model, all bindings automatically update the content to which they are bound.\n\nFor details on using data models for creating a Site Theme for managing colors, see Create a Site Theme.\n\nTip: These instructions for changing colors assume that you are using the Builder Visual Editor to set your colors and that you have access to change styles. However, many teams rely on Designers and Developers to specify colors in the CSS that blocks in Builder inherit.\n\nIf you find that changing the settings in the Style tab doesn't affect the change you want, you may want to reach out to your team's CSS point person.\n\nImages\n\nAlways use an Image block to add an image, rather than setting the image as a background on a block. Builder's Image block optimizes the image; however, the background image setting does not. Additionally, the Text block's alt text makes the block more accessible to screen readers than background images.\n\nAlways add alt text to images for accessibility. Make sure to use punctuation on alt text so that the screen reader pauses appropriately when reading the copy. You can find the Alt Text field by clicking the Edit button on the Image block.\n\nImportantly, get familiar with the importance of alt text for accessibility by reading WebAim's Alternative Text.\n\nFor more information on the Image block in Builder, refer to Working with Images.\n\nProvide information in a variety of ways\n\nUse a combination of methods to convey information. Text, along with images, diagrams, videos, or other elements can help support differentiated access to information.\n\nWhat's next\n\nFor more best practices check out the following:\n\nFor detailed layout best practices, refer to the Box Model and Fixing Responsive Layouts.\nFor more information on web accessibility, refer to the WebAIM Introduction to Accessibility."
  },
  {
    "title": "Understanding margins and padding - Builder.io",
    "url": "https://www.builder.io/c/docs/margin-padding",
    "html": "Margin and Padding\n\nUse margin and padding to space blocks from each other and change the space between a block's content and border.\n\nAn example of margins is the space between tiles on a page. If you don't want the tiles all touching each other, you'd add margins to put some space between them.\n\nAn example of padding is making a button wider and taller so that it is easier touch with a fingertip or broad pointer.\n\nThink of padding like the stuffing you put in a pillow to make it bigger. Think of margins as the space between the pillows.\n\nMargins\n\nA margin is the space around the outside of a box. The following image features three boxes in a row on a webpage. The space between the boxes is margin.\n\nAdjusting margins\n\nTo adjust margins, take the following steps:\n\nSelect the block that needs margin adjustments.\nGo to the Margin & Padding section of the Style tab.\nAdjust the values in the outer rectangle to set the margin.\n\nYou can use any legal CSS unit for the value, such as percentage, ems, rems, or pixels (px).\n\nThe following video demonstrates adjusting the margin settings on a Text block. As the margin values change, the Text block moves further from or closer to the blocks above and below as well as either side.\n\nPadding\n\nPadding is the space inside of a box, specifically the space between the content, such as copy, and the border of the box.\n\nThe following image features three boxes in a row on a webpage. The space within each box, between the content and the border is padding.\n\nTo adjust padding, take the following steps:\n\nSelect the block that needs padding adjustments.\nGo to the Margin & Padding section of the Style tab.\nAdjust the values in the inner rectangle to set the padding.\n\nYou can use any legal CSS unit for the value, such as percentage, ems, rems, or pixels (px).\n\nThe following video demonstrates adjusting the padding settings on a Text block. As the padding values change, the Text block grows or shrinks while its margins–the distance from the top and bottom boxes, as well as either side–remains unchanged.\n\nMargin and padding are best for adding space around and inside of a block. Though sometimes adjusting these settings can make it appear as though the block position is changing, the margin and padding still take up space and affect the flow as the page attempts to adjust to different screen sizes.\n\nInstead, use Alignment settings in the Style tab to significantly adjust the location of an item within its containing block. Reserve margin and padding for basic styling rather than overall layout. By sticking to these guidelines, and leveraging Builder's built-in responsive styles, you'll be able to concentrate more on connecting with your users.\n\nNext steps\n\nUnderstanding margin and padding are integral to great layout. For more information on using Builder to create responsive layouts, read Using Columns for Responsiveness, which covers how Builder's built-in Columns block adapts to different screen sizes automatically.\n\n\n"
  },
  {
    "title": "Using Alignment for Layout - Builder.io",
    "url": "https://www.builder.io/c/docs/alignment",
    "html": "Using Alignment for Layout\n\nWhen you want to place an item on the left, right, top, or bottom of its container, use the Align feature in Builder's Visual Editor.\n\nPrerequisites\n\nTo get the most out of this article, make sure you are familiar with the following:\n\nHow Width Affects Layout\nThe Box Model\nMargins and Padding\nAlignment examples\n\nThe following image shows three image blocks in the Visual Editor. The image blocks are within a full-width gray box: the first box is left aligned; the second is centered; and the third is right aligned.\n\nPutting Blocks in Containers\n\nWhen using alignment, consider placing the item you'd like to align within another container, such as a Box. By nesting a block within another container, you give the block a context for alignment.\n\nIf you don't put the block inside another block, its parent container is then the larger context of the page or section. While a Section block is usually a suitable context, a Page might be too large, with unexpected results, especially as content increases. For more information on conceptualizing your layout, refer to The Box Model.\n\nFind Align settings in the Layout section\n\nThe Layout section is at the top of the Style Tab in the Visual Editor. Use the Layout section to push a block left, right, center, up, down, or make the block full-width. In the Layout section, you can also set a minimum or maximum width on the block, which prevents the block from getting too big or too small.\n\nAlignment and width work together in layouts. This article focuses on alignment. For more information on how to use width effectively in your layouts, refer to How Width Affects Layout.\n\nFill width: make the block full width\n\nTo make a block take up the width of its parent container, select the block and click the Fill width setting in the Layout section of the Style tab.\n\nThe following example features a Box with a gray background and a 20 pixel padding all around to help distinguish the Box for demonstration purposes. Within the Box is an Image block with default settings.\n\nBy default, the image width is 100% and the alignment setting is set to Fill width. With the default settings for the Image and Box blocks, the Image takes up all of the horizontal space.\n\nFor this example, if you wanted the image to fill up the Box all the way to the edge, you'd take the padding off of the containing Box.\n\nIf you were to specify a max-width on the image, the Box would remain full width but the image would be limited in terms of how big it could get. In the following screenshot, the image has a max-width of 300 pixels, so it remains small.\n\nIn this case, though the Image block's alignment is set to Fill Width, the image also has a max-width of 300 pixels on it, which means that no matter what, the image will not exceed 300 pixels. To get this image to go from one side of the gray Box to the other you'd have to remove the max-width\n\nAligning blocks to the left or right\n\nTo align a block to the left, select the block and click the Left Align icon in the Layout section of the Style tab. Make sure you have the block you want to push to the left selected, rather than the block it's nested inside.\n\nTo align a block to the right, select the block and click the Right Align icon in the Layout section of the Style tab.\n\nIf you have an image that is taking up the full width even though you've clicked the Align Left or Align Right setting, put a max-width on the block.\n\nThe following example has a 300 pixel max-width on the image block, which means that the image never gets wider than 300 pixels. If you didn't specify a max-width, the image would take up all the available space, so that aligning the image left would appear to look just like Fill width.\n\nAligning text\n\nWhen you have an Image block or a Box, and you drop a Text block onto it, The Box or Image collapses if it doesn't have a specified height, as in the following example. This is natural browser behavior because images nor boxes don't have an inherent height.\n\nTo keep the Image or Box from collapsing, specify a minimum height in the Layout section of the Style tab. The image in the following example has a min-height of 600 pixels, which prevents it from ever being any smaller than 600px tall. The minimum height can vary and depends on the size of your image.\n\nWhenever you set heights or widths, be sure to check Tablet and Phone views and adjust settings for smaller screens.\n\nCentering blocks horizontally\n\nTo center a block horizontally, select the block and click the Center Horizontally icon in the Layout section of the Style tab.\n\nIn the following image, the text block is centered horizontally. This automatically causes the width of the text block to shrink to its contents. To edit the spacing of the text block, refer to Margin and Padding.\n\nTop-aligning blocks\n\nTo place a block at the top of its containing block, select the block you want to move and click the Top Align icon in the Layout section of the Style tab.\n\nIn the following image, the text block is aligned to the top of its parent container, which in this case pushes the text block to the top edge of the image.\n\nVertically centering a block\n\nTo center a block vertically, select the block and click the Center vertically icon in the Layout section of the Style tab.\n\nIn the following image, the text block is aligned to the vertical center of its parent container.\n\nAligning a block to the bottom\n\nTo push a block to the bottom of its parent container, select the block and click the Align bottom icon in the Layout section of the Style tab.\n\nIn the following image, the text block is aligned to the vertical center of its parent container.\n\nNext steps\n\nIf you've read through The Box Model, How Width Affects Layout, Margin and Padding, along with this article, checkout Using Columns to Build Responsively to bring all these responsive building skills together."
  },
  {
    "title": "Make a Landing Page: Step 1 - Builder.io",
    "url": "https://www.builder.io/c/docs/landing-page-1?_host=www.builder.io",
    "html": "Make a Landing Page\n\nThe Make a Landing Page series guides you through building a page in Builder from scratch. By the end of the series, you'll have built a beautiful page with a hero, columns, and quick, but sophisticated design elements. You'll learn how to:\n\nBuild sections of a page from scratch\nBuild what you see using alignment, columns, and styles\nMake your page look great on all devices\nWhat you'll build\n\nYou'll build a whole page from the top down with a wide hero image, copy, a button, and a layout that looks and behaves like a modern site that invites confidence in the brand.\n\nPrerequisites\n\nTo follow along in Builder, make sure you have the following:\n\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nA Builder account. If you're just trying Builder out, you can do everything in this series with a free account.\nBuilding a hero\n\nThe first video in this series shows you how to:\n\nCreate a page\nCreate a full-width hero image at the top of your page\nAdd copy and a button to the image\n\nThis video demonstrates the whole process. Below the video is a list of the steps. Each section also has a quick video below it to isolate the required steps.\n\nCreate a new page\nIn Builder, on your Content tab, click the +New button, give your new page a name, and click Create Page.\nChoose the Blank page rather than one of the Templates.\nAdd a photo and text\nInto the +Add Block section on your new page, drag a Box from the Insert tab.\nNow drag an Image block into the Box you just added. Edit the Image block to choose your photo.\nOnce your photo appears, drag a Text block onto it. This will contain the large headline. You'll notice the image shrinks to the height of your new Text block.\nClick your Image and on the Style tab, give your image a min-height. Make it 500px in this instance.\nChange the font size to 50px and the color to a contrasting color. Here we made it white.\nCenter your Text box vertically by selecting it, then choosing the center vertically icon in the Align section of the Style tab.\nFor the subhead, drag another Text box onto your picture. On the Style tab, make the text 25px. In the Align section of the Style tab click the Up arrow to push this subhead up.\nTo bring the header and subhead together now, select the header, and click the Down arrow this time.\nAdd a button\nTo add your button, drag the Button block from the Insert tab onto your photo just under the subhead. You'll notice the Button is full width.\nSelect the Button, and on the Style tab choose the button background color. Here we chose white, so we also changed the font color to black.\nChange the Button's padding using the Style tab. Make it about 65px on the left and 65px on the right. Change the max-width to 300px.\nNext, also in the Style tab, click the center horizontally icon. Now to move it up, click the up arrow icon.\nThe video shows you how you can also change the margins to move the Button a bit more.\nIf you want to match the Everlane button's style, you can increase the border radius from the Style tab's Border section."
  },
  {
    "title": "How Width Affects Layout - Builder.io",
    "url": "https://www.builder.io/c/docs/width",
    "html": "How Width Affects Layout\n\nA primary factor in how a block behaves across devices is its width. Builder's blocks already have default width settings, which make them ready to use in responsive layouts.\n\nThe following article describes the most common width settings and how they impact block behavior.\n\nMost frequently used styles, including width, are available as GUI (Graphical User Interface) controls in the Style tab. We recommend that you use the block's default, but if you need to make adjustments, go to the Style tab.\n\nThe following image shows the Style tab for an image with a width set to auto.\n\n👉 Note: Since you can build entire responsive layouts with no code in Builder, this article doesn't cover custom CSS. To add or edit custom CSS on a selected element, you can use the CSS Properties section of the Style tab.\n\nUsing auto width\n\nAuto width helps blocks respond gracefully to variation in screen size. If a block is behaving in unexpected ways, check that its width setting is auto and then check the width of any block within which it is nested.\n\nIn the following screenshot, the Box that the image is in and the image both have a width of auto, which means both are responsive. The auto width takes into account any margins, padding, or border on the image, which keeps the image from overflowing its container.\n\nUsing percentage width\n\nA block with 100% width makes the block 100% the width of its container, but doesn't include the margin, padding, or border in the calculation. In this case, the block can overflow its container, because the padding and margin are making it too big for the space it's in.\n\nIn the following screenshot, the image is overflowing its containing box. To display the elements and their relationships to one another, turn on X-ray mode, which displays bounding boxes, nesting/hierarchy, margin and padding.\n\nIn this screenshot, the Box has a pixel width and the image inside the Box has a 100% width and a margin, which causes the image to be too big for the Box. When this configuration repeats over multiple elements on a page, the layout breaks as the screen size shifts.\n\nIf you need to use a percentage width for a block, be sure to set its margins, padding, and border to 0. With percentage width, if you still need spacing around the block, put the margin or padding on the containing block that the image is in, not on the block itself. In addition, check to make sure that the containing block doesn't have a fixed width setting, that is a pixel width. Instead, use width auto or 100%.\n\nUsing the Section block for full width\n\nUse the Section block when you need a section to span the whole screen but you want to limit how wide the content within the Section gets.\n\nDrag and drop a Section block into the work area from the Insert tab. The Section block is unique in that its width is set in vw, or units of viewport width. 100vw, the default Section width, means that the Section spans the entire width of the viewport. The browser window is a common viewport.\n\nWhile the Section block width is relative to the viewport as long as the width is in the default of vw, the contents of the Section have a maximum width of 1200 pixels by default. This means that you can place other blocks inside the Section block and they won't get bigger than 1200 pixels wide, which is friendly to wide screens.\n\nIn preview mode the Section expands to the edges of the browser, while the content stays within its 1200 pixel maximum width.\n\nThe following image shows the difference between a Section and a Box. The Section, with its 100 viewport width expands all the way to the edges of the viewport, while the Box is constrained in width by default.\n\nIf a block had a width of 50vw, it would be half of the viewport width, regardless of the size. This resembles percentage widths except that the width of vw is relative to the entire viewport, such as the browser window. A percentage width on a block, however, is relative to the parent container, which could be a small part of the viewport. So if you put a viewport width on a block, that block's width is now is calculated based on the viewport size and doesn't reference its parent container.\n\nIn the following image, A Section at 100vw is inside of a Box block. The Box block is constrained in width but the Section width does not take into account the width of the Box because the Section width is set in viewport units.\n\nA possible use case for this configuration is if you had a layout where most of the areas of content were constrained but you wanted a section to expand beyond everything else.\n\nNext Steps\n\nBuild upon your understanding by reading Margin and Padding, which covers what margin and padding are, how they affect block width, and when to use them.\n\n\n"
  },
  {
    "title": "Importing Figma designs into Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/import-from-figma",
    "html": "Importing from Figma with Visual Copilot\n\nin beta\n\nAs part of the suite of tools known as Visual Copilot, the Builder Figma plugin helps you import your Figma design directly into Builder while letting AI take care of the details—no more manually rasterizing, applying auto layout, or figuring out all the responsiveness.\n\nImport your Figma designs into Builder to create a Page or Section, complete with responsive styles.\n\nPrerequisites\n\nBefore importing your Figma design into Builder, make sure:\n\nYou've installed the Builder.io plugin for Figma.\nYou have a completed design in Figma.\nUsing AI with the Builder.io Figma plugin\n\nThe AI features in the Builder plugin take care of all the details—including rasterizing images, applying auto layout, and making the design responsive in Builder.\n\nTo import your Figma design into Builder using AI:\n\nIn your Figma file, select the frame(s) you'd like to import into Builder.\nIn Figma, open the Builder plugin by clicking on Resources in the toolbar and going to the Plugins tab.\nClick the Generate Code button.\nThis workflow launches a Builder fiddle with your content, which you can copy and paste into another Builder document or save as a template.\n\nTip: Always check your import in Builder by clicking each device icon and tweaking as needed.\n\nMost settings you might want to update are in the Style tab, such as margins and padding, widths, and alignment.\n\nThough you don't have to do any prep to your Figma file before using the plugin, you can optionally apply Auto Layout as a guide for the AI, especially if you're finding that your design could use some extra help.\n\nThe video below shows how to import your Figma design into Builder using the plugin's AI feature. This example uses a full page, but importing a section design is the same.\n\nPasting Figma layers into Builder\n\nEffortlessly copy and paste your Figma designs into Builder with the Builder Figma plugin. This workflow is great for when you need to update an existing Page or Section; for example, design updates to a hero.\n\nTo import layers from Figma into Builder using the Figma plugin:\n\nSelect the layer(s) in Figma.\nOpen the Builder Figman plugin and expand the options in the Generate code button.\nSelect Copy & Paste Designs.\nWhen the copy process is done, go to the Builder Visual Editor and paste with Cmd/Ctrl + v.\n\nTip: Make sure you use the Generate Code button's Copy & Paste Designs option, as this is how the plugin implements the import process.\n\nThe next video shows this process.\n\nWhat's next: get your code\n\nAfter importing your Figma design into Builder—or creating a design from scratch in Builder—you can generate semantic code for your design and sync that code with your codebase. For instructions, visit Generating Code."
  },
  {
    "title": "Layers - Builder.io",
    "url": "https://www.builder.io/c/docs/layers",
    "html": "Using Layers\n\nThe Layers tab in the Visual editor is useful for identifying elements in your layout and accessing them via a hierarchy that shows their relationship to each other. Using the Layers tab you can achieve the following:\n\nIdentify any parent-child relationships between elements.\nTroubleshoot layout issues.\nDrag and drop elements for precision placement.\nAdd blocks directly from the Insert tab.\nAdd, move, delete, and rename elements.\nSee which layers have features such as an animation, action, data binding, or events.\nSearch for something in Layers, such as some text, the type of element/block, or any name you gave the layer.\n\nThe following screenshot shows the Layers tab.\n\nRenaming layers\n\nTo rename a layer, open the Layers tab, double-click on the layer, and enter the new name. Name layers to represent what's inside to help you keep track of what each element does, and to find an element on a page if your page is long or complex. For long or complex pages, use the search to find layers by name or content.\n\n👉 Tip: In the Layers tab, Symbols are shown in purple.\n\nAnimations, actions, and events\n\nIf an element has features such as an animation, action, binding, or event, it will feature an indicator icon, as in the following example:\n\nThe following video illustrates how the Layers tab indicates actions and events on a Layer. It also shows some of the available options for actions, events, and animations.\n\nAdding, deleting, nesting, and moving layers\n\nYou can select a block on the Insert tab, drag it to the Layers tab, and drop it wherever you like among the other layers.\n\nTo nest the block, hover the block over where you'd like to place it. Blue lines appear to show you where you are placing the block and whether you're nesting it within another layer. If the new block is not where you want it, just drag it where it should be.\n\nIn the following video, the new Text block is nested inside the Columns block. You can test that by collapsing the Columns block and noting that the new Text block is then hidden in the list because it's inside the Columns block.\n\n👉Tip: When you move a layer, you are changing the structure of your page. If an element inherits styles from its parent, and you move that layer out from under the parent, those parent styles no longer apply to that element.\n\nIf you accidentally move a layer, you can undo with Cmd+z on a Mac and Ctrl+z on a PC.\n\nNext steps\n\nNow that you understand the power of Layers, you might want to check out the other concepts mentioned above, including:\n\nUsing State and Actions\nBlock Types in Builder"
  },
  {
    "title": "Breakpoints - Builder.io",
    "url": "https://www.builder.io/c/docs/breakpoints",
    "html": "Using Breakpoints to Build Responsively\n\nWhen a design shifts gracefully from one screen width to another, the design is responsive. A key element in building responsively is using points at which the layout changes to maintain its design integrity. These points, referred to as breakpoints in web development, are viewport widths that commonly include certain device types.\n\nFor example, in the following video the Visual Editor uses breakpoints to determine which viewport widths includes small devices, such as phones, medium devices, such as tablets, and larger screens such as monitors and on laptops.\n\nBuilder's default breakpoints\n\nBuilder has three built-in breakpoints for planning your layouts:\n\nPhone: 0-639px\nTablet: 640px-991px\nDesktop: 992px+\n\nThese pixel widths include most of the devices in each category and Builder applies these breakpoints automatically in the Visual Editor.\n\nTo make style changes for specific widths, click on the icon for that width and edit the styles. Any time you make changes to a width, those styles apply to that width and smaller. For example, if you make style changes to the tablet view, those changes apply to tablet and phone widths. If you make style changes in phone view, those changes apply only to phones.\n\nViewing the default breakpoints\n\nIn the Visual Editor, hover over the Desktop, Tablet, or Phone icon to display the breakpoints that currently apply to that view.\n\nThe image below shows the hover state of the tablet icon with a default breakpoint of 641px to 991px:\n\nFor information on viewing custom breakpoints, refer to the Viewing custom breakpoints section of the Using Custom Breakpoints documentation.\n\nEditing content at different breakpoints\n\nWhen creating Pages and Sections in the Visual Editor, you can preview and edit your work for desktop, tablet, and phone.\n\nClick on the device icon you'd like to preview at the top center of the Visual Editor work area.\nMake edits as needed. For example, if a heading font size is too large only on phone, reduce the font size while displaying the phone viewport width.\nPublish so your updates take effect on your live site.\n\nTip: When you change styles on a screen size, the change applies that screen width and smaller, but do not affect the larger screen sizes. In this way, you can fine-tune the styles for smaller devices without changing styles for wider screens.\n\nIn the following video, the font size is changed at the Phone and Tablet widths. Then the different widths are displayed to show that smaller-screen styles apply at those widths only.\n\nUsing Mobile Sidecar Preview\n\nThe Mobile Sidecar Preview helps you keep the mobile experience in mind when working in the default Desktop view.\n\nTo open Mobile Sidecar Preview:\n\nClick Change layout editor icon.\nSelect Mobile Sidecar Preview.\nContinue working in the Visual Editor as usual. When you click on an element, the phone preview scrolls to the selected element.\nTo make changes in Phone view, follow the instructions in the previous section, Editing content at different breakpoints.\n\nTo close Mobile Sidecar Preview:\n\nClick Change layout editor icon.\nSelect Auto, Always Two Column, or Always Three Column.\n\nThe following video shows opening, working in the Visual Editor, and closing the Mobile Sidecar preview.\n\nWhat's next\n\nRefine your use of breakpoints with a solid foundation in responsive techniques. For more information, see:\n\nThe Box Model\nHow Width Affects Layout\nThe Changing styles by device type section of Margins and Padding\n\nFor information on more granular control over breakpoints in your Builder project, read:\n\nUsing Customizable Breakpoints"
  },
  {
    "title": "Understanding the Box Model - Builder.io",
    "url": "https://www.builder.io/c/docs/box-model",
    "html": "The Box Model\n\nIn modern browsers, every element on a page is a building block. Some blocks are as wide as the viewport, while others are small and might line up in a horizontal row. Blocks can contain things such as text, images, or buttons.\n\nWhen the screen size changes, the layout of the blocks should change in such a way that the content is still accessible and intentional while the UX remains engaging for the user.\n\nUnderstanding the concept of how the blocks interact with one another and how settings that affect size, such as width, margin, and padding, influence layout can help you build responsive projects for any screen size–from the largest displays to mini hand-held devices.\n\nThe following video shows a Builder page at different sizes to demonstrate how the content shifts.\n\nHow browsers work with blocks: the Box Model\n\nEverything on a webpage is in what a browser interprets as a box. These boxes, or blocks, can stack on top of one another, line up horizontally, and even nest inside other boxes. Boxes contain elements such as headings, paragraphs, images, videos, forms, buttons, and other boxes.\n\nIn web development, this concept is known as the Box Model. The following image of a Builder page shows boxes around the two main sections and boxes nested within those two main boxes.\n\nDifferent types of boxes have default behaviors that we can change by making style adjustments. Styles affecting position and size that you edit in Builder are specifying real CSS which the browser then uses to determine layout. Because even a minimal page contains lots of boxes, changes to one can sometimes cause cascading effects. If you understand the Box Model, you can use this to your advantage.\n\nThe built-in Builder blocks already have styles for responsive layout. You can drag and drop them onto the working area and without any styling at all, they respond automatically to changing screen sizes.\n\nPlanning a layout\n\nThe importance of the Box Model becomes more apparent as layout evolves. As you plan the layout, consider the main boxes and then the smaller boxes inside of them.\n\nThe following image is the Builder homepage with each of the elements inside a drawn box. The header at the top is its own box and contains other boxes with the logo, navigation menu, and sign-in button.\n\nThe next large box contains the rest of the content in progressively smaller, nested boxes. Though there are many boxes, they are organized into two boxes. Start the layout planning at a high level and after you have the main sections, move to more granular layout.\n\nFirst, consider the layout in terms of the biggest boxes. At the highest level, this page are two main boxes.\n\nSecond, consider the next level of boxes. Here, the big box that encompasses the main content has two boxes within it.\n\nContinue in this way until you've added all of the design elements you would like. Sketch your ideas out before you start so you have a roadmap as you work later.\n\nBuilding with boxes\n\nWhen your basic layout is ready, you can start building in the Visual Editor. Suppose you have the following layout of a webpage with a header box, and a main box for the body with two boxes side beside each other inside of that box:\n\nAt the moment, just focus on the highest level. This example has two big sections. In the Visual Editor, drag in a Box for each main section.\n\nNow consider the detail. In the main body, there are two boxes side by side. Rather than dragging in two boxes and trying to adjust their styles, think of side-by-side content like this as columns. Drag in a Columns block and drop it within the second box.\n\nIf you use Builder's Columns block for side-by-side layout, the structure is automatically responsive. which frees you up to focus on the design and content. You can use multiple Columns blocks throughout a layout to quickly set up a modern, responsive layout that's ready for content.\n\nContinue with this method until you've completed the layout. This approach has several advantages:\n\nYou save yourself time by organizing the layout. If you instead didn't use any boxes to organize different areas, and put all items loose on the page, you could inadvertently affect layout in unexpected ways that could be challenging to correct.\nBoxes help divide the layout process into manageable chunks. A box scopes the layout tasks and you can work on them somewhat independently of one another.\nUnderstanding which section needs attention when fixing responsiveness issues becomes more readily apparent.\nRecommendations for planning layouts\n\nThe default width settings on Builder create a responsive block automatically in most cases. If you're building your projects according to best practices, blocks in Builder require little additional styling to make them responsive.\n\nSome of those best practices include:\n\n⚠️ Avoid pixel widths, which is fixed and inflexible. Refer to How Width Affects Layout for more information.\n⚠️ Avoid use of absolute positioning. Absolute positioning has specific use cases, but isn't suited for whole page layout. If you use it on many items in your layout, the layout won't be responsive.\n✅ Organize layouts into sections.\n✅ Place elements and content inside of a containing block, such as a Box, Section, or Columns, which are are responsive by default.\n✅ Rely on Builder's built-in styles to get a responsive layout started.\n✅ Use auto or percentage widths if you need to change a default width setting.\n✅ Use the Columns block for side-by-side content.\n✅ Use the Alignment section of the Style tab to move items within their parent container. By using the Alignment options, you ensure that the items placement is more likely to be responsive. To preserve the integrity of your layout, prefer Alignment over specifying position manually.\n\nWhen you set a width in pixels, or px, browsers keep that width, regardless of screen size. While there are cases where a pixel width might be appropriate for a block, most of the time auto or a percentage, such as 100%, provide a better result.\n\nNext steps\n\nThe Box Model is foundational for understanding responsive layout. To go understand how the Box Model works block width check out How Width Affects Layout.\n\n\n"
  },
  {
    "title": "Commenting in Builder - Builder.io",
    "url": "https://www.builder.io/c/docs/commenting",
    "html": "Adding Comments to Your Content\n\nTip: While in beta, commenting is available on all free and paid plans.\n\nWith the Comments feature in Builder, you can share ideas with teammates and collaborate right in your Builder project. You can start threads, add to threads, and delete threads and comments. You can comment on the page as a whole or on a specific block.\n\nThis article describes commenting permissions, the different kinds comments, and shows you how to view, edit, and delete comments.\n\nYou can find the Comments tab by clicking the chat bubble icon next to the Data tab. Here's how the Comments tab looks before any comments have been added:\n\nPermissions\n\nAll user roles can comment in Builder. Organization Administrators can delete any comment or thread while comment authors can delete only their own comments and threads.\n\nOrganization Administrators can edit any comments as well, and the comment's author can edit their own comments.\n\nMore information about Builder permissions can be found in Roles and Permissions.\n\nViewing comments\n\nA notification bell icon at the top of the Visual Editor indicates that there are comments when accompanied by a blue dot.\n\nTo open the Comments tab, click the chat bubble icon next to the Data tab button.\n\nAlternatively, open the Layers tab, which displays a chat icon next to any layer that has a comment on it.\n\nIf you have configured your editor in three columns, the Comments tab will be available from the right side of the editor, as illustrated in the following image.\n\nIn addition, you can display the Comments by clicking the Notifications icon to open the fly-out menu. This menu only displays if there are comments. If there are no comments, the notification bell icon is grayed out and inactive. Page-level comments are at the top of the Comments fly-out menu with block-level comments listed below.\n\nThe following image shows a blue dot on the Notifications bell icon, indicating that there are comments, and a list of comments in the fly-out menu.\n\nIt also shows the Layers tab, which you can always check for comments.\n\nWhen you click on a comment in the Layers tab, the page scrolls to and highlights the block associated with the comment.\n\nYou can tag other users in your comments by typing the @ symbol and selecting their name from the dropdown list that opens. The tagged user is notified by email when you save a comment that tags them.\n\nHere's a typical email notification to anyone tagged in a comment:\n\nAdding a page-level comment\n\nTo add a comment that applies to an entire page, take the following steps:\n\nClick away from any block so that no blocks are selected.\nOn the Comments tab, add your comment and click the Add Comment button or press Enter.\nAdding a comment on a specific block\n\nTo add comments in Builder, take the following steps:\n\nClick on a block to select it. This associates your comment with that particular block.\nIn the Comments tab, type your comment and press Enter or click the Add Comment button.\n\nWhen you click the Add Comment button, you start a thread if there are no other comments. If there are comments, you add your comment to the existing thread. The following image shows the beginning of a thread.\n\nThis screenshot shows the Reply text field and button. To reply, type your comments into the text field and click the Add Reply button to respond to the thread.\n\nEditing or deleting a comment\n\nClicking the ellipsis opens an Edit/Delete menu. To edit your comment, select Edit from the menu.\n\nMake your edits and click the Save button.\n\nIf you selected Delete from the fly-out menu, a Delete Comment dialog opens asking you to confirm that you want to permanently delete the comment. To do so, click the red Delete button.\n\nDeleting a thread\n\nTo delete a thread, click the ellipsis in the thread and select Delete thread from the menu that opens. Only an Organization Administrator or the thread's original poster can delete a thread.\n\nNext steps\n\nSharing ideas asynchronously with comments can help your team work more efficiently. For more ideas on collaborating, check out Working with Versions, which shows you how to make different versions of a page."
  },
  {
    "title": "Builder Chrome extension - Builder.io",
    "url": "https://www.builder.io/c/docs/chrome-extension",
    "html": "Editing Your Site Using the Builder Chrome Extension\n\nYou can quickly identify and edit Builder-managed content directly from your website with Builder's extension for Google Chrome.\n\nThe extension outlines Builder components and symbols on the live, published version of your pages. Selecting the \"Edit\" button within an outline opens up the corresponding content in the Visual Editor.\n\nThe Chrome extension offers an alternative workflow to manage your content. Instead of finding content to edit from Builder's content page, you can rapidly pinpoint and open the content you want to change by browsing your live site.\n\nInstalling the extension\n\nAdd the extension to Chrome by selecting Add to Chrome on the extension's page in the Chrome Web Store.\n\nConfirm adding the extension by selecting Add extension when prompted.\n\nBuilder recommends that you pin the extension to Chrome's address bar to make it easily accessible:\n\nSelect the extensions button from the address bar.\nSelect the pin button next to Builder in the extensions list.\n\nThe extension will now appear in Chrome's address bar for quick access.\n\nOnce installed, enable the extension:\n\nSelect the Builder button in your address bar, or select Builder from your extensions list if you haven't pinned it (see above).\nSelect \"Outline Builder components\".\nIdentifying and editing Builder components and symbols\n\nNavigate to any Builder-enabled page in Google Chrome. We'll use the \"How Builder works\" page from Builder's documentation as an example.\n\nOnce the page has loaded, select the Builder button in your address bar, or select Builder from your extensions list if you haven't pinned it.\n\nTo outline the Builder components and symbols on the page:\n\nEnsure that the \"Outline Builder components\" option is selected.\nClose the extension modal by clicking or tapping the page behind it.\n\nNotice that the components and symbols on the page now appear outlined.\n\nHover over an outlined area to reveal the \"Edit\" button. Select \"Edit\" to open the corresponding content in Builder.\n\nIn the example below, we'll edit the header used in Builder's documentation pages.\n\nYou can now view and edit your component or symbol in the Visual Editor.\n\nFor developers"
  },
  {
    "title": "Working with Images - Builder.io",
    "url": "https://www.builder.io/c/docs/images",
    "html": "Working with Images\n\nChoosing and uploading images in Builder is quick and Builder takes care of optimization for you. This document covers the following:\n\nAdding an image\n\nTo use images in Builder, take the following steps:\n\nDrag an Image Block from the Insert tab and drop it onto the work area.\nClick on the Image Block to select it.\nClick the Edit button.\nClick Choose Photo.\nSelect a photo or upload your own.\n\nTip: Always use the Image block.\n\nTo support peak performance, Builder’s Image Block optimizes any image you add to it. This optimization takes place with the Image Block, not on background images, so make sure you always use the Image Block to help performance.\n\nHow Builder improves image performance\n\nWhen you use Builder's Image Block for your images, Builder serves the correct optimized format for every web browser. Builder performs these optimizations so you don't have to:\n\nThe Image Block ensures you load the smallest possible image.\nBuilder analyzes your image as it relates to the layout of your page and determines the exact sizing of your image for all device sizes, automatically generating the optimal size for each screen.\nBuilder uses lazy loading, which loads images only when your users need them. This reduces how much users have to download.\nBuilder uses responsive page layout analysis to flag which images are below the page fold for each device so they can be lazy loaded.\nBuilder converts your image to the webp format.\n\nIf you're a developer and are looking for more control over the image that is served by Builder, read the Image API documentation.\n\nFill a parent block with an image\n\nImages automatically take up full width of their parent container when they are dropped on the page. An image's width can change if you adjust the alignment. If this occurs, change the image's width to 100% and it will take up the full width again.\n\nDeleting an image in the Visual Editor\n\nTo delete images in Builder's Visual Editor working area, for example on a page or a section, take the following steps:\n\nClick on the Image Block to select it.\nPress the Delete key.\nDeleting an image you've uploaded\n\nTo delete images you've uploaded to Builder that are in the Choose Photo dialogue, rather than in the Visual Editor, take the following steps:\n\nClick on the Image Block to select it.\nClick the Edit button.\nClick Choose Photo.\nClick on the Your Recent Photos tab.\nImages and accessibility\n\nWhenever you add an image to your site, always add alt text to images. Alt text is text that you provide with the image so that screen readers and search engines know what the image depicts.\n\nTo add alt-text to an image in Builder:\n\nSelect the Image block and click Edit.\nIn the Image block's Edit dialogue, enter the alt-text in the alt-text field.\n\nThe image below shows where the alt text field is located within the Image block's Edit dialogue. Remember that images serve as visual enhancements and should not be the only source of the information.\n\nWorking with WebP Images\n\nAs mentioned, Builder saves your images as WebP images. If you right-click on your live page to save an image, it will be saved as WebP.\n\nIf you're on a Mac, the Preview app can export the image to a png. If you're on a PC, Paint can convert an image.\n\nTip: Sometimes WebP images can exhibit unexpected behaviors in some browsers when zoom levels are changed. If this is an issue, we recommend changing the image format to jpg or png.\n\nConnecting an external image\n\nDespite the image optimization you get by using Builder's Image block, there may be times when you need to use an image that's hosted elsewhere.\n\nYou can accomplish this using a data binding.\n\nWith the Image block selected, open the Data tab and click +New Binding.\n\nUnder New Binding, next to Get, select Image from the dropdown arrow.\n\nFor the From field, enter your image URL in double quotes. This example uses https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg.\n\nNow your image will appear on your page. Here's a fiddle showing the data binding.\n\nUploading an animated GIF\n\nIf you still need to upload an animated GIF, this section shows you how to upload additional file types.\n\nTip: Instead of using animated gifs, we recommend that you use videos for better performance. You can upload a video or embed a hosted video. In an uploaded video using the Video block, you can toggle various settings on the video such as loop, autoplay, and repeat.\n\nIf you can't select your file, you need to tell your computer that any file type is permissible. In your operating system dialogue, take the following steps.\n\nOn a Mac:\n\nClick the Options button and in the Format dropdown.\nSelect All Files, as in the following image:\n\nOn a PC:\n\nNext to the File name dropdown, select All Files, rather than the default of Custom Files, as in the following image:"
  },
  {
    "title": "Tour the Builder UI - Builder.io",
    "url": "https://www.builder.io/c/docs/ui-tour",
    "html": "Getting Around Builder: The Left Sidebar\n\nTo get the most out of Builder, take a tour and learn where to everything is. The following video walks through the features accessible from the left sidebar.\n\nYou can use the left side bar to navigate to the main areas of Builder including:\n\nSelecting and creating Organizations and Spaces\n\nContent: Get to all of your content.\n\nInsights: Find metrics, such as heatmaps and stats for your content.\n\nModels: Define types of content and data, such as product pages, blog posts, and marketing pages.\n\nIntegrations: Connect your Builder Space with many other services such as Shopify, Contentful, and Swell.\n\nHelp: Join the Builder community or get help.\n\nUpdates and Tips: find out about the latest in Builder and get workflow tips.\n\nAccount: Manage your account.\n\nThe left side bar expands when you hover on the left side of the main Builder area.\n\nThe following sections describe each area of the left side bar.\n\nSelecting and creating Organizations and Spaces\n\nAt the left topmost part of the Builder UI, click on the down arrow to select and create Organizations and Spaces.\n\nContent\n\nIn the left side bar, go to Content to create and maintain elements such as pages, headers, sections, banners.\n\nInsights\n\nIn the left side bar, go to Insights to measure and compare the performance of your Builder content.\n\nModels\n\nIn the left side bar, go to Models to define elements such as a page types, parts of pages, or data models.\n\nIntegrations\n\nIn the left side bar, go to Integrations to connect your Builder Space to other services, such as Shopify, Contentstack, Figma, and many others. This is where you can also grab the code specific to your framework to integrate with your Space.\n\nHelp\n\nIn the left side bar, go to Help to find documentation, the community forum, making a feature suggestion, or talking to our Sales team.\n\nUpdates & Tips\n\nIn the left side bar, go to Updates & Tips to get the latest news on updates to Builder and tips for leveraging Builder's powerful features.\n\nAccount\n\nIn the left side bar, go to Account where you can rename your Space, edit your site's URL, define user roles, connect to Instagram, add users, and fine tune Builder to your preferences. At the Organization level, this is where you can access your invoices."
  },
  {
    "title": "Localization Intro - Builder.io",
    "url": "https://www.builder.io/c/docs/localization-intro",
    "html": "Introduction to Localization with Builder\n\ngrowth plans\n\nLocalization, also known as the numeronym i18n, is the technique of delivering content and formatting specific to different regions. For example, you'd use localization to deliver copy in the preferred language of a visitor to your site. With localization you can curate what different target audiences experience when engaging with your Builder content.\n\nWith Builder, you choose how much you want to localize:\n\nLocalize individual text blocks in the Visual Editor.\nLocalize whole pages for the flexibility to deliver different copy, images, and even layout.\nThe localization process\n\nTo use Builder's localization features, you need to do the following:\n\nAdd locales in Builder.\nProvide content to each locale. This can differ depending on if you're localizing Individual Text Blocks or Localizing Whole Pages.\nIntegrate with your codebase.\n\nTip: If you use Smartling, check out the documentation on Integrating Smartling with Builder."
  },
  {
    "title": "Block Types in Builder - Builder.io",
    "url": "https://www.builder.io/c/docs/block-types",
    "html": "Block Types in Builder\n\nBlocks are the drag-and-drop building blocks that give your project structure. Blocks contain and format the content inside them.\n\nText block\n\nThe Text Block, like all the blocks, is available in the Insert tab. Drag it onto your page and enter your text.\n\nIn the Text dialogue, you can set styles such as the level of heading, or normal text, bold, italic, highlighting, lists, and background color.\n\nWith a Text block selected, you can go to the Style tab to specify styles such as the font family, weight, size, color, alignment, line height, and more.\n\nThis short video shows how to use the Text Block.\n\nEditing text inline\n\nIn addition to using the Text dialogue to edit text, you can optionally use Inline text editing to edit text directly on the Page without having to open a dialogue.\n\nWhen you toggle Inline text editing on or off, the setting applies to all Text blocks.\n\nIn the Text dialogue—accessed by double clicking the Text block or by going to the Options tab—set the Inline text editing toggle to the on position.\nClick on a Text block to edit and edit as usual.\nTo toggle off Inline text editing, select a Text block, go to the Options tab, and toggle the Inline text editing to the off position.\n\nThe next video shows using Inline text editing.\n\nUsing the slash command for faster editing\n\nWith the slash, /, command, you can quickly pull up the most in-demand features of the Visual Editor. To use the slash command, you must be using Inline editing.\n\nOptions available include adding:\n\nAdd blocks, including:\n\nText\nImage\nVideo\nColumns\nSections\nForms and form elements\nCustom code\n\nFormatting text such as:\n\nHeadings (h1, h2, and h3)\nOrdered lists\nUnordered lists\nBold\nItalics\nUnderline\n\nTip: When using the slash command to add another element within a Text block, the existing Text block splits into two. This can be helpful for quickly breaking up large blocks of copy.\n\nTo use the slash command:\n\nWhile inline editing a text block, press Enter to start a new line.\nWhen the new line starts, the Text block displays a prompt that reads Type '/' for commands.\nPress the slash, /, key.\nSelect the option you'd like from the list.\n\nThe next video shows a few examples of using the slash command to add structure and elements in the Visual Editor.\n\nThe Image block\n\nThe Image block, available from the Insert tab, manages your image's responsiveness, size, and performance for you.\n\nYou drag the Image block onto the work area and add an image to it by uploading your image.\n\nUsing the Style tab, you can set properties on the image, such as margins, padding, min- and max-width and height, as well as whether the image fills the container.\n\nYou can turn your image into a banner by constraining the height, and you can add text over the image.\n\nTip: When you use the Builder Image block, you're assured of the best performance and optimization for your images. It is recommended that you always use the Image block around your images and not place them into your page using another method. For more information, check out Working with Images.\n\nThis short video shows how to use the Image block.\n\nThe Columns block\n\nTo use the Columns block, drag it from the Insert tab onto your page. Once you drop onto your page, the Edit menu lets you add and remove columns.\n\nIf you drag another type of element into the column area, such as placing an image between two columns, the image will become a column and inherit all the properties and responsiveness of the other columns.\n\nYou can change the spacing between and around the columns by dragging the small dot at the edge of a column. When you do, the columns will all adopt that equal space between each of them. Dragging the vertical lines changes the width of the column.\n\nYou can check the mobile layout from the top bar to see that your columns adapt properly to the smaller screen sizes.\n\nThe following video shows the operations you can perform on columns.\n\nThe Box block\n\nThe Box block, available on the Insert tab, is the most minimal building block in Builder. The Box block gives you a container to put other blocks within, such as text and images.\n\nBox blocks can have background colors to set them apart, shadows, borders, border radius settings, margins, padding, and all the properties an element can have in CSS.\n\nBy default, the Box block is constrained in width by its parent, such as another box or the page. If you'd like its width to be unconstrained and fill the whole width of the viewport, use a Section block instead.\n\nThis video shows what you can do with a Box block.\n\nThe Embed block\n\nThe Embed block gives you a place to embed into your pages videos and other assets you find on the web, such as Instagram posts.\n\nFind the Embed block on the Insert tab. Just drag it onto your page and add the URL in the Edit menu.\n\nThis video demonstrates the process with a YouTube video and an Instagram post.\n\nThe Button block\n\nThe Button block lets you create and style a button that you can use to link to another page. To use it, drag it onto your page from the Insert tab.\n\nYou can style the button in the Style tab and change styles such as the size, color, and font.\n\nYou can also set a trigger so that the color or other properties of the button change when the user hovers over it. That behavior is available in the Animate tab.\n\nIf you want to try out the Button animation, check out this video. While you may not want to make the button label bigger on hover, this shows how you can.\n\nThe Section block\n\nThe Section block, available on the Insert tab, is useful when you want part of your page to fill the width of the viewport, even beyond the width of the rest of your page.\n\nYou can style Section blocks just like any other block. Sections are ideal for containing Columns, Text, image, and Box blocks.\n\nThe following video demonstrates the use of the Section block.\n\nThe Custom Code block\n\nUse the Custom Code block when you have code to paste from anther site. For example, YouTube provides both a URL and embed code. The YouTube embed code gives you more options than the plain URL, such as where to start the replay and whether or not to show the video controls. Because these parameters are not in the YouTube URL, you can't use the Embed block's URL feature to set them. Instead, use the Custom Code block to include all those parameters.\n\nTip: Use Custom Code Blocks to add HTML to your content. If you need access to state and other Builder-provided global variables you can instead use custom JavaScript as outlined in the Custom Code documentation.\n\nThis video shows the usage of the Custom Code block.\n\nTemplates\n\nTemplates are useful when you want to have a styled piece of content to use many places, but want to be able to change the content or make minor edits to styles.\n\nA good example is our Tip template. It has the pointing finger and the styling, but we change the text depending on the tip we want to convey.\n\nYou'll note that this is similar to Symbols below, but Symbols have exactly the same content wherever they are used.\n\nTemplates are available further down on the Insert menu in the Templates section.\n\nYou can create your own Templates by selecting a group of content and choosing Save as Template.\n\nFor more information on Reusable Blocks, of which Templates are one type, refer to Reusing Blocks.\n\nThe following video shows the use of two Templates.\n\nSymbols\n\nSymbols, also found further down on the Insert menu under the Symbols tab, are very similar to Templates.\n\nSymbols are also reusable pieces of content, but their content does not change based on where they are used. You can change a Symbol after it's created, but that change will be reflected everywhere that Symbol is used.\n\nFor more information on Reusable Blocks, of which Symbols are one type, refer to Reusing Blocks.\n\nThis video demonstrates the use of a Symbol.\n\nFor more information on building with blocks check out Getting Started with the Visual Editor."
  },
  {
    "title": "Tour the Builder UI: the top bar - Builder.io",
    "url": "https://www.builder.io/c/docs/top-bar-tour",
    "html": "Getting Around Builder: The Top Bar\n\nThis article introduces the items on the top of the Builder Visual Editor. For an overview of the other parts of the Visual Editor that you use for creating page content, styles, and data, read Getting Around Builder: the Visual Editor.\n\nEditing the name of the page\n\nTo edit the name of the current page, click on the title in the uppermost left of the screen and enter a title. This name is the name internally in Builder and doesn't show publicly when you publish.\n\nYou can use this to your advantage if internally your team refers to pages by names other than their published titles. For example, internally, the Builder docs team begins all the docs in the Take a Tour section of the left navigation with \"Tour:...\" so when searching for these files internally the search term \"tour\" returns all of them.\n\nAnother potential use case for internal naming is to use these titles to let your teammates know you're actively working in a file. For example, you could name a work in progress page \"Blog post for next release. Do not delete. (Sarah)\" This lets your teammates know at a glance that this page belongs to Sarah and is important.\n\nWhen you duplicate a page, Builder automatically appends a number to the end of the title while maintaining the original title. You can select the title to give the new page a unique name.\n\nA/B Tests\n\nTo create A/B Tests, or tests where you test one kind of content against another, go to the A/B Tests tab. To run an A/B Test, you need at least two versions of what you want to test. This tab walks you through creating a duplicate page if you don't already have one and then guides you through the process of creating a variation.\n\nFor a tutorial on how to set up A/B tests, check out the documentation on A/B Testing.\n\nInsights: get page analytics\n\nGo to the Insights tab to find page analytics such as click through rates, impressions, and conversions. For more information on what you can do with Insights, including working with heatmaps, read Viewing Metrics with the Insights tab.\n\nVersions\n\nThe Versions tab displays all versions, including drafts and live versions of the page. You can switch versions or edit any iteration.\n\nHistory\n\nBuilder autosaves every few seconds so you can refer to the History tab to revert to an earlier state, see who worked on the file and when, as well as see and revert to any previous published state.\n\nWith the Checkpoints tab, you can view all saved Checkpoints. A Checkpoint is a snapshot of your page at the moment you press Cmd+s on a Mac or Ctrl+s on a PC. Save a Checkpoint if you want to quickly return to a certain state.\n\nChanging the Visual Editor layout\n\nTo change where the tabbed panels are in the Visual Editor, click the Change Editor layout icon just above the work area. Choose Automatic, Two Column, or Three Column.\n\nAutomatic changes the layout depending on screen size.\nTwo Column moves all of the panels to the left of the work area.\nThree Column keeps the Insert tab to the left of the work area and the rest of the editing tabs to the right.\nWorking in full screen mode\n\nTo use as much of the screen real estate as possible while editing a page, click the full screen editing icon. This keeps the editing tabs but hides items that you might use less frequently.\n\nTo exit full screen mode, click the x in the upper left of the editor.\n\nX-ray mode\n\nUse X-ray mode to outline every element on your page so you can see the structure clearly. This is helpful for finding empty blocks that are otherwise invisible and seeing how items are nested.\n\nNote that X-ray mode adds spacing to make the outline clear. To see the page without the extra spacing, toggle X-ray mode off by clicking the icon again or preview the page.\n\nViewing Heatmaps\n\nUse the Heatmaps icon as a shortcut to see your heatmap data.\n\nToggle Heatmaps view on or off by clicking the Heatmaps icon.\n\nEditing the page URL\n\nTo temporarily change the page URL, click and edit the URL to the right of the Laptop, Tablet, and Phone icons.\n\nTargeting and scheduling\n\nUse Targeting to get the right content to the right people. For example, you could have one experience for those logged in and another for those logged out. You could vary the experience depending on device, or you could show content based on the URL. There are a number of built-in options including custom targeting for Enterprise plans.\n\nWith Scheduling, you can specify dates and times for content to go live and combined with Targeting, you can deliver the right content to the right audience at the right time.\n\nFor more details on Targeting and Scheduling, read Targeting and Scheduling Content.\n\nUndo and redo actions\n\nTo back up an edit, click the Undo icon, which is the curved arrow that points to the left. To bring the last undone edit back, click the Redo icon, which is the curved arrow that goes toward the right.\n\nPreview\n\nWhether you've published or are still working on a draft, you can check the preview by clicking on the eyeball icon and selecting View Current Draft or View Live Page. To see your changes on the live page, make sure you click the Publish or Publish Update button before checking the preview.\n\nPublish\n\nWhen you're ready to move beyond the drafting stage and share your creation, click the Publish button.\n\nBy publishing, you make that version of the content canonical. When you make changes to a page, for example, you must publish the updates for the page to reflect those changes.\n\nThough generally you'll have one unique URL for each page, you can have multiple pages with the same URL and configure when which page goes live. For more information on having multiple versions of the the same page published, see Targeting and Scheduling Content.\n\nWhole page actions\n\nClick the three dots icon in the far upper right of the screen to get access to the following:\n\nUnpublish the current content to remove it from your live site. The unpublished content remains in Builder.\n\nArchive to remove the item from the list of content. Archiving is a reversible process. To view your archived items, on the Content page, filter by Published is Archived.\n\nDuplicate to make a copy of this content in its entirety.\n\nCopy the current item to another Space. Builder takes you to that other Space where you can select where to paste the content.\n\nGet code for embedding in your existing, non-Builder site.\n\nCreate fiddle for sharing a view or editable version of the content in the Visual Editor.\n\nDelete the content in its entirety forever. This is irreversible and the item cannot be restored. If you think you might need the content again in the future, considering archiving instead."
  },
  {
    "title": "Tour the Builder UI - Builder.io",
    "url": "https://www.builder.io/c/docs/ui-ve-tour",
    "html": "Getting Around Builder: The Visual Editor\n\nTo build pages and parts of pages with drag-and-drop functionality, use Builder's Visual Editor. Check out the video for a walkthrough of the Visual Editor.\n\nOpening the Visual Editor\n\nTo get to the Visual Editor, go to Content and open a Page or any other kind of content you have. This example has the default Page, a Symbol, and a Homepage Hero.\n\nWhen you pick Page, for example, all your pages display in a list to the right. Open one of your pages by clicking once on the page or, if you don't have any pages, click the +NEW button in the upper right to create a new page.\n\nWhen the new page opens, you're in the Visual Editor.\n\nOverview of the Visual Editor\n\nWhen you open or create a page, Builder launches the Visual Editor, a user interface with a working area in the middle and a section on either side where you can find many of the options for building and configuring your page or section.\n\nThe main working area\n\nThe central area of the Visual Editor is where you drop blocks to build your page. Work graphically by dragging and dropping elements on and around your page. Select an element in the working area to configure its layers, options, styles, animations, and data.\n\nWhen a page is empty, there's a blue section with the words, +Add Block. Drag and drop blocks from the Insert tab onto this blue section to start building.\n\nWhen the page has contents, it resembles the live version of the page, but in the Visual Editor, you can select parts of the page by clicking on them and editing the properties in the tabs that pertain to that block. Whenever you select a section, the Options, Style, Animate, and Data tab contents change according to the context of that block.\n\nThe Insert tab: where the building blocks live\n\nThe Insert tab contains all the elements that you can drag and drop onto the page, including:\n\nFundamental building blocks for creating page elements from scratch\nA way to import from existing webpages, other apps, or Figma\nBuilt-in templates to quickly create professionally designed sections and pages\nYour own reusable blocks\nThe Layers tab: granular control\n\nThe Layers tab contains a list of each individual item on the page. Go to the Layers tab for the following:\n\nDisplay block nesting\nRearrange blocks with drag-and-drop\nRename blocks\nThe Options tab: content and metadata\n\nThe Option tab changes depending on your selection. If you select a text block in the working area, for example, you can use the Option edit the content, bindings, or links.\n\nIf you click on the Show Options button, the Options tab displays fields for configuring the page URL, Title, and description.\n\nEach type of block has unique fields in the Options tab, such as for Image, Columns, and Text blocks:\n\nFor a Text block, use the Options tab to edit and style the text as well as specify a link for subsets of the copy or for the entire Text block.\nFor an Image block, use the Options tab to add a picture, set alt text, and create links.\nFor a Columns block, use the Options tab to re-order columns and configure contents.\n\nThe Options tab always changes to reflect the options available for configuring whatever you select in the Visual Editor work area.\n\nThe Style tab: design visually with the power of CSS\n\nTo specify designs for blocks, go to the Style tab where you can edit existing styles or create a custom look. The Style is where you add styles such as:\n\nAdjust size and alignment\nShow or hide a block at different screen sizes\nSet a background color or image\nStyle the typography just as you would in a word processing app\nSpecify spacing with margins and padding\nSet borders, shadows, and other CSS properties\nCreate anchor links, set autofocus, and create ways for code to hook into an element\nThe Animate tab: bring the page to life\n\nSelect a block in the working area and use the Animate tab to add motion to the block. You can add animations on hover, page load, or scroll and you can specify any style to animate.\n\nThe following three screenshots are examples of the Animate tab according to the animation trigger. The first is an animation that triggers on page load, the next on hover, and the last on scroll into view.\n\nYou can choose from built-in animations such as fading in, or you can fully customize the animation by editing individual styles, just as in the Style tab.\n\nThe Data tab: connect to your data, wherever it lives\n\nUse the Data tab to integrate with other platforms such as Shopify, Contentstack, Contentful, or any other integration Builder offers. For details, check out Setting up e-commerce plugins.\n\nMobile view: see the page at different screen sizes\n\nClicking on the icons for a laptop, a tablet, and a phone displays the current content in the working area at different screen sizes. Use these views to make your pages responsive. You can apply styles specifically to certain screen widths by editing the Style tab while in one of the mobile views.\n\nFor thorough coverage of responsive concepts and techniques, read Intro to Responsive Design.\n\nThe preview button\n\nYou can preview your page at any time while you're editing by clicking the preview eye in the top-right corner of the Visual Editor. You can also view the current live page using that button."
  },
  {
    "title": "Real-Time Collaboration - Builder.io",
    "url": "https://www.builder.io/c/docs/collaboration",
    "html": "Real-Time Collaboration\n\nWith Builder's collaborative features, your team can flow together more productively and efficiently.\n\nThis document covers Builder's collaborative features and links to relative documentation.\n\nWork simultaneously with your co-workers\n\nWhen someone else is in a content entry that you're currently in, the Visual Editor displays several indicators:\n\nThe other person's cursor moves in real-time.\nA label with their name accompanies their cursor.\nAn icon with their initial displays toward the top right of the screen.\nTheir changes update in the Visual Editor in real-time.\n\nThe video below shows what the Visual Editor is like when more than one person is working in a content entry at the same time.\n\nRoles and permissions\n\nAssign built-in or custom roles and permissions for each member of your team. The following video touches creating a new user.\n\nFor details on Builder's robust roles and permissions features, read Roles and Permissions in a Space.\n\nVersions, history, and tracking changes\n\nSimilar to Google Docs, you can review every edit made by any team member, revert back to any point time, save versions, and more.\n\nThe next video shows switching between versions of a Page.\n\nFor more detail, read Working with Versions.\n\nCommenting\n\nStart conversions, discuss feedback, and share updates and ideas with teammates on an entire content entry or on a specific block.\n\nThe next video shows leaving a comment for a coworker.\n\nFor more instructions, read Adding Comments to your Content.\n\nShare across your organization\n\nShare components, data, content, and experiences across any of the Spaces within your Organization.\n\nThe next video shows copying a content entry from one Space to another.\n\nFor more detail, read Copying content from one Space to another section of Managing Spaces.\n\nWorkflows\n\nSet up workflows and rules to set up processes for quality control and define who can do what and set up Stages.\n\nWith Workflows and Rules, you can ensure the right people follow the right process. For more detail, read Workflows and Rules for Content Governance."
  },
  {
    "title": "How Builder works - Builder.io",
    "url": "https://www.builder.io/c/docs/how-builder-works",
    "html": "Key Concepts in Builder\n\nBuilder is a Visual Headless CMS. It connects to your existing site or application and enables anyone on your team to create, manage, and publish high-performing, enterprise-scale digital experiences without constantly relying on developers. Empower your team while freeing up development resources, which helps all team members be more productive, efficient, and creative.\n\nUsing Builder with your site\n\nYou can decide which parts of your site Builder manages and which parts you want to maintain in code. There are three main ways you can incorporate Builder:\n\nVisual pages: Use the drag-and-drop UI to develop everything between your site's header and footer.\nVisual sections: Make just a part of a page visually editable in Builder and use targeting and scheduling to decide who sees what.\nStructured data: Fetch data from Builder and use it anywhere in your application, such as menu items.\n\nVisual Pages\n\nTry out Pages\n\nUse Pages to manage entire pages, such as:\n\nMarketing and content pages\nLanding pages\n\nVisual Sections\n\nTry out Sections\n\nUse Sections to maintain parts of your site or app, such as:\n\nAnnouncement bars\nProduct editorial\nCollection heroes\nCart upsells\n\nStructured Data\n\nTry out Data\n\nUse Structured Data to manage structured data, such as:\n\nNavigation links\nProduct details\nBlog post authors\n\nBuilder integrates with your existing site or app and renders content much like developers do when writing code by hand. This means you can add visual site building while still leveraging your existing technologies such as the following:\n\nSEO\nanalytics\ncore user flows control\nfrontend components\nbackend data\n\nBuilder pushes content to your site or app by connecting to your codebase. You control your site, code, and hosting–Builder only passes content to your site or application, rather than hosting it.\n\nThe following diagram shows where Builder fits. Your app still resides where you host it, while Builder provides a visual interface to your services, commerce platform, or headless CMS.\n\nFor more terms and definitions, see the Glossary.\n\nFor a more technical overview of Builder, see How Builder Works: Technical Overview."
  },
  {
    "title": "Using webhooks in Builder.io - Builder.io",
    "url": "https://www.builder.io/c/docs/webhooks",
    "html": "Webhooks\n\nYou can integrate Builder with your app using webhooks. This can be useful if you want your app to be aware of content changes that should trigger any workflows you have on your end. An example of this could include storing the data that has changed in your database or triggering a cache bust in your CDN.\n\nAdding a webhook\n\nTo add a webhook for a model:\n\nGo to Models.\nChoose the model you want to edit.\nScroll down and choose Show More Options.\nClick Edit Webhooks.\nEnter a URL you would like Builder to POST to with the updated content.\n\nBuilder will POST to the endpoint you provide every time content is published, unpublished, archived, or deleted. Note that a null newValue indicates a deletion, and a null previousValue indicates a first publish.\n\nThe following is an example of a POST format:\n\n{\n  \"newValue\": { \n     \"id\": \"cs3df\",\n     \"published\": \"draft\",\n     \"name\": \"My great page\",\n     \"data\": {\n        \"property\": \"value\"\n     }\n  },\n  \"previousValue\": { ... }\n}\n\nRendering the data\n\nThe following example demonstrates rendering data.\n\nSuppose you were using webhooks to store Builder content changes to use at render time; for example, side-loading. Each time your app received a webhook from Builder, your app would store the new value in its database.\n\nThen, when your app received a request from a user, it would query its own database for the content instead of hitting the Builder API as requests came in.\n\nIf you were using the Builder React SDK to render components or pages on your site, you'd pass the JSON data that came in the webhook,newValue, to the content prop of the BuilderComponent and the component would handle rendering for you, as in the snippet below:\n\nimport { BuilderComponent } from '@builder.io/react';\n\n<BuilderComponent model=\"page\" content={theJsonFromTheWebhook} />\n\nYou can extend or modify this approach to fit your app's way of rendering data for your users, even if you are not using a Builder-supplied SDK.\n\nAnother option if you are not using JavaScript to render your frontend is to have Builder pre-render the HTML for you. Using pre-rendering means you can store the HTML that Builder generates and serve it to your users according to your use case.\n\nWhen your app gets a webhook from Builder, use the id supplied in the request to make a call to Builder's HTML API. Then store that HTML in your database and send it to your users in a way that works for your app.\n\nSince this example only calls Builder once every time the app receives a webhook, use the query parameter cachebust=true to ensure your app gets the most up-to-date data. The response below uses cachebust=true:\n\nlet response = fetch('https://cdn.builder.io/api/v1/html/DOC_ID?apiKey=YOUR_KEY&cachebust=true')\n// Now you can save and later serve the HTML as you please\nlet html = response.data.html\n\nTip:  Only use cachebust: true in the SDKs or APIs for build time requests; such as static building pages.\n\nWe do not recommend it for runtime requests—such as when serving live pages."
  },
  {
    "title": "Image API - Builder.io",
    "url": "https://www.builder.io/c/docs/image-api",
    "html": "Image API\n\nYou can use Builder's Image API to access and download optimized versions of images that you've uploaded.\n\nOverview\n\nImage API requests take the following format:\n\nhttps://cdn.builder.io/api/v1/image/<filename>?<params>\n\n<filename> is the name of your image file, typically auto-generated by Builder at upload time.\n<params> are settings that determine the image's height, width, and so on.\n\nThe Image API is a read-only API for downloading previously uploaded images. All images must be manually uploaded using Image blocks in the Visual Editor or File fields when working with CMS Data models.\n\nImage API explorer\n\nYou can use the tool below to experiment with the Image API's query parameters.\n\nCynthia Parker\nPremium bagels\nMr. Fashion\nTropical paradise\nQuality\nHeight\nWidth\nFormat\nFit\nPosition\n\nImage API URL:\n\n\nhttps://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425\nUsing the Image API with CMS Data models\n\nA common use case for the Image API is to download variants of images stored in CMS Data models.\n\nTo get started, create a CMS Data model and add a File field:\n\nWhen adding your new field:\n\nEdit the field's Name.\nSelect File as the field's Type.\nConfirm that only \".jpeg\" and \".png\" are selected under Allowed file types.\n\nClick Save once you've finished adding your new field.\n\nNow create a new content item for your model. Click on Choose Photo to upload the image for your field.\n\nClick Publish once you've uploaded your image and finished creating your content item.\n\nYou can now access your image URL programmatically using the Content API. The following example uses Builder's JavaScript SDK:\n\n// For a CMS Data model named 'user', querying a user profile\n// with the username 'cparker'.\nconst content = await builder\n  // Replace the model name and options object with your own\n  // model name and query options.\n  .get('user', { query: { 'data.username': 'cparker' } })\n  .toPromise();\n\n// Your uploaded image's URL is available on your File field.\nconst imageUrl = content.data.avatar;\n\n// Create variants by adding Image API query parameters.\nconst variantUrl = `${imageUrl}?height=200`\nQuery parameter reference"
  },
  {
    "title": "Builder Admin API - Builder.io",
    "url": "https://www.builder.io/c/docs/admin-graphql-api",
    "html": "Admin API\nUsage\n\nAdmin API is a GraphQL API meant to be used by back-end servers or trusted parties performing administrative tasks. The goal of this API is to allow all what can be done through the Builder.io dashboard (and more) to be done through it.\n\nThis API is separate from the public Content API, which is meant to be used for consuming Builder content.\n\nWhen you connect the Admin API to a specific space (by using its private key in the Authorization header) you can:\n\nQuery space settings.\nQuery model definitions.\nCreate / Read / Update / Delete models.\nConfigure SSO provider.\nClone your entire space.\n\nOr you can connect it to an organization, in this case you can:\n\nCreate a new space under it.\nGenerate an embed token to allow embedding of a specific space within your organization.\n\nIt's available on:\n\nhttps://cdn.builder.io/api/v2/admin\n\nMake sure to pass your private key in authorization header\n\n{\n  Authorization: 'Bearer bpk-xx'\n}\n\nExplorer\n\nTo query and mutate your space add your private key to the HTTP Headers section below. For detailed documentation on each of the queries and mutations press on DOCS\n\nFor Nodejs\n\nSee our Admin SDK package for more info about querying and mutating your space."
  },
  {
    "title": "Web Components API - Builder.io",
    "url": "https://www.builder.io/c/docs/webcomponents-api",
    "html": "Web Components API\n\nUse Builder web components to display dynamic Builder content on any tech stack.\n\nWith the script tag and the <builder-component> custom element, you can optionally set the targeting attributes for Builder to load content dynamically. For example:\n\n<builder-component model=\"page\" api-key=\"YOUR_API_KEY\">\n  <!-- HTML here displays while your content is loading, \n  for example, put a gif here, or leave empty -->\n</builder-component>\n<script async src=\"https://cdn.builder.io/js/webcomponents\"></script>\n\n\nAttributes\nmodel\n\nRequired: Yes\n\nDescription: The name of the your page or component model to display\n\napi-key\n\nRequired: Yes\n\nDescription: Your Builder Public API Key\n\nentry\n\nRequired: No\n\nLoad a specific Builder entry by ID, e.g.\n\n<builder-component entry=\"3dasdf3\" model=\"page\" api-key=\"YOUR_KEY\">\n</builder-component>\n\nreload-on-route\n\nRequired: No\n\nIf on, the component observes location pushState events and reloads when the browser URL changes client side; for example, if you target different content for this code at different URL paths.\n\n<builder-component reload-on-route model=\"page\" api-key=\"YOUR_KEY\">\n</builder-component>\n\noptions\n\nRequired: No\n\nFull Builder options object as JSON to customize how content is requested.\n\n<builder-component options='{\"cacheSeconds\": 10}' model=\"page\" api-key=\"YOUR_KEY\">\n</builder-component>\n\nEvents\nload\n\nFires when the Builder content loads and passes you the data loaded. Good for transitioning content or tracking analytics such as which Builder content and A/B tests were viewed to other analytics providers.\n\nelement.addEventListener('load', event => { \n  var data = event.detail?.data\n  if (!data) { \n    // No matching content was found\n    show404()\n  } else {\n    animateIn()\n  }\n})\n\nerror\n\nFires when builder content fails to load.\n\nelement.addEventListener('error', event => { \n  console.error(event.detail)\n  showErrorPage()\n})\n\nInitializing\n<script>\nwindow.builderWcLoadCallbacks = [\n  (context) =>\n   context.builder.setUserAttributes({\n      /* Add your targeting attributes for Builder\n       * to dynamically load content to the web component above\n       */\n      locale: navigator.language,\n    }),\n];\n</script>\n\nThis code snippet sets up a builderWcLoadCallbacks callback function that runs when the Builder web component loads. Inside the callback, the context.builder.setUserAttributes() method is used to set targeting attributes for the Builder component, allowing dynamic loading of content based on these attributes.\n\nThis example features:\n\nwindow.builderWcLoadCallbacks: This is an array that holds callback functions to be executed when the Builder web component loads.\n(context) => ...: This is an arrow function that takes a parameter context, which represents the context of the Builder component. The context parameter provides access to various methods and data related to the Builder component.\ncontext.builder.setUserAttributes({ ... }): This method is called on the context.builder object to set user targeting attributes. Targeting attributes are used to customize the content displayed by the Builder component based on specific conditions.\n{ locale: navigator.language }: This is an example of a targeting attribute being set. In this case, it sets the locale attribute to the value of navigator.language, which represents the user's preferred language as detected by the browser.\n\nBy setting these attributes, you can dynamically load content into the web component based on specific criteria, such as the user's language in this example. In this way, you can provide personalized content based on the user's context and preferences.\n\nRegistering custom elements\n<my-hero title=\"Hello world\" subtitle=\"Lorem ipsum\"></my-hero>\nclass MyHero extends HTMLElement { /* ... */ }\n\ncustomElements.define('my-hero', MyHero)\n<script>\n// When the SDK loads\nwindow.builderWcLoadCallbacks = [\n  (context) => {\n    // Register each component\n    context.Builder.registerComponent(null, {\n      name: 'My Hero',\n      tag: 'my-hero',\n      inputs: [ \n        { name: 'title', type: 'string', defaultValue: 'Hello world' },\n        { name: 'subTitle', type: 'string', defaultValue: 'Lorem ipsum' }\n      ]\n    })\n  }\n];\n</script>\n\n\nPassing data and context for binding\n<builder-component\n  prerender=\"false\"\n  id=\"builder-component-element\"\n  model=\"page\"\n  api-key=\"your-api-key\"\n></builder-component>\n<script>\n  window.builderWcLoadCallbacks = [async function () {\n    const element = document.getElementById(\"builder-component-element\");\n    await customElements.whenDefined(\"builder-component\");\n    element.setState({\n      buttonText: \"Click Me\"\n    });\n\n    // You can pass functions, custom objects, and libraries down \n    // to the Builder component using context, which is similar to \n    // React context. Context data is propagated down the component \n    // hierarchy, allowing components to access it.\n    // However, the context data is not observed for changes or \n    // mutations, meaning that changes to the context data \n    // won't automatically trigger component updates.\n\n    element.setContext({\n      service: new Service({ message: 'hello world' })\n    });\n  }]\n</script>\n<!-- load the script with version explicitly set to 1.3.47 -->\n<script\n  async\n  src=\"https://cdn.builder.io/js/webcomponents@1.3.47\"\n></script>\n\n\n\nThe code example:\n\nSets up <builder-component>.\nPasses data using setState().\nDemonstrates how to pass functions and complex data through the setContext() method.\nExplicitly specifies version 1.3.47 in the script to load the specified version of the Builder component from the CDN."
  },
  {
    "title": "Builder.io Qwik API - Builder.io",
    "url": "https://www.builder.io/c/docs/qwik-api",
    "html": "Qwik API\n\nin beta\n\nBuilder's Qwik API is an performance-optimized alternative to the HTML API. It uses Qwik to prerender your content imto optimized HTML that requires no JavaScript to run, even if it has dynamic content.\n\nTip: The Qwik API has a limited set of features. If you want to build a Qwik app using Builder content, use the fully-featured Qwik SDK instead.\n\nSample request and response\n\nTo experiment with the Qwik API, check out the Builder API Explorer, which works with your own Builder content.\n\nThe following is an example of a request and response:\n\nhttps://cdn.builder.io/api/v1/qwik/YOUR_MODEL_NAME?apiKey=YOUR_API_KEY&url=PAGE_URL\n\n# Example response\n# {\n#   \"id\": \"c923kd89\",\n#   \"name\": \"About page\",\n#   \"data: {\n#     \"html\": \"<div data-builder-component=\"banner-ad\"><div class=\"builder-blocks\"><h1>Hello!</h1></div></builder-div>\"\n#   }\n# }\nThe Qwik framework\n\nQwik is a framework designed for extremely fast site startup, which it achieves in two ways:\n\nPure HTML delivery: Qwik delivers content in pure HTML, which is the fastest way to load content.\nTransparent lazy loading: Qwik lazy loads JavaScript behavior as needed, enhancing interactivity.\nIntegrating and fetching content\n\nTo integrate Qwik into your site, you need to perform two steps:\n\n1. Integrate qwikloader.js by including the following script tag in your HTML:\n\n<script async src=\"https://cdn.builder.io/js/qwik/qwikloader.js\"></script>\n\nThe Qwik REST API delivers static HTML. So to make the HTML interactive, Qwik requires this small—less than 1kb—library.\n\n2. Fetch your content. As an example, suppose you have a container, <div id=\"my-content\"></div>, where you want to load the content. You'd use the following code snippet to fetch and inline the content into the HTML:\n\n(async () => {\n  const qwikUrl = \n        new URL('https://cdn.builder.io/api/v1/qwik/YOUR_MODEL_NAME');\n  qwikUrl.searchParams.set('apiKey', 'YOUR_API_KEY');\n  qwikUrl.searchParams.set('url', location.href);\n\n  const response = await fetch(qwikURL);\n  const { html } = await response.json();\n  document.querySelector('#my-content').innerHTML = html;\n})();\n\n\n\nRepeat the above code for each content entry if multiple content entries need to be retrieved.\n\nSSR StackBlitz example\n\nQwik works best with Server-Side Rendering (SSR). You can cache the Qwik REST API response in a CDN and include it in your SSR content. Qwik automatically downloads additional JavaScript as needed for user interactions.\n\nThe following example, available in StackBlitz, uses the Qwik API to fetch content:\n\n<html>\n  <head>\n    <script async src=\"https://cdn.builder.io/js/qwik/qwikloader.js\"></script>\n  </head>\n<body>\n  Add your header content as needed...\n  <!-- The fetched Qwik content is rendered in the div below -->\n  <div id=\"my-content\"></div>\n  Add your footer content as needed...\n\n  <script>\n    (async () => {\n        const qwikUrl = new URL('https://cdn.builder.io/api/v1/qwik/page');\n        // Demo API key for demonstration only. Replace with your Public API key\n        qwikUrl.searchParams.set('apiKey', '5b8073f890b043be81574f96cfd1250b');\n        qwikUrl.searchParams.set('userAttributes.urlPath', location.pathname);\n\n        const response = await fetch(qwikUrl);\n        const { html } = await response.json();\n        document.querySelector('#my-content').innerHTML = html;\n    })();\n  </script>\n</body>\n</html>\n\nThe above example sets up a page using qwikloader.js and uses an async function that fetches the content which it then assigns to the #my-content div.\n\nInside the async function:\n\nA URL object is created with the Qwik API endpoint URL.\nYour Public API Key and user attributes, such as the URL path, are appended as query parameters to the URL.\nThe content is fetched from the Qwik API using fetch(), and the response is parsed as JSON.\nThe html property from the JSON response is extracted.\nThe extracted HTML content is rendered inside the <div> element with the id \"my-content\" using document.querySelector('#my-content').innerHTML = html;.\n\nIn this StackBlitz example, you can edit the code and use your own Public API Key. The following image is a screenshot of how this example renders in StackBlitz.\n\nPreviewing during development\n\nTo facilitate previewing a page during the creation process without the need for publishing or waiting for the CDN cache to update, you can add specific parameters to the Qwik URL. These parameters include:\n\nincludeUnpublished=true: This bypasses the cache and allows retrieval of unpublished content.\npreview=true: This ensures that the latest version of the page is always returned.\noverrides.page=: The can be found in the URL of the content you are editing in the Builder editor.\n\nThe following is an example of a URL that bypasses the cache and consistently provides the latest unpublished version:\n\n...&includeUnpublished=true&preview=true&overrides.page=...\nAPI query parameters\nBeta limitations\n\nIf you need support for features that the beta Qwik API does not yet include—such as registering components, editing Builder content on the same URL as content served, A/B testing, insights and tracking—consider the Qwik SDK as an alternative.\n\nWhat's next\n\nAs this API is in beta, we encourage you to share feedback in the Builder forum."
  },
  {
    "title": "Upload API - Builder.io",
    "url": "https://www.builder.io/c/docs/upload-api",
    "html": "Uploading Files with the Upload API\n\nWith Builder's Upload API, developers can upload files programmatically, such as images and videos, to Builder.\n\nPrerequisites\n\nBefore using the Upload API, create a Private API Key in Organization Account Settings.\n\nTip: Only those with Developer or Admin permissions can create Private API Keys.\n\nBe sure to read Managing Private API Keys so that you know how to keep your key secure.\n\nCreating a request\n\nTo upload a file to Builder using the Upload API:\n\nCreate a Private API Key if you don't already have one.\nCopy the Private API Key. Keep this key secret and only use it in API calls from your server, not any calls from public client applications.\nMake a POST request to the endpoint https://builder.io/api/v1/upload?name=MyFileName.pdf with the file as the request body and where MyFileName.pdf is the name of the file you're uploading.\nProvide your Private API Key in the Authorization header.\nSpecify the file type in the Content-Type header.\nWhen you make a successful POST request, you receive a JSON response with a URL for the uploaded file.\n\nTo better understand this process, the following is an example request and response.\n\nPOST Request Example\n\nTo upload a file into your assets library, send a POST with the file as the request body as in the following example, making sure to specify the name of file in the URL with name.\n\ncurl https://builder.io/api/v1/upload?name=MyFileName.pdf \\\n  -X POST \\\n  --data \"@/path/to/your-file.ext\"\n  -H 'Authorization: Bearer YOUR_PRIVATE_KEY' \\\n  -H 'Content-Type: image/png'\nExample Response\n\nThe response to a successful POST request includes a JSON object with information about the uploaded file, such as its URL. Here is an example response from the Builder Upload API:\n\n{\n    \"status\": 200,\n    \"message\": \"Success\",\n    \"url\": \"https://cdn.builder.io/api/v1/image/...\"\n}\n\nNode.js example\n\nThe following Node.js example demonstrates how to use the Builder Upload API in a Node.js environment.\n\nNotable features of this example include:\n\nA function called upload_image() that uploads an image file to the Builder Upload API.\nThe image file is read as binary data using the fs module.\nA POST request is made to the API endpoint with the binary data, the file name, and appropriate headers.\nIf the request is successful, the response is logged to the console as JSON.\nThe function is then called with the path to the image file as an argument to upload the image.\n\nSee the comments for details.\n\n// Import modules\nconst fetch = require(\"node-fetch\");\nconst fs = require('fs');\n\n// Define a function that will upload the image to Builder\nfunction upload_image(file) {\n  // Read the binary data from the image file\n  var bitmap = fs.readFileSync(file);\n  // Send a POST request to Builder Upload API \n  // which includes the name of the file.\n  // Include the binary data as the request body and needed headers\n  fetch(\"https://builder.io/api/v1/upload?name=MyFileName.pdf\", {\n    method: \"POST\",\n    body: bitmap, // binary data of the image\n    headers: {\n      // header with private key\n     \"Authorization\": \"Bearer builder-private-key\",\n     // header with the type of the image\n     \"Content-Type\": \"image/jpeg\" \n    },\n }).then(res => {\n      return res.json(); // Parse the response JSON\n }).then(resp => {\n     console.log(resp); // Log the response JSON\n }).catch((e) => console.log(e)); // log errors\n}\n\n// Call the `upload_image()` function with the \n// path to the image file as the argument\nupload_image('./path-to-media');\n\n\nJavascript example\n\nThis next example is similar to the Node.js example, but written with the browser's fetch() API instead.\n\nThis example has the following features:\n\nCreates a new Headers object to store some headers, such as Authorization and Content-Type. The Authorization header includes the Private API Key needed to authenticate the request, and the Content-Type header specifies the type of file being uploaded.\nUses a file variable that holds the binary data of the file to be uploaded.\nUses a requestOptions variable that holds an object that specifies the options for the fetch() function call. It specifies the file name, HTTP POST method, the headers, the body—which contains the binary data of the file—and a redirect option set to follow.\nCalls a fetch() function to make an HTTP POST request to the Builder API's upload endpoint with the requestOptions.\nThe response from the server is then converted to text and logged to the console.\n\nFor more context, see the comments in the code below:\n\n// create a new Headers object\nvar myHeaders = new Headers();\n// append the authorization token to the headers object\nmyHeaders.append(\"Authorization\", \"Bearer builder-private-key\");\n// append the content type to the headers object\nmyHeaders.append(\"Content-Type\", \"image/jpeg\");\n\n// specify the binary data to be uploaded\nvar file = \"<file contents here>\"; // Binary data\n\n// create the `requestOptions` object\nvar requestOptions = {\n  method: 'POST',\n  headers: myHeaders,\n  body: file,\n  redirect: 'follow'\n};\n\n// send the fetch request to the Builder Upload API\n// including the name of the file\nfetch(\"https://builder.io/api/v1/upload?name=MyFileName.pdf\", requestOptions)\n  // when the response is received, parse it as text\n  .then(response => response.text())\n  // once the response has been parsed, log the resulting text to the console\n  .then(result => console.log(result))\n  // if an error occurs during the fetch request, log it to the console\n  .catch(error => console.log('error', error));\n\n\nSpecifying a destination asset folder\n\nIf you're using folders to organize assets in Builder, you can optionally upload to a specific folder by adding the folder ID to the URL.\n\nFor example, if you wanted to upload an asset to a folder with the ID of abc123, you'd add &folder=abc123 to the URL and replace the placeholder ID of abc123 with your actual folder ID.\n\nTo find an asset folder ID:\n\nGo to the Asset Library.\nHover over the folder and click the Pencil icon.\nIn the dialogue that opens, copy the ID.\n\nFor example, if the ID were a0c7e097c0c34c16aadc5a204affe346, the syntax would be:\n\nhttps://builder.io/api/v1/upload?name=MyFileName.pdf&folder=a0c7e097c0c34c16aadc5a204affe346\n\nThe following image shows the Edit Asset Folder dialogue, with the folder ID highlighted:"
  },
  {
    "title": "Builder GraphQL API - Builder.io",
    "url": "https://www.builder.io/c/docs/graphql-api",
    "html": "Builder GraphQL Content API\nUsage\n\nWith the GraphQL Content API you can query your data by targeting attributes and/or custom fields and use your data as you choose!\n\nThe format is\n\nhttps://cdn.builder.io/api/v1/graphql/YOUR_API_KEY?query=QUERY\n\nYou can also use POST requests with { \"query\": QUERY } as the body, though GET is preferred when possible for performance and caching purposes\n\nExplorer\n\nThe best way to explore the GraphQL API for your data is to use the GraphQL explorer:\n\nTry the Graphql explorer\nExamples\n\nYou can see real world examples of using our GraphQL API in our open source examples, such as our Gatsby examle\n\nBasic usage\nquery {\n  page(limit: 1) { \n    content\n  }\n}\n\nWith targeting\n\nSee our content API docs for more info on custom targeting\n\nquery {\n  page(target: { urlPath: \"/foobar\" }, limit: 1) { \n    content\n  }\n}\n\nWith query\n\nSee our content API docs for more info on custom querying\n\nquery {\n  page(query: { \"data.someProperty\": \"someValue\" }, limit: 1) { \n    content\n  }\n}\n\nFor React\n\nSee our gatsby example for more info about querying and rendering to React\n\nquery {\n  page(query: { \"data.someProperty\": \"someValue\" }, limit: 1) { \n    content\n  }\n}\n\n# Render with\n# <BuilderComponent name=\"page\" content={data.page[0].content} />\nGet HTML\nquery {\n  page(prerender: true, limit: 1, target: { urlPath: \"/\" }) { \n    data { html }\n  }\n}\n\n# Render {{data.page[0].html}} in your site or app\nData model fields\nquery {\n  page(query: { \"data.someProperty\": \"someValue\" }, limit: 1) { \n    data {\n      someProperty\n    }\n  }\n}\n\nQuestions or comments?\n\nVisit the Builder Forum\n\nVisit our Github"
  },
  {
    "title": "Builder.io HTML API - Builder.io",
    "url": "https://www.builder.io/c/docs/html-api",
    "html": "Builder HTML API\n\nExplore the power of server-side pre-rendering and seamless integration with any tech stack using the Builder HTML API.\n\nTo experiment with the HTML API, check out the Builder API Explorer, which works with your own Builder content. The following video shows an example of using the API Explorer:\n\nThe following is an example of a request and response:\n\nhttps://cdn.builder.io/api/v1/html/YOUR_MODEL_NAME?apiKey=YOUR_API_KEY&url=PAGE_URL\n\n# Example response\n# {\n#   \"id\": \"c923kd89\",\n#   \"name\": \"About page\",\n#   \"data: {\n#     \"html\": \"<div data-builder-component=\"banner-ad\"><div class=\"builder-blocks\"><h1>Hello!</h1></div></builder-div>\"\n#   }\n# }\n\nQuery params\nName\tRequired\tDescription\n\napiKey\n\n\t\n\nYes\n\n\t\n\nYour Public API key\n\n\n\n\nurl\n\n\t\n\nYes\n\n\t\n\nThe current URL of the visitor on your site.\n\n?url=https://your-site.com/about?foo=bar\n\n\n\n\nincludeUnpublished\n\n\t\n\nNo\n\n\t\n\nSet to true to include unpublished content in your API response; for example, testing.\n\n\n\n\nquery.*\n\n\t\n\nNo\n\n\t\n\nMongodb-style query of your data.\n\n&query.data.id=abc123\n&query.data.myCustomField=someValue\n&query.data.someNumber.$ne=20\n\n\n\nfields\n\n\t\n\nNo\n\n\t\n\nOnly include these fields.\n\n&fields=id,name,data.customField\n\n\n\nomit\n\n\t\n\nNo\n\n\t\n\nOmit only these fields.\n\n&omit=data.bigField,data.blocks\n\n\n\nuserAttributes.*\n\n\t\n\nNo\n\n\t\n\nOptionally use this to send targeting attributes.\n\n&userAttributes.device=desktop\n&userAttributes.locale=en_us\n\n\n\n\ncacheSeconds\n\n\t\n\nNo\n\n\t\n\nSeconds to cache content (sets the max-age of the cache-control header response header). Set the value higher for better performance and lower for content that changes more frequently.\n\n&cacheSeconds=120\n\n\n\nformat\n\n\t\n\nNo\n\n\t\n\nSet to amp to render amp content (the content must be made with an amp model type) or email to render email model content (the content must be made with an email model).\n\n&format=amp\nPreviewing content on your site\n\nAs you work, it is essential to preview the content you build on your actual site. This ensures that any side effects of site-wide styles that affect Builder-created content—for example, heading CSS rules—are accurately displayed.\n\nSetting up the Builder preview\n\nTo integrate previewing:\n\nCreate a single route on your website that serves the Builder preview HTML and JavaScript by creating a new page/endpoint/route on your site called, for example, /builder-preview.\n\nIf you name the route something other than /builder-preview, replace /builder-preview in any example code and settings to the path you choose.\n\nConfiguring the HTML response\n\nYour framework determines how to create the new route, but the HTML it returns should be similar to the following example:\n\n<builder-component model=\"PAGE_MODEL_NAME\" api-key=\"YOUR_API_KEY\"></builder-component>\n<script async src=\"https://cdn.builder.io/js/webcomponents\"></script>\n\nTip: Make sure to replace the PAGE_MODEL_NAME and API_KEY with the actual values from your Builder space.\n\nFor more information, read Using Builder API Keys and Page Models.\n\nChange the PAGE_MODEL_NAME to the Builder model name of the model you want to preview—oftenm, it is page. An alternative and useful approach is to not hardcode the model name, but instead to have it be determined by query parameter in the page URL.\n\nIn this way, you can use a single endpoint to preview content from different models, such as /builder-preview?model=page or /builder-preview?model=homepage-section. Here is a pseudocode example:\n\nimport layout from '../yourLayoutComponent';\nimport { builderPublicKey } from '../constants/builder';\n\nconst model = requestQueryParams.get('model');\n\nreturn (\n  <layout title=\"Builder.io Preview page\">\n    <builder-component name=\"{model}\" api-key={builderPublicKey}>\n    </builder-component>\n    <script src=\"https://cdn.builder.io/js/webcomponents\" async></script>\n  </layout>\n);\n\n\nFor more information, read Dynamic Preview URLs.\n\nSetting the Preview URL\n\nNext, set the model Preview URL in Builder:\n\nGo to Models.\nSelect the model you want to integrate previewing with. Change the preview URL to https://www.yoursite.com/builder-preview (make sure to replace that with your actual website).\nClick the Save button.\n\nFor more context, read Editing and Previewing Your Site.\n\nTip: If you decided to have the model name determined dynamically, then change the Preview URL to have a model query param and have that value be the name of the model; for example, https://www.yoursite.com/builder-preview?model=page\n\nToggle off reloading the Preview URL\nGo to Account Settings.\nGo to Advanced Settings > Advanced.\nToggle off the setting called Reload preview on URL path change. This setting is on by default, so you need to click it to make it turn grey instead of blue, which coincides with the toggle to the left.\n\nYou should now be able to create content in the editor and preview it on your site. Repeat this process as needed with other models you'd like to preview on your site."
  },
  {
    "title": "A/B Testing - Builder.io",
    "url": "https://www.builder.io/c/docs/abtesting",
    "html": "A/B Testing\n\ngrowth plans\n\nA/B testing is a data-driven approach to testing and measuring different content and experiences to help you make impactful improvements to your site or app. \n\nPrerequisites\n\nTo use A/B testing on a content entry, that content must be created and managed in Builder. Content created elsewhere cannot use Builder's A/B Testing feature.\n\nBuilder's A/B testing advantages\n\nThe advantages of doing A/B testing with Builder include:\n\nSeamless conversion tracking: Monitor conversions right within the intuitive UI alongside your Builder content.\nLimitless comparisons: Execute numerous comparisons, tailoring your tests to your specific needs.\nSEO friendly: Use search engine optimization efforts while conducting A/B tests.\nUninterrupted user experience: No DOM/UI blocking and unwanted content flashes.\nStraightforward operation: No coding required—you don't have to be a developer to engage in effective A/B testing.\nEfficient Compression: Leverage gzip compression for optimized performance, minimizing added weight even with multiple test groups.\n\nDespite multiple content pieces being initially sent with the HTML, gzip deflation efficiently eliminates redundancy, resulting in a mere 5-10% size increase. This ensures your page remains fast. Builder extends A/B testing support to all frameworks, including static ones such as Gatsby and Nuxt.\n\nCreating variations\n\nBegin A/B testing by crafting distinct variations of a page or piece of content so Builder can collect metrics for each version.\n\nTip: Depending on whether a content entry has already been published, the Builder UI workflow might prompt you to make a duplicate content entry.\n\nIf the content entry that you'd like to test isn't published yet, you don't need to create a duplicate entry and you might notice just one entry in the content list when you're done.\n\nBoth workflows are correct and serve to maintain insight integrity.\n\nTo create an A/B test variation:\n\nIn the content entry, click the A/B Tests tab.\nClick the Add A/B Test Variation button.\nRename your new variation—initially labeled Variation 0 by default—and fine-tune the test ratio. For more variants to perform multi-variate testing, repeat this process.\nGo back to the Edit tab to toggle between variations and make adjustments.\nWhen you're ready, click the Publish button to initiate the test. If you'd rather schedule it for a future launch, read about scheduling in the Targeting and Scheduling Content.\n\nThe video below goes through this process in a previously unpublished entry. If your content entry is already published, the Builder UI will guide you.\n\nImportant points to remember\n\nWhen A/B Testing, keep these things in mind:\n\nThe default variation, known as the control, serves as the baseline exposed to search engines, users with JavaScript disabled, and those with tracking deactivated.\nOnce a test is live and receiving traffic, refrain from introducing new variants or removing existing ones. This maintains the integrity of your test results and safeguards them from the influence of previous tests or outdated content versions.\nAllocation follows a random pattern based on the test ratio, tracked with cookies. However, users with tracking disabled remain unassigned to a test group.\n\nFor A/B testing with Symbols, visit Symbols.\n\nInterpreting A/B test metrics\n\nLeverage the data from your A/B test to determine the winning variation. Scrutinize conversion statistics across variations, focusing on metrics like conversion rate, total conversions, or conversion value, tailored to your priorities. Allow the test sufficient time to accumulate data and visitors for accurate conclusions.\n\nTip: For conversion metrics on custom tech stacks you'll need to integrate conversion tracking. Shopify-hosted stores benefit from automatic integration.\n\nTo evaluate the performance of your A/B test:\n\nIn the Visual Editor, go to the A/B Tests tab.\nClick View Results beneath the sliders. This directs you to the Insights tab, where you can access comprehensive test results. Initial stages may show limited visitor data, but with time, you'll gain substantial insights into your test's progress.\n\nThe following is a screenshot of the Insights tab that shows data such as Impressions, Clicks, and Clickthrough rate:\n\nBuilder calculates conversions based on impressions; in this way, an impression of Builder content is all that's necessary to lead to a trackable conversion.\n\nConcluding an A/B Test\n\nOnce you've determined the winning variation, it's time to implement the improvements. You have a couple of options that you manage from the A/B Tests tab.\n\nKeeping all variations but delivering the winner\n\nTip: Use this option if you think you might want the test variations later.\n\nThis option retains all variations but delivers only the winning variation to users.\n\nAdjust the ratios within the A/B Tests tab to exclusively display the winning variation to new visitors. This ensures that your audience immediately experiences the best UI, and you can keep the other variations for future use.\n\nEnding an A/B Test while removing variations\n\nThis option conclusively ends the test.\n\nIf you don't duplicate this entry before picking a winner, the other variations are not portable. However, if you duplicate this entry first and then come back to choose the winner, the variations are ported to the duplicate.\n\nThe following table outlines what happens to variations depending on whether you choose the winner before or after duplicating:\n\nWhen you choose winner\tWhat happens to variations\n\nChoose Winner before duplicating\n\n\t\n\nTest ends. Test variations are not ported to duplicate entry. You'll have to create new variations if you need more A/B tests.\n\n\n\n\nChoose Winner after duplicating\n\n\t\n\nDuplicate is created before ending test. This means variations are copied to duplicate entry.\n\nTo end an A/B test completely:\n\nSelect the Choose Winning Variation option within the A/B Tests tab.\nIn the dialogue that opens, read the details so your choice is informed.\nClick the End Test button.\n\nAfter ending the test, Builder designates the winner with a checkmark icon. The following video demonstrates choosing the winner.\n\nStatistical significance\n\nAs your test accumulates data, Builder computes statistical significance. A checkmark next to a variant's name in the table indicates its impact on conversion, with a gray checkmark representing a p-value within a 90% confidence interval and a green checkmark exceeding 95%.\n\nNote that to use this feature, you must integrate conversion tracking.\n\nExamples of A/B tests\n\nThe following are some examples of features you can A/B test:\n\nGeneral Area\tSpecific area\tConcept\tExample\n\nContent\n\n\t\n\nHeaders\n\n\t\n\nVary headers to find out what visitors respond to most\n\n\t\n\n\"New Swimwear is Here!\" or \"Bathing Suits Galore\"\n\n\n\n\nContent\n\n\t\n\nCopy and designs\n\n\t\n\nTry different copy styles according to your ideal customer persona\n\n\t\n\n\"We're digging summer!\" or \"Luxuriate in Paradise\"\n\n\n\n\nDesign\n\n\t\n\nColors, design features, fonts\n\n\t\n\nExperiment with button size, shape, style to find out what encourages clicks\n\n\t\n\nRed button with all caps copy or a branded color using a minimal lowercase font\n\n\n\n\nDesign\n\n\t\n\nCTA position\n\n\t\n\nDifferent button locations in a content entry\n\n\t\n\nBottom right or bottom left placement.\n\n\n\n\nDesign\n\n\t\n\nHero image\n\n\t\n\nDifferent hero images to find out which gets more clicks\n\n\t\n\nA hero with a person leaping into a blue sea or a hero of just the sea, without the person\n\n\n\n\nFunctionality\n\n\t\n\nForm\n\n\t\n\nExperiment different form formats\n\n\t\n\nA form with multiple choice questions or free-form text boxes for written answers\n\n\n\n\nFunctionality\n\n\t\n\nResponsiveness\n\n\t\n\nHiding or showing a feature based on device-type to find out if users can use the feature as effectively\n\n\t\n\nPlacing search in the hamburger menu or placing it at the top of the page on mobile devices\n\nWhat's next\n\nIn addition to running A/B tests in Builder, you can also display content based on a schedule, and set who can see which content. For more information, visit Targeting and Scheduling."
  },
  {
    "title": "Using model validation hooks - Builder.io",
    "url": "https://www.builder.io/c/docs/validation-hooks",
    "html": "Model Validation Hooks\n\nenterprise plans\n\nModel validation hooks are a powerful feature of Builder that help you define custom validation logic for your model's content using JavaScript.\n\nSetup\n\nTo set up a model validation hook:\n\nGo to Models.\nOpen the model you want to validate and click the Show More Options button.\nClick the Edit Validation Hook button.\nIn the code editor that opens, add your validation logic.\n\nThe following video shows this process:\n\nAbout validation code\n\nWhen you click Edit Validation Hook, a code editor opens where you can add your validation hook. The placeholder code serves as an example:\n\n async function run() {\n   if (contentModel.data.get('myProperty') === 'some invalid value') {\n     return {\n       level: 'error',\n       message: 'myProperty is invalid!'\n     }\n   }\n }\n return run();\n\nThe code you write here needs access to these constants:\n\nmodel: The model object being validated. This contains information about the structure and settings of the model.\ncontentModel: The entire content object currently loaded in the Visual Editor. This includes all the data and variations associated with the content.\neditingVariation: The current content variation being edited. This gives access to the specific variation of the content being validated.\n\nThese constants help you access and manipulate the data within the content being validated. For example, you can retrieve values of specific properties, check conditions, and perform custom checks based on the content's attributes.\n\nThe validation process and structure\n\nValidation works by returning validation error objects from this code or returning nothing (undefined) to indicate no errors.\n\nWhen validation errors occur, you need to return a JavaScript object representing each error. This object must have specific properties that provide information about the nature and severity of the error.\n\nThe validation error object are regular JavaScript objects and should have the following shape:\n\nlevel: (required) Indicates the severity of the problem. Possible values are the strings warning or error, depending on the seriousness of the issue found during validation.\nmessage: (required) Main error text, which describes the problem that occurred during validation.\nsecondaryMessage: (optional) An additional text that can provide more context or details about the error.\nelement: (optional) If the validation error is specific to a particular element in the content, you can specify that element here. This is useful when you want the Visual Editor to highlight the element in question for the user's convenience.\nmoreInfoUrl: (optional) A URL for external help on the error.\naffectedElements: (optional) In cases where the error affects multiple elements in the content, you can specify all the affected elements as an array.\n\nYou can return a single object to indicate a single error, or you can return an array of these errors to indicate more than one."
  },
  {
    "title": "Content API Versions - Builder.io",
    "url": "https://www.builder.io/c/docs/content-api-versions",
    "html": "Content API Versions\n\nWe recommend the latest API version, which is currently v3.\n\nUsing the latest version of the Content API\n\nTo leverage the latest Content API features, we recommend using the most recent version. Currently, the latest version is v3, which offers important advantages over previous versions.\n\nContent API v3 benefits include:\n\nBetter, more scalable infrastructure: The content API is built on global scale infrastructure to ensure fast response times and high availability.\nAbility to ship more features, faster: With v3, Builder can ship the latest features to customers without breaking fundamental flows. These features are only available in v3 and not in prior versions of the Content API.\nUpdating your SDK\n\nTo use the v3 Content APIs, upgrade your SDKs to the latest version with npm with the following:\n\nnpm update YOUR_SDK@latest\n\nFor example, if using the React SDK, the command would be:\n\nnpm update @builder.io/sdk-react@latest\nSDK support\n\nSDK versions higher than those in the following table use the v3 Content APIs by default. Any prior SDK version uses v2 or below of the Content API.\n\nCheck the following table for information on which SDK versions support which Content API versions.\n\nSDK\tSDK version and Content API support\n\nReact SDK (@builder.io/react)\n\n\t\n2.0.16 and below: Only supports v1.\n2.0.17: Adds support for apiVersion property. Default API is v1.\n2.1.00: Default API version is v3.\n\n\n\nReact-Native, Vue, Svelte, SolidJS, Qwik and Beta React SDKs\n\n\t\n0.1.11 and below: Only supports v2.\n0.1.12: Adds support for apiVersion property. Default API is v1.\n0.2.0: default API version is v3.\nREST and GraphQL support\n\nWhen making requests to Builder's Content API, be sure to use v3 in the path, as in /api/v3/content instead of v2:\n\n- fetch('https://cdn.builder.io/api/v2/content/...')\n+ fetch('https://cdn.builder.io/api/v3/content/...')\n\nDo the same for the GraphQL API and HTML API; that is, replace v1 with v3:\n\n- fetch('https://cdn.builder.io/api/v1/html/...')\n+ fetch('https://cdn.builder.io/api/v3/html/...')\n- fetch('https://cdn.builder.io/api/v1/graphql/...')\n+ fetch('https://cdn.builder.io/api/v3/graphql/...')\nSwitching to a prior version\n\nIf you encounter limitations with v3 when querying content, you have the option to fall back to v1—or v2, depending on your SDK—for individual queries.\n\nReact SDK: toggling the API version\n\nThe React SDK supports v3 or v1 with the apiVersion property.\n\nTo use v1, update builder.apiVersion, which is typically in the same place where you call buidler.init() to initialize the React SDK:\n\nimport { builder } from \"@builder.io/react\";\n\nbulder.init('YOUR_BULDER_PUBLIC_API_KEY');\nbuilder.apiVersion = \"v1\"; //this can be v1 or v3\nOther SDKs: toggling API versions\n\nThough we highly recommend using the latest Content API, you can toggle versions.\n\nUsing the apiVersion property, you can toggle the API version between v3 and v2, if needed, for the following SDKs:\n\nReact-Native\nQwik\nSolidJS\nSvelte\nVue\n\nFor example, to use v2, pass the apiVersion property in two places:\n\nThe RenderContent component that renders the Builder content\nThe getContent() function that fetches the content\n\nThe following snippets provide an example:\n\n<RenderContent apiVersion=\"v2\" />\n// The name of this package import will depend on your SDK.\nimport { getContent } from \"@builder.io/sdk-qwik\";\n\ngetContent({ apiVersion: \"v2\" })\n\n\n\nVersions 1 and 2 do not have the latest features and improvements available in v3, as v3 is the default and recommended version for content queries."
  },
  {
    "title": "Creating a Private Model - Builder.io",
    "url": "https://www.builder.io/c/docs/private-models",
    "html": "Creating a Private Model\n\nWhen you need a model that is only privately accessible, you can adjust the configuration of your model, use a Private API Key, as well as the Content API to ensure privacy.\n\nMaking a model private\n\nBy default, Builder Page, Section, and Data models are publicly readable.\n\nTip: When setting a model to be private, consider whether you want all entries of that model to be private. If some of them need to be publicly readable, create a model specifically for private content entries.\n\nTo make a model private:\n\nGo to Models.\nOpen your page model.\nGo to Advanced.\nSwitch the Public Readable toggle to off.\nClick Save.\nCreate content entries from this model for any that you'd like to be private.\n\nThe following video shows how to toggle off the Public Readable setting for a Page model, but you can change this setting on any kind of model.\n\nCreating a Private API Key\n\nTo leverage a private model, you need to create a Private API Key in your Organization Settings. Follow the instructions in the Managing Private Keys section of the API Keys documentation.\n\nWhen you have your Private API Key, continue with the instructions below.\n\nAdding the code\n\nUse the Content API with your Private API key with the following code, where you replace these values with your own:\n\nmodelName\nyourPublicAPIKey\nyourPrivateAPIKey\nlet apiUrl = 'https://cdn.builder.io/api/v2/content'\nlet modelName = 'private-page'\nlet content = await request(`${apiUrl}/${modelName}?apiKey=${yourPublicAPIKey}&limit=1&userAttributes.urlPath=/some-page`, {\n  headers: { Authorization: `Bearer ${yourPrivateAPIKey}` },\n})\n\n\nNext, pass the JSON to render as needed; for example as in this React snippet for a model named private-page:\n\nlet page = content.results[0];\n\nif (page) {\n  return <BuilderComponent model=\"private-page\" content={page} />\n}\n\nWhat's next\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time."
  },
  {
    "title": "Page Models - Builder.io",
    "url": "https://www.builder.io/c/docs/models-pages",
    "html": "Page Models\n\nPage Models are the paradigm, or pattern, that defines what a Page is. When you make a Page content entry in the Content section of Builder, Builder uses the Page model to create that Page content entry.\n\nIntegrate Builder Pages with your codebase\n\nWhen you integrate, non-coding team members can create as many Pages as they need for iterating, testing, targeting, and scheduling—leaving developers free to focus on the code.\n\nIntegrate Page Building\n\nAbout Page models\n\nBy default, a Builder Space comes with one Page model, which most people use for the content between the header and footer. Uses for Page models include:\n\nHomepage\nContent pages such as About, Partners, Documentation, and Marketing\nLanding pages\n\nWith just one Page model, you can create countless pages with unique URLs and edit those pages in the drag-and-drop interface of the Visual Editor.\n\nThe following image delineates a typical Page within the Visual Editor. A Page is everything between your header and footer.\n\nFinding the Page model\n\nTo view the details of the Page model(s) in a Space, do the following:\n\nGo the the Models section of the Builder UI.\nSelect the Page model.\n\nFrom within the Page model, you can edit and add fields. For details on fields in models, refer to Custom Fields.\n\nTip: Whenever a user in your space creates a Page, Builder uses the Page model that they select. The Create Page dialogue for a Page content entry requires a URL. For more information, refer to How to Create a Page, which features a short video showing the auto-population of the URL field.\n\nIf you don't want a URL associated with the content, consider using a Section instead, for which a URL is optional.\n\nCreating a Page model\n\nThough the built-in Page model works for most use cases, you can create multiple Page models. For example, within Builder, we have the default Page model, a Docs Page model, and a model for Marketing pages because each use has specific requirements.\n\nIf you do decide to create a new Page model, make sure to give it a helpful name and Description so that users know how to use the model.\n\nGo the Models section of the Builder UI.\nClick the + Create Model button.\nChoose Page.\nIn the Model Display name field, enter the name you'd like this model to have when listed in the Models section of Builder. You can edit this later if you change your mind.\nName the model and fill out the Model Description field.\nClick Create.\nAdd any needed custom fields.\nThe model saves automatically.\n\nTo use the new Page model, integrate with your codebase and then your teammates can create content entries in the Visual Editor.\n\nThe following video shows how to create an example Docs Page model with a Description. The description of \"Standard Documentation Page\" displays under the new model in the Content section of Builder so users understand when to use the Docs Page model.\n\nLike any model, a Page model can have fields. The built-in Builder Page model comes with two fields, Title and Description. However, if you create a new Page, there are no fields by default, but you can add as many custom fields as you like.\n\nFor more information on adding fields, refer to Using Custom Fields in Builder.\n\nWhat's next\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time."
  },
  {
    "title": "Data Models - Builder.io",
    "url": "https://www.builder.io/c/docs/models-data",
    "html": "Data Models\n\nData models are the paradigm, or pattern, that defines the shape of data. For example, an author data model might include the author's name, handle, and photo.\n\nIntegrate Builder Sections with your codebase\n\nWhen you integrate your data with Builder, non-coding teammates can use that data wherever they need it—leaving developers free to focus on the code.\n\nIntegrate CMS Data\n\nAbout Data models\n\nData models are pure data, which means there is no drag-and-drop aspect to using Data models in the Builder Visual Editor. However, as with all Builder models, you can use targeting, scheduling, queries and custom roles.\n\nExamples of use cases for Data models include:\n\nNavigation links\nProduct data\nBlog post author—the current document uses a blog post author as an example throughout.\nSite theme colors\nServer-side redirects\n\nThe following image shows an example of data as a navigation link. There is no drag-and-drop feature associated with a Data model. Rather, you pull the data in and use it in your project and you control the rendering entirely.\n\nFinding your Data models\n\nTo find and view your Data models, do the following:\n\nGo to the Models section of the Builder UI.\nScroll to the CMS Data Models section.\nSelect a Data model.\n\nThe following video demonstrates the above steps to locate and open a real, internal Builder URL Redirect Data model.\n\nTip: The only model that Builder has by default is the Page Model, so there are Data models in the CMS Data section only if your team has created them.\n\nCreating Data models\n\nUse Data models are perfect for providing your teammates with raw data that they can use anywhere in the project.\n\nTo create and use a Data model, do the following:\n\nGo the the Models section of the Builder UI.\nClick the + Create Model button.\nChoose Data.\nIn the Model Display name field, enter the name you'd like this model to have when listed in the Models section of Builder. You can edit this later if you change your mind.\nName the model and fill out the Model Description field.\nClick Create.\nAdd any needed custom fields.\nClick Save.\n\nTo use the new Data model, integrate with your codebase and then your teammates can use the data in the Visual Editor.\n\nThe following video shows how to create an example Blog Author Data model then shows how to use the new model in a content entry:\n\nUsing an example Data model\nQuerying data\nJS\nREST API\n\nTo get your custom fields, use builder.get() with two arguments:\n\nYour model name\nAn object, which contains a nested object, query.\n\nThe following example is an example snippet of using query with builder.get().\n\nTo use query:\n\nPass in an object, {}, as the second argument to builder.get() that contains the nested query object.\nFor the key-value pairs for query{}, structure the query as data.customField.$operator, where data is the word data, and customField is the name of the field you want to query, followed by the operator.\nFind the name of your custom field by expanding the field in the Data model.\n\nThe following video shows how to find the Data model name and the custom field name:\n\nFinding the model name\n\nTo find the model name:\n\nOpen the model in the Models section of Builder.\nClick the Show More button and copy the Unique identifier.\n\nTo find the name of a custom field, expand the custom field. Name is the first entry.\n\nThe following video shows finding the model name and a custom field name.\n\nFor more detail on query, refer to the query section of the Builder GitHub readme Interface: GetContentOptions and MongoDB's Query and Projection Operators.\n\nTo get more familiar with query parameters, refer to Builder Content API and the interactive Builder REST API Explorer.\n\nNext steps\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time.\nQuerying Cheatsheet: Use queries to query anything on your content objects."
  },
  {
    "title": "Making a Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/make-a-plugin?_host=www.builder.io",
    "html": "Making a Plugin\n\nYou can extend and customize Builder by making your own plugin. With custom plugins you can register custom field types for your Builder model custom fields and inputs for your custom components, custom targeting or symbols.\n\nThis document covers making a minimal plugin to add a custom type for use in a Data model.\n\nTip: All plans can create and submit Builder Plugins. When you're ready to contribute your plugin, head over to GitHub and submit a PR. Make sure to add your plugin to the plugins directory.\n\nPrerequisites\n\nTo get the most out of this document, make sure you are familiar with the following:\n\nTypes of Plugins: get an intro to the different kinds of plugins you can make\nCustom fields: customize field types in models\nData models: define the shape of your data\nExtending the UI with custom types\n\nThis tutorial guides you through creating a plugin with a custom type and custom type editor. By creating custom types in a plugin, you provide rich data types that you can use across the Visual Editor. For example, you can:\n\nCreate custom component inputs that accept structured data fields\nTarget content based on products in a customer's cart\nModel fields that store multimedia content\nEnable Symbol inputs to accept externally hosted documents\n\nEach custom type has a custom type editor, which provides a user interface for selecting values for your custom type fields. For example, editors can fetch external resources and present the user with a browsable list of items or provide menus and fields for data entry.\n\nWith custom types and custom type editors, your users can create and update nearly any kind of data structure beyond the basic types provided by Builder, all from within the Visual Editor.\n\nAfter installing the plugin that registers your custom type editor, the corresponding custom type is available across the Visual Editor, specifically when using the following features:\n\nCustom component inputs\nTargeting content\nModel fields\nSymbol inputs\nStep 1: Create project and install dependencies\n\nCreate a directory for your plugin and open the new director with the following command:\n\nmkdir text-plugin && cd text-plugin\n\nInitialize the project to use npm:\n\nnpm init\n\nPress Enter through the prompts and respond yes to the proposed package.json.\n\nUse npm install to install the dependencies for this project. You can use --save-dev because Builder provides these dependencies for you later. The dependencies are:\n\n@builder.io/app-context: exposes certain APIs to interact with APIs to interact with Builder\n@builder.io/react: enables you to use React to create your plugin\nwebpack: module bundler for JavaScript\nwebpack-dev-server: development server with live reloading\n@babel/preset-react: supports JSX\nbabel-loader: transpiles modern and superset JavaScript, such as JSX using Babel with webpack\n\nPaste the following command, which includes all these dependencies, at the command line:\n\nnpm install --save-dev @builder.io/app-context @builder.io/react webpack webpack-dev-server webpack-cli @babel/preset-react babel-loader\n\nInstall react-quill for the Rich Text editor that this plugin uses:\n\nnpm install react-quill\nStep 2: Set up the files\n\nThis section guides you through creating the project infrastructure by creating the key files and pasting in the contents for each.\n\nReplace the contents of package.json with the following:\n\n{\n  \"name\": \"rich-text-plugin\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"entry\": \"plugin\",\n  \"output\": \"plugin.system.js\",\n  \"main\": \"dist/plugin.system.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"webpack --mode production\",\n    \"start\": \"webpack-dev-server --mode development\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@babel/preset-react\": \"^7.18.6\",\n    \"@builder.io/app-context\": \"^1.0.0\",\n    \"@builder.io/react\": \"^2.0.13\",\n    \"@emotion/core\": \"^11.0.0\",\n    \"babel-loader\": \"^8.2.5\",\n    \"webpack\": \"^5.74.0\",\n    \"webpack-cli\": \"^4.10.0\",\n    \"webpack-dev-server\": \"^4.10.0\"\n  },\n  \"dependencies\": {\n    \"react-quill\": \"^2.0.0\"\n  }\n}\n\n\n\nAt the root of your project, create a file called .babelrc and paste in the following:\n\n// contents of .babelrc\n// use preset-react to support JSX \n{\n    \"presets\": [\"@babel/preset-react\"],\n    \"env\": {\n      \"development\": {\n        \"presets\": [[\"@babel/preset-react\", { \"development\": true }]]\n      }\n    }\n  }\n\n// contents of webpack.config.js\nconst path = require('path');\nconst pkg = require('./package.json');\n\nmodule.exports = {\n  entry: `./src/${pkg.entry}.jsx`,\n  externals: {\n    '@builder.io/react': '@builder.io/react',\n    '@builder.io/app-context': '@builder.io/app-context',\n    \"@emotion/core\": \"@emotion/core\",\n    \"react\": \"react\",\n    \"react-dom\": \"react-dom\"\n  },\n  output: {\n    filename: pkg.output,\n    path: path.resolve(__dirname, 'dist'),\n    libraryTarget: 'system',\n  },\n  resolve: {\n    extensions: ['.js', '.jsx'],\n  },\n  module: {\n    rules: [\n        {\n            test: /\\.(jsx)$/,\n            exclude: /node_modules/,\n            use: [\n              {\n                loader: 'babel-loader',\n              },\n            ],\n          },\n        ],\n  },\n  devServer: {\n    port: 1268,\n    static: {\n       directory: path.join(__dirname, './dist'),\n     },\n    headers: {\n      'Access-Control-Allow-Private-Network': 'true',\n      'Access-Control-Allow-Origin': '*',\n    },\n  },\n};\n\n\n\nTip: You can also pass data into your plugin when registering it as an input type. This is useful if you want to control things like API keys or settings in your own codebase, but want to be able to pass into the plugin whenever it is used. To do this, use the options property when registering an input for a component. For more detail, see this example on GitHub from an async dropdown plugin.\n\nStep 3: Create the plugin\n// contents of plugin.jsx\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Builder } from '@builder.io/react';\nimport ReactQuill from 'react-quill';\n\nfunction RichTextEditor(props) {\n  return (\n    <ReactQuill\n      value={props.value}\n      onChange={props.onChange}\n    />\n  );\n}\n\nBuilder.registerEditor({\n    name: 'MyText',\n    component: RichTextEditor\n});\n\n\nBuilder.registerEditor() accepts one parameter: an options object with three properties:\n\nname: a string, typically camel-cased, that represents the custom type's name\ncomponent: the editor component\noptions (optional): an object\n\nTip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it. To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.\n\nStep 4: Add your plugin to Builder\nStep 5: Use your plugin in Builder\nNext steps\n\nThis tutorial showed you how to create a minimal plugin and use it locally. When you've created your plugin, you can do one of two things:\n\nGet your unique plugin creations added to Builder, by check us out on GitHub and submitting a PR with your plugin on the Builder.io repo.\nIf you're on an Enterprise plan, you can instead host your plugin yourself as a private plugin. For more information, see Creating a Private Plugin.\n\n\n"
  },
  {
    "title": "Making a Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/make-a-plugin",
    "html": "Making a Plugin\n\nYou can extend and customize Builder by making your own plugin. With custom plugins you can register custom field types for your Builder model custom fields and inputs for your custom components, custom targeting or symbols.\n\nThis document covers making a minimal plugin to add a custom type for use in a Data model.\n\nTip: All plans can create and submit Builder Plugins. When you're ready to contribute your plugin, head over to GitHub and submit a PR. Make sure to add your plugin to the plugins directory.\n\nPrerequisites\n\nTo get the most out of this document, make sure you are familiar with the following:\n\nTypes of Plugins: get an intro to the different kinds of plugins you can make\nCustom fields: customize field types in models\nData models: define the shape of your data\nExtending the UI with custom types\n\nThis tutorial guides you through creating a plugin with a custom type and custom type editor. By creating custom types in a plugin, you provide rich data types that you can use across the Visual Editor. For example, you can:\n\nCreate custom component inputs that accept structured data fields\nTarget content based on products in a customer's cart\nModel fields that store multimedia content\nEnable Symbol inputs to accept externally hosted documents\n\nEach custom type has a custom type editor, which provides a user interface for selecting values for your custom type fields. For example, editors can fetch external resources and present the user with a browsable list of items or provide menus and fields for data entry.\n\nWith custom types and custom type editors, your users can create and update nearly any kind of data structure beyond the basic types provided by Builder, all from within the Visual Editor.\n\nAfter installing the plugin that registers your custom type editor, the corresponding custom type is available across the Visual Editor, specifically when using the following features:\n\nCustom component inputs\nTargeting content\nModel fields\nSymbol inputs\nStep 1: Create project and install dependencies\n\nCreate a directory for your plugin and open the new director with the following command:\n\nmkdir text-plugin && cd text-plugin\n\nInitialize the project to use npm:\n\nnpm init\n\nPress Enter through the prompts and respond yes to the proposed package.json.\n\nUse npm install to install the dependencies for this project. You can use --save-dev because Builder provides these dependencies for you later. The dependencies are:\n\n@builder.io/app-context: exposes certain APIs to interact with APIs to interact with Builder\n@builder.io/react: enables you to use React to create your plugin\nwebpack: module bundler for JavaScript\nwebpack-dev-server: development server with live reloading\n@babel/preset-react: supports JSX\nbabel-loader: transpiles modern and superset JavaScript, such as JSX using Babel with webpack\n\nPaste the following command, which includes all these dependencies, at the command line:\n\nnpm install --save-dev @builder.io/app-context @builder.io/react webpack webpack-dev-server webpack-cli @babel/preset-react babel-loader\n\nInstall react-quill for the Rich Text editor that this plugin uses:\n\nnpm install react-quill\nStep 2: Set up the files\n\nThis section guides you through creating the project infrastructure by creating the key files and pasting in the contents for each.\n\nReplace the contents of package.json with the following:\n\n{\n  \"name\": \"rich-text-plugin\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"entry\": \"plugin\",\n  \"output\": \"plugin.system.js\",\n  \"main\": \"dist/plugin.system.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"build\": \"webpack --mode production\",\n    \"start\": \"webpack-dev-server --mode development\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"@babel/preset-react\": \"^7.18.6\",\n    \"@builder.io/app-context\": \"^1.0.0\",\n    \"@builder.io/react\": \"^2.0.13\",\n    \"@emotion/core\": \"^11.0.0\",\n    \"babel-loader\": \"^8.2.5\",\n    \"webpack\": \"^5.74.0\",\n    \"webpack-cli\": \"^4.10.0\",\n    \"webpack-dev-server\": \"^4.10.0\"\n  },\n  \"dependencies\": {\n    \"react-quill\": \"^2.0.0\"\n  }\n}\n\n\n\nAt the root of your project, create a file called .babelrc and paste in the following:\n\n// contents of .babelrc\n// use preset-react to support JSX \n{\n    \"presets\": [\"@babel/preset-react\"],\n    \"env\": {\n      \"development\": {\n        \"presets\": [[\"@babel/preset-react\", { \"development\": true }]]\n      }\n    }\n  }\n\n// contents of webpack.config.js\nconst path = require('path');\nconst pkg = require('./package.json');\n\nmodule.exports = {\n  entry: `./src/${pkg.entry}.jsx`,\n  externals: {\n    '@builder.io/react': '@builder.io/react',\n    '@builder.io/app-context': '@builder.io/app-context',\n    \"@emotion/core\": \"@emotion/core\",\n    \"react\": \"react\",\n    \"react-dom\": \"react-dom\"\n  },\n  output: {\n    filename: pkg.output,\n    path: path.resolve(__dirname, 'dist'),\n    libraryTarget: 'system',\n  },\n  resolve: {\n    extensions: ['.js', '.jsx'],\n  },\n  module: {\n    rules: [\n        {\n            test: /\\.(jsx)$/,\n            exclude: /node_modules/,\n            use: [\n              {\n                loader: 'babel-loader',\n              },\n            ],\n          },\n        ],\n  },\n  devServer: {\n    port: 1268,\n    static: {\n       directory: path.join(__dirname, './dist'),\n     },\n    headers: {\n      'Access-Control-Allow-Private-Network': 'true',\n      'Access-Control-Allow-Origin': '*',\n    },\n  },\n};\n\n\n\nTip: You can also pass data into your plugin when registering it as an input type. This is useful if you want to control things like API keys or settings in your own codebase, but want to be able to pass into the plugin whenever it is used. To do this, use the options property when registering an input for a component. For more detail, see this example on GitHub from an async dropdown plugin.\n\nStep 3: Create the plugin\n// contents of plugin.jsx\n/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport { Builder } from '@builder.io/react';\nimport ReactQuill from 'react-quill';\n\nfunction RichTextEditor(props) {\n  return (\n    <ReactQuill\n      value={props.value}\n      onChange={props.onChange}\n    />\n  );\n}\n\nBuilder.registerEditor({\n    name: 'MyText',\n    component: RichTextEditor\n});\n\n\nBuilder.registerEditor() accepts one parameter: an options object with three properties:\n\nname: a string, typically camel-cased, that represents the custom type's name\ncomponent: the editor component\noptions (optional): an object\n\nTip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it. To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.\n\nStep 4: Add your plugin to Builder\nStep 5: Use your plugin in Builder\nNext steps\n\nThis tutorial showed you how to create a minimal plugin and use it locally. When you've created your plugin, you can do one of two things:\n\nGet your unique plugin creations added to Builder, by check us out on GitHub and submitting a PR with your plugin on the Builder.io repo.\nIf you're on an Enterprise plan, you can instead host your plugin yourself as a private plugin. For more information, see Creating a Private Plugin.\n\n\n"
  },
  {
    "title": "commercetools E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-commercetools",
    "html": "Enabling the Commercetools Plugin\n\nYou can use your commercetools products and categories within Builder with the commercetools e-commerce plugin.\n\nThe plugin provides custom types that you can use to:\n\nProvide products and categories as inputs for your custom code components.\nTarget content based on products or categories instead of URL paths with hard-coded resource handles or IDs.\nPreview products and categories on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with plugins see Overview of Built-in Plugins for Builder.\n\nPrerequisites\n\nTo get the most out of this document, you should already have an API Client within your commercetools account. For more information, see the commercetools documentation, Create an API Client.\n\nEnabling the commercetools plugin in Builder\nGo to the Integrations section of Builder.\nOn the commercetools plugin tile, click the Enable button.\nClick the Settings to configure the plugin with your commercetools account information.\n\nThe following video demonstrates this process:\n\nCompleting the plugin's setup requires the following information from your commercetools API Client configuration:\n\nProject ID\nClient ID\nSecret\nAPI URL\nAuth URL\nScopes (optional)\nLocale (optional)\n\nFor more detail on finding this information within commercetools, see the commercetools documentation, View your API Client Configuration.\n\nCustom types\n\nThe commercetools plugin provides eight custom types:\n\nCommercetools Product: CommercetoolsProduct\nCommercetools Product Preview: CommercetoolsProductPreview\nCommercetools Product Handle: CommercetoolsProductHandle\nCommercetools Products List: CommercetoolsProductsList\nCommercetools Category: CommercetoolsCategory\nCommercetools Category Preview: CommercetoolsCategoryPreview\nCommercetools Category Handle: CommercetoolsCategoryHandle\nCommercetools Categories List: CommercetoolsCategoriesList\n\nFor more information on the shape of each type's values, refer to E-commerce Custom Types.\n\nFind the source code on GitHub\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it.\n\nWhat's next\n\nFor more information on using built-in plugins, see the following documents:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nTargeting with Plugins\nSetting Up E-commerce Resource Previews"
  },
  {
    "title": "Commerce.js E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-commercejs",
    "html": "Commerce.js E-commerce Plugin\n\nYou can use your Commerce.js products and categories within Builder with the Commerce.js e-commerce plugin.\n\nThe plugin provides custom types that can be used to:\n\nProvide products and categories as inputs for your custom code components.\nTarget content based on products or categories instead of URL paths with hard-coded resource handles or IDs.\nPreview products and categories on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with e-commerce plugins and where they fit into your site, you can check out E-commerce Plugins for Builder.\n\nSetup within Commerce.js/Chec\n\nIn order to enable the plugin to communicate with Commerce.js, you can copy a preexisting public key from within your Chec account's dashboard or create a new one. This step will provide you with the information needed to complete the plugin setup below.\n\nFor more information, check out Commerce.js's Getting Started guide.\n\nSetup within Builder\n\nYou can install the plugin from the Integrations page by clicking Enable on the Commerce.js plugin entry.\n\nAfterwards, click Settings to configure the plugin with your Commerce.js account information.\n\nCompleting the plugin's setup requires your Chec account's public key.\n\nFor more information, check out Setting Up E-commerce Plugins.\n\nCustom types\n\nThe Commerce.js plugin provides eight custom types:\n\nCommerce.js Product, referred to as CommercejsProduct in code\nCommerce.js Product Preview (CommercejsProductPreview)\nCommerce.js Product Handle (CommercejsProductHandle)\nCommerce.js Products List (CommercejsProductsList)\nCommerce.js Category (CommercejsCategory)\nCommerce.js Category Preview (CommercejsCategoryPreview)\nCommerce.js Category Handle (CommercejsCategoryHandle)\nCommerce.js Categories List (CommercejsCategoriesList)\n\nPlease refer to E-commerce Custom Types for details on the shape of each type's values.\n\nUsage\n\nFor more information on how to use the Commerce.js plugin, please refer to our e-commerce plugin docs:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nSetting Up E-commerce Targeting\nSetting Up E-commerce Resource Previews\nSource code\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it."
  },
  {
    "title": "Integrating Smartling for localization - Builder.io",
    "url": "https://www.builder.io/c/docs/integrating-smartling",
    "html": "Integrating Smartling with Builder\n\nWhen localizing content, you can set up localization directly within Builder or you can integrate with Smartling. With Smartling you can connect with multiple projects.\n\nThis document covers the following:\n\nGetting the info Builder needs from Smartling\nAdding the Smartling integration in Builder\nTranslating with Smartling in Builder\nPrerequisites\n\nTo get the most our of this tutorial, you should have already have the following:\n\nA Smartling account with a project\nAn app integrated with Builder\nGetting the info Builder needs from Smartling\n\nTo integrate Smartling with Builder you need to get a a few pieces of info from Smartling so the two can connect with one another.\n\nFrom your Smartling dashboard, go to Account Settings > API.\nIn the Account Tokens section, click the New Token button. Account tokens help you connect to multiple projects.\nName your token and click the Create button.\nWhen the success message displays, leave it open or copy the info. The info you need to integrate with Builder are the AccountUID, your User ID, and the Secret Token. The Secret Token, which you need for Builder, isn't viewable after you've closed this notification.\n\nThe following image is a screenshot of the API page with the info you need for Builder.\n\nTip: For more information on Smartling API Tokens, refer to Introduction to Integrating Smartling.\n\nAdding the Smartling integration in Builder\n\nWith the Smartling API page still open, go to Builder in another tab.\n\nIn Builder, go to Integrations.\nClick Advanced Configuration at the bottom.\nIn the dialogue that opens, click Add Plugin and enter @builder.io/plugin-smartling. Click Save.\nWhen the page reloads and prompts you to continue configuring Smartling, click the Configure button.\nIn the dialogue that opens, enter your AccountUID from Smartling, your User ID, and the Token Secret.\nClick the Connect Your Smartling Account button.\n\nThe following video demonstrates this process:\n\nTranslating with Smartling in Builder\n\nWithin the Builder Visual Editor:\n\nPublish your content.\nClick the three dots in the upper right of the Visual Editor and select Add to translation job.\nIn the Smartling Translation Jobs dialogue that opens, click the + Create button.\nEnter a name for the translation job. Click Ok. Builder displays a confirmation message at the bottom of the screen and adds the translation job to the CMS Data models section on the left of the Content page.\nIn Content, Click on the Translation job model on the left.\nOpen the new translation job entry you just created by clicking on it in the content entry list.\nFill out the Description and add any Entries as needed.\nUnder the Job details section, click Choose Project and select the project based on the source.\nUnder Target Locales, select the target locale(s). The locales in this list are the locales set up in Smartling previously.\nClick the Authorize button in the upper right of the UI.\n\nWhen you click Authorize, Builder puts the entries in JSON files and sends them with the instructions and job description to the project with the target locales. When the process is complete, Builder generates a notification stating \"Authorized translation job in Smartling\".\n\nIf you click on the notification, you'll be redirected to the job in Smartling where you can click on the job and see more details.\n\nAfter you get the notification, click the three dots menu and select Apply Translation.\n\n\n\n\nViewing the translation job working\nExcluding a block from translation\n\nTip: If you copy and paste a block on which you've toggled translations off, that setting persists in the duplicate block. If you need that new block to translate, right click on the block and choose to Include in future translations.\n\nWhat's next\n\nFor more information on localization in Builder, check out the documentation on Localization with Builder."
  },
  {
    "title": "SSR and SSG - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-ssr-ssg",
    "html": "SSR and SSG\n\nBuilder supports Server-Side Rendering (SSR) and Static Site Generation (SSG) out-of-the-box for all components.\n\nPrerequisites\n\nTo leverage SSR and SSG with Builder, you must be using a framework that supports these features.\n\nTip: The Angular SDK does not support SSR and SSG with custom components. For more information, read Angular workarounds for SSR and SSG custom components at the end of this document.\n\nFetching data before render\nNext\nQwik\nGatsby\nVue\nRemix\nHydrogen\nSvelte\n\nThe following Next.js example demonstrates using getAsyncProps() to fetch the data before rendering the page. The steps are:\n\nImport getAsyncProps from @builder.io/utils.\nUse the function getStaticProps() to fetch data async with getAsyncProps. When the data arrives, getStaticProps() returns the content.\nimport { Builder, builder } from '@builder.io/react';\n// import getAsyncProps\nimport { getAsyncProps } from '@builder.io/utils';\n\nexport default function MyPage(props) {\n  return <BuilderComponent model=\"page\" content={props.content} />\n}\n\nexport async function getStaticProps(context) {\n  const content = await builder.get('page', { url: context.resolvedUrl }).promise();\n  // wait until the data arrives before rendering\n  await getAsyncProps(content, {\n    async Products(props) {\n      return {\n        data: await fetch(`${apiRoot}/products?cat=${props.category}`).then(res => res.json())\n      }\n    }\n  })\n\n  return { props: { content } }\n}\n\n\n\nTip: If you have React custom components that depend on external data sources and need that data server-side, such as a products API, use Builder's getAsyncProps() utility to fetch any data needed server-side before render.\n\nAngular workarounds for SSR and SSG custom components\n\nAngular's default is client-side rendering, where components and pages are rendered in the browser. This means that Angular's architecture is optimized for dynamic and interactive applications that rely heavily on client-side JavaScript execution.\n\nOn the other hand, SSR and SSG require the generation of fully rendered HTML on the server before it's sent to the client. This approach is critical for SEO, performance, and usability, especially for content-rich pages.\n\nIf you need to use SSR with your Angular custom components and Builder, there are a couple of workarounds worth considering:\n\nUsing a prerendering tool: Consider leveraging a prerendering tool like prerender.io. This can help generate pre-rendered versions of your custom components so search engines and users receive fully rendered content.\nUsing Symbols for your components: To facilitate server-side rendering and static site generation, consider building out your custom components as Symbols. This approach helps with smoother integration with Builder's rendering process.\n\nFor more context on Angular and SSR, visit Angular's document SSR with Angular Universal.\n\nWhat's next\n\nFor more information on server-side data, refer to the getAsyncProps README."
  },
  {
    "title": "HTML - Partytown",
    "url": "https://partytown.builder.io/html?_host=www.builder.io",
    "html": ""
  },
  {
    "title": "BigCommerce E-commerce Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-ecom-bigcommerce",
    "html": "BigCommerce E-commerce Plugin\n\nYou can use your BigCommerce products and categories within Builder with the BigCommerce e-commerce plugin.\n\nThe plugin provides custom types that can be used to:\n\nProvide products and categories as inputs for your custom code components.\nTarget content based on products or categories instead of URL paths with hard-coded resource handles or IDs.\nPreview products and categories on product detail pages and inside of other content while editing.\n\nFor a general overview of what you can do with e-commerce plugins and where they fit into your site, you can check out E-commerce Plugins for Builder.\n\nSetup within BigCommerce\n\nIn order to enable the plugin to communicate with BigCommerce, you can create a store API account. This step will provide you with the API credentials needed to complete the plugin setup below.\n\nFor more information, check out BigCommerce's API authentication documentation.\n\nSetup within Builder\n\nYou can install the plugin from the Integrations page by clicking Enable on the BigCommerce plugin entry.\n\nAfterwards, click Settings to configure the plugin with your BigCommerce account information.\n\nCompleting the plugin's setup requires the following API authentication credentials from your BigCommerce API account:\n\nStore hash\nAccess token\n\nFor more information, check out Setting Up E-commerce Plugins.\n\nCustom types\n\nThe BigCommerce plugin provides six custom types:\n\nBigCommerce Product, referred to as BigCommerceProduct in code\nBigCommerce Product Preview (BigCommerceProductPreview)\nBigCommerce Products List (BigCommerceProductsList)\nBigCommerce Category (BigCommerceCategory)\nBigCommerce Category Preview (BigCommerceCategoryPreview)\nBigCommerce Categories List (BigCommerceCategoriesList)\n\nPlease refer to E-commerce Custom Types for details on the shape of each type's values.\n\nUsage\n\nFor more information on how to use the BigCommerce plugin, please refer to our e-commerce plugin docs:\n\nUsing E-commerce Custom Types with Custom Component Inputs\nSetting Up E-commerce Targeting\nSetting Up E-commerce Resource Previews\nSource code\n\nCheck out the Builder GitHub repo for the plugin's source as well as instructions on how to modify or develop it."
  },
  {
    "title": "Options for registering custom components - Builder.io",
    "url": "https://www.builder.io/c/docs/register-components-options",
    "html": "registerComponent() options\n\nWith the registerComponent() function, you can define and register custom components for the Visual Editor with tailored solutions by defining properties, behavior, and appearance of your components.\n\nPrerequisites\n\nTo get the most out of this document, you should be familiar with Registering Custom Components.\n\nRequired: name property\nname\n\nType: string\n\nAssign a unique name to identify, reference, and register the component.\n\nBuilder.registerComponent('MyButton', {\n  name: 'MyButton',\n  // Other properties...\n});\n\n\n\nTo override a built-in component with your custom component, you can use the same name as the built-in component. For example, to replace the built-in Text component, you can register your component with the name Text:\n\nBuilder.registerComponent('Text', {\n  // Overrides built-in Text component\n  name: 'Text',\n  // Other properties...\n});\n\n\nOptional properties\ncanHaveChildren\n\nType: boolean\n\nSet to true if your component can accept children. Use in combination with withChildren(YourComponent); that is, only use canHaveChildren when a component will have children.\n\nBuilder.registerComponent(HeroWithBuilderChildren, {\n  name: 'Hero',\n  canHaveChildren: true, // Can have child components\n  ...\n});\n\n\nSee also: GitHub example\n\nchildRequirements\n\nType: object\n\nSpecify restrictions on the direct children of a component. Use to define the rules that the children must match in order to be considered valid.\n\nName\tType\tDescription\n\ncomponent?\n\n\t\n\nstring\n\n\t\n\nOptional. Specifies a component name. This property provides a direct way to enforce that the children must be of a specific component type.\n\n\n\n\nmessage\n\n\t\n\nstring\n\n\t\n\nMessage to show when the child requirements are not met. Use to provide information or instructions to the user about the expected child components. For example, \"Children of 'Columns' must be a 'Column'\".\n\n\n\n\nquery?\n\n\t\n\nany\n\n\t\n\nOptional. Use for more advanced requirements by specifying a MongoDB-style query using the sift.js library. Use to define complex conditions that the children objects must match. You can use various operators, such as $in, $eq, $ne, $gt, $lt, to create the desired conditions.\n\nExample of childRequirements with a query:\n\nchildRequirements: {\n  query: {\n    // The child of this element must be \n    // a 'Button' or 'Text' component\n    'component.name': { $in: ['Button', 'Text'] }\n  }\n}\n\ndefaultChildren\n\nType: BuilderElement[]\n\nUse to specify the default child elements for a component. It is an array that contains BuilderElement objects, which represent the child elements within the component.\n\nBuilder.registerComponent(HeroWithBuilderChildren, {\n  name: 'Hero',\n  defaultChildren: [\n    { \n      '@type': '@builder.io/sdk:Element',\n       component: { name: 'Text', options: { text: 'I am child text block!' } }\n    }\n  ]\n});\n\ndefaultStyles\n\nType: object\n\nSpecify default styles for an element or component when it is dropped into the Builder.io editor.\n\nAccepts an object where each key represents a breakpoint or screen size, and the corresponding value is a set of CSS styles to be applied at that breakpoint.\n\nTip: defaultStyles is an alias for defaults.responsiveStyles.large and offers a way for developers to conveniently default styles for all default sizes. For specifying responsive styles, use the defaults property.\n\nBuilder.registerComponent(SaleBanner, {\n  name: 'Sale Banner',\n  defaultStyles: {\n    backgroundColor: 'red',\n    color: 'white',\n    fontSize: '24px'\n  }\n});\n\ndefaults\n\nType: Partial<BuilderElement>\n\nProvide default options for the block when it is created. When a new instance of the block is created, these default options will be merged with any user-defined options, providing initial values for the block's properties.\n\nFor instance, to define responsive styles, use defaults.responsiveStyles:\n\nBuilder.registerComponent(SaleBanner, {\n  name: 'Sale Banner',\n  defaults: {\n    responsiveStyles: {\n      // Index signature with dynamic keys and string values\n      large: {\n        backgroundColor: 'red',\n        color: 'white',\n        fontSize: '24px'\n      },\n      small: {\n        backgroundColor: 'green',\n        color: 'black',\n        fontSize: '16px'\n      },\n    }\n  }\n});\n\ndocsLink\n\nType: string\n\nProvide a link to a documentation page for the component. It is a string that represents the URL of the documentation page. This is helpful for users who want to learn more about the component's features, usage, or customization options.\n\nBuilder.registerComponent(InfoCallOut, {\n  name: 'Info Call Out',\n  docsLink: 'https://www.builder.io/c/docs/developers',\n  // Other properties...\n});\n\nhideFromInsertMenu\n\nType: boolean\n\nHide your component in editor, useful for gradually deprecating and Versioning Custom Components.\n\nBuilder.registerComponent(Heading, { \n  name: 'Heading', \n  hideFromInsertMenu: true, // <-- don't show in Insert tab\n  ...\n})\n\nimage\n\nType: string\n\nLink to an image to be used as an icon for this component in Builder's Visual Editor.\n\nBuilder.registerComponent(Hero, {\n  name: 'Hero',\n  // replace with your actual asset URL\n  image: 'https://cdn.builder.io/hero-image.jpg',\n  // Other properties...\n});\n\n\ninputs\n\nType: Input[]\n\nRepresents the input schema for the component which is an array of Input objects that define the options in the user interface (UI) to configure the component's properties or behavior.\n\nEach input object specifies properties, for example:\n\nBuilder.registerComponent('MyComponent', {\n  name: 'MyComponent',\n  inputs: [\n    {\n      name: 'text',\n      type: 'text',\n      label: 'Text Input',\n      defaultValue: 'Hello, Builder!',\n      required: true\n    }\n  ],\n  // Other properties...\n});\n\nmodels\n\nType: string[]\n\nUse to restrict the usage of a component to specific models. By providing a list of model names, the component will only be available for those models. If models is not specified, the component is available for all models.\n\nIn the following example, MyComponent is available only for the Page and Hero models.\n\nBuilder.registerComponent('MyComponent', {\n  name: 'MyComponent',\n  models: ['Page', 'Hero'],\n  // Other properties...\n});\n\n\nnoWrap\n\nType: boolean\n\nAssign a unique name to identify, reference, and register the component.\n\nBuilder.registerComponent('FormInputComponent', {\n  name: 'FormInputComponent',\n  noWrap: true\n  // Other properties...\n});\n\n\n\nMake sure to use {...props.attributes} so the component receives the necessary attributes to function properly.\n\nclass FormInputComponent extends React.Component<FormInputProps> {\n  render() {\n    return (\n      <input\n        // other attributes\n        {...this.props.attributes}\n      />\n    );\n  }\n}\n// See GitHub for full example\n\n\n\nThis snippet is an excerpt from the full FormInputComponent on Github.\n\noverride\n\nType: boolean\n\nOverride the behavior of a built-in component. Any special behavior or functionality provided by the default button component, such as virtual options or custom editors, are skipped.\n\nBuilder.registerComponent('Button', {\n  name: 'Button',\n  override: true\n  // Other properties...\n});\n\n\nrequiredPermissions\n\nType: Permission[]\n\nSpecify the availability of the component dependent on permissions.\n\nPossible Permission values are read, publish, editCode, editDesigns, admin, and create.\n\nBuilder.registerComponent('Button', {\n  name: 'Button',\n  requiredPermissions: ['editDesigns'],\n  // Other properties...\n});\n\n\n\nFor more information, see Roles and Permissions by Space.\n\nrequiresParent\n\nType: object\n\nSpecify restrictions on the parent component that must be met in order for the current component to be valid. Use to define requirements for the parent component's properties or type.\n\n// example parent component\nBuilder.registerComponent('ProductBox', {\n  name: 'Product Box',\n  // Other properties...\n});\n// component that requiresParent\nBuilder.registerComponent('AddToCartButton', {\n  name: 'Add to Cart Button',\n  requiresParent: {\n    component: 'Product Box',\n    message: \"'Add to Cart' buttons must be within a 'Product Box'\",\n  },\n  // Other properties...\n});\n\n\nThe available requiresParent options are:\n\nmessage: A string that represents the message to be displayed when the parent requirement is not met.\ncomponent (optional): Specify that the parent component must be a particular component name.\nquery (optional): Specify a MongoDB-style query using the sift.js library. This query defines the conditions that at least one parent in the hierarchy should match. The following example uses the component.name field to check if the parent is either a Product box or a Collection component.\nquery: {\n   // Thils element must be somewhere inside \n   // either a 'Product box' or 'Collection' component\n  'component.name': { $in: ['Product Box', 'Collection'] }\n}\n\nscreenshot\n\nType: string\n\nProvide a screenshot that is displayed when a user hovers over the component in the Visual Editor.\n\nBuilder.registerComponent(MyComponent, {\n  name: 'MyComponent',\n  // replace with your actual asset URL\n  screenshot: 'https://cdn.builder.io/my-component-screenshot.png',\n  // other component properties...\n});\n\n\n\nSee also the Image API and Builder's CDN.\n\ntag\n\nType: string\n\nUse to specify a custom tag name for your custom web components. In this example, you could use <my-custom-component>.\n\nBuilder.registerComponent(MyCustomComponent, {\n  name: 'MyCustomComponent',\n  tag: 'my-custom-component',\n  // other component properties...\n});\n\n\nThe tag property is specifically for custom web components and is not applicable to other types of components.\n\nWhat's next\n\nWorking with custom components opens up endless opportunities. For more on custom components, read:\n\nOverriding Built-in Components\nComponents-only Mode"
  },
  {
    "title": "Intro to Built-in Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-builtin-overview?_host=www.builder.io",
    "html": "Overview of Built-in Plugins\n\nOut of the box, Builder comes with many built-in plugins to help you quickly integrate with a number of third-party apps and services. The built-in integrations include Shopify, SalesForce, Figma, Netlify, Partytown, and many more.\n\nThe video below shows the Integrations page in Builder, which features cards for the built-in integrations.\n\nTypes of built-in plugins\n\nBuilder has several kinds of plugins available, including e-commerce, data related, and content management.\n\nWith e-commerce plugins, users can search and link selected products and categories from their e-commerce backend to structured data entries, sections, and Pages within the Visual Editor. In this way, teams can enrich content for selected products and build landing pages or custom sections with elements linked directly to their e-commerce backend and create features such as:\n\nProduct cards\nProduct galleries\nAdd-to-cart buttons\nList of product recommendations\n\nSee E-commerce custom types for more information.\n\nYou can extend the Visual Editor with all plugins, including the built-in plugins for headless e-commerce platforms such as Shopify, Swell, and BigCommerce.\n\nInstalling the e-commerce plugins gives your team access to platform-specific custom types to:\n\nUse products, collections, and other e-commerce resources as inputs for your custom code components.\nTarget content based on resources like products or collections instead of URL paths with hard-coded resource handles or IDs.\nPreview resources on product detail pages and inside of other content while editing.\n\nThe video below shows an example of using the Shopify integration with Builder to quickly use product data.\n\nIn addition to the plugins in the Integrations section of Builder, you can create your own, add other plugins, or request an integration.\n\nTip: If you'd like to extend Builder beyond what the built-in integrations offer, see Making a Plugin.\n\nNext steps\n\nLearn how to set up plugins in Setting Up Built-in Plugins."
  },
  {
    "title": "Intro to Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-intro?_host=www.builder.io#intro-to-plugins",
    "html": "Intro to Plugins\n\nPlugins for Builder help you integrate a third-party service and customize nearly every part of Builder's Visual Editor and models.\n\nPlugins are a powerful tool for customizing the Visual Editor to make it easier for users to manage and create content.\n\nPlugins help you:\n\nCreate custom types.\nExtend the Visual Editor's user interface.\nTypes of Plugins\n\nThere are three types of plugins in Builder:\n\nBuilt-in plugins: On the Integrations page in Builder, use these ready-made plugins to help you integrate with e-commerce platforms and external data providers with minimal configuration. All plans can use the built-in plugins.\nPublic plugins: You code these and then submit a PR to add to the built-in integrations. Public plugins become part of the Builder ecosystem and when they're merged, Builder.io's engineers help maintain them. All plans can submit public plugins.\nPrivate plugins: You code these but they do not become part of the Builder ecosystem because you maintain them privately. Private plugins are available on all Enterprise plans while plugins with your own branding are available as an add-on for Enterprise customers.\n\nThe diagram below shows these points in a table form:\n\nUse cases for plugins\nBuilt-in Plugins\n\nUse built-in plugins for integrating your Builder account space with with e-commerce platforms and external data providers.\n\nBuilt-in plugins include everything in Integrations, such as:\n\nBigCommerce\nCommercetools\nCommerce.js\nFigma\nPartytown + Shopify\nSmartling\n\nFor a full list, see Integrations and for further documentation, refer to Overview of Built-in Plugins.\n\nPublic Plugins\n\nUse public plugins when you want to customize the Builder Visual Editor UI and you are willing to share your plugin with others. Common use cases for public plugins are:\n\nAdding your own custom types for a model, such as a rich text editor\nCustomizing the Builder Visual Editor\nTargeting content based on what users have in their cart\nCustomizing Symbol inputs\nCreating an action plugin to trigger events in Google Analytics\nAdding an image management plugin\nIntegrating with Shopify\n\nFor more details and instructions on creating plugins, see Extending the Builder UI with Plugins and Making a Plugin.\n\nPrivate Plugins\n\nCreate private plugins when you have needs specific to your company that you need to keep accessible only within your organization. Examples include:\n\nCustomizing the look and feel of Builder with your own branding\nAdding custom flows for creating e-mail campaigns\nNext Steps\n\nUsing and creating plugins opens up countless possibilities. For more info on plugins, check out the following documents:\n\nOverview of Built-in Plugins—an introduction to the plugins already available in Builder.\nMaking a Plugin—a tutorial on how to create your own plugin.\nBuilder.io plugin examples on GitHub"
  },
  {
    "title": "Adding Children to Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-children",
    "html": "Using Child Blocks in Custom Components\n\nWhen you want your custom component to accept other blocks, configure your component with children. The following video demonstrates a custom tabs component that accepts Builder blocks as content. Each tab receives a unique block that the users drags and drops in.\n\nPrerequisites\n\nTo get the most our of this tutorial, you should have the following:\n\nAn app you've integrated with Builder\nFamiliarity with using custom components in Builder\n\nFor more details on child-related options when working with child components, visit the canHaveChildren, childRequirements, and defaultChildren sections of the registerComponent() documentation.\n\nAdding children to custom components\nReact\nQwik\nAngular\n\nTo add children to your React custom component, use the withChildren() method.\n\nImport withChildren along with your other JavaScript imports.\nPass your custom component to withChildren().\nIn Builder.registerComponent(), pass in your component. In this example, registerComponent() takes HeroWithBuilderChildren.\nIn Builder.registerComponent(), specify the defaultChildren as in the following example:\nimport { Builder, withChildren } from '@builder.io/react';  // import withChildren\n\nexport const Hero = props =>\n  <div>{props.children}</div>\n\n// pass your custom component to withChildren()\nconst HeroWithBuilderChildren = withChildren(Hero)\n\n// specify defaultChildren when you register the component\nBuilder.registerComponent(HeroWithBuilderChildren, {\n  name: 'Hero',\n  // Adding defaults is important for easy usability\n  defaultChildren: [\n    { \n      '@type': '@builder.io/sdk:Element',\n      component: { name: 'Text', options: { text: 'I am child text block!' } }\n    }\n  ]\n})\n\n\nTo allow only certain types of children, you can configure childRequirements as in the following example:\n\nBuilder.registerComponent(..., {\n  name: 'Hero',\n  ...\n  childRequirements: {\n    message: 'You can only put Buttons, Text, or Headings in a Hero',\n    query: {\n      'component.name': { $in: ['Button', 'Text', 'Heading'] },\n    },\n  }\n})\n\n\nYou can place the childRequirements object inside registerComponent() after defaultChildren. With this configuration, the custom component only accepts Button, Text, or Heading blocks.\n\nTo test your component, visit any page in your web browser that renders this component.\n\nUsing your component with children in Builder's Visual Editor\n\nNow your component should show up in the Visual Editor with no further configuration in the code.\n\nThe following video shows the Hero block in the Custom Components section of the Insert tab. When the Hero block is on the page in the Visual Editor, you can drag and drop more blocks and drop them into the Hero block, along with the other children defined in code.\n\nTo use a registered component with children, do the following:\n\nIf you're still developing your component, change the Preview URL to localhost with the port you're using for your local app and the page name. In this example, the URL is http://localhost:3000/cc-children.\nDrag and drop your custom component into the work area.\nDrag other blocks onto your custom component.\n\nIn the following video, after the user drops a Columns block into the custom component, they open the Layers tab to show the Columns block nested within the Hero block.\n\nReact\n// 1. Add imports \nimport React, { useState } from 'react';\nimport { BuilderBlocks, Builder } from '@builder.io/react';\n\n\n// 2. Create your component. \n// This is a tabs component with some basic styles. When the user clicks \n// on a tab, that content becomes active.\nfunction Tabs(props) {\n  const [activeTab, setActiveTab] = useState(0);\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          overflow: 'auto',\n        }}\n      >\n        {props.tabs?.map((item, index) => (\n          <span\n            key={index}\n            style={{\n              padding: 20,\n              color: activeTab === index ? 'blue' : '#000',\n            }}\n            onClick={() => {\n              setActiveTab(index);\n            }}\n          >\n            {item.label}\n          </span>\n        ))}\n      </div>\n      {props.tabs?.length && (\n        <BuilderBlocks\n          parentElementId={props.builderBlock.id}\n          dataPath={`component.options.tabs.${activeTab}.content`}\n          blocks={props.tabs[activeTab].content}\n        />\n      )}\n    </>\n  );\n}\n// 3. Configure BuilderBlocks. The above section with BuilderBlocks \n// tells Builder what to expect: \n// the parent id, the path to the child component, \n// and what the blocks should be made of. \n// Here, the blocks are made of the content of the active tab \n\n// 4. Register your component. This component is called Tabs, is of type \n// list and contains two subFields: a label and the content.\n// As a best practice, provide a defaultValue. The default label is \n// \"Tab 1\" and the content is an empty array.\n\nBuilder.registerComponent(Tabs, {\n  name: 'Tabs',\n  inputs: [\n    {\n      name: 'tabs',\n      type: 'list',\n      subFields: [\n        {\n          name: 'label',\n          type: 'text',\n          defaultValue: 'New tab',\n        },\n        {\n          name: 'content',\n          type: 'uiBlocks',\n          defaultValue: [],\n        },\n      ],\n      defaultValue: [\n        {\n          label: 'Tab 1',\n          content: [],\n        },\n      ],\n    },\n  ],\n});\n\nAdding editable regions to custom components\n\nRegister inputs for each of your editable sections of type blocks:\n\n// Register the component and its inputs\nBuilder.registerComponent(HeroWithBuilderChildren, {\n  name: 'Hero',\n  inputs: [\n    // Input for section A editable region\n    {\n      name: 'sectionA',\n      type: 'blocks', // Specify type of blocks\n      hideFromUI: true,\n      helperText: 'This is an editable region.',\n      defaultValue: [\n        {\n          '@type': '@builder.io/sdk:Element',\n            component: {\n              name: 'Text',\n              options: {\n                text: 'Section A Editable in Builder...',\n            },\n          },\n          responsiveStyles: {\n            large: {\n              // Styles for the editable section\n            },\n          },\n        },\n      ],\n    },\n    // Input for section B editable region\n    {\n      name: 'sectionB',\n      type: 'blocks',\n      hideFromUI: true,\n      helperText: 'This is an editable region.',\n      defaultValue: [\n        {\n          '@type': '@builder.io/sdk:Element',\n          component: {\n            name: 'Text',\n            options: {\n              text: 'Section B Editable in Builder...',\n            },\n          },\n          responsiveStyles: {\n            large: {\n              // Styles for the editable section\n            },\n          },\n        },\n      ],\n    },\n  ],\n});\n\n\n\nUse builder-blocks-outlet component to render those blocks within your component template:\n\n@Component({\n  selector: 'my-custom-section',\n  template: `\n    <h2>Section A</h2>\n    <!-- Render section A editable region using \n    builder-blocks-outlet component -->\n    <builder-blocks-outlet\n      [blocks]=\"sectionA\"\n      [builderState]=\"builderState\"\n      [builderBlock]=\"builderBlock\"\n      dataPath=\"component.options.sectionA\"\n    ></builder-blocks-outlet>\n    <h2>Section B</h2>\n    <!-- Render section B editable region using \n    builder-blocks-outlet component -->\n    <builder-blocks-outlet\n      [blocks]=\"sectionB\"\n      [builderState]=\"builderState\"\n      [builderBlock]=\"builderBlock\"\n      dataPath=\"component.options.sectionB\"\n    ></builder-blocks-outlet>\n  `,\n})\nexport class MyCustomSection implements OnChanges {\n  @Input()\n  sectionA = null;\n\n  @Input()\n  sectionB = null;\n\n  @Input()\n  builderState = null;\n\n  @Input()\n  builderBlock = null;\n}\n\n"
  },
  {
    "title": "Versioning Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-versioning",
    "html": "Versioning Custom Components\n\nWhen you rely on custom components, sometimes you want to publish new versions and phase out previous versions. This document shows you how to version your custom components so that your team is using the most up-to-date iteration.\n\nThe following video shows two versions of a component in the Visual Editor and how, with minimal code edits you can deprecate one version in favor of another.\n\nThis document covers the following:\n\nMaking new versions backward-compatible\nNaming versioned custom components\nWhen backward-compatibility isn't possible\nDeprecating custom components\nPrerequisites\n\nTo version custom components, you should already be familiar with the following:\n\nRegistering Custom Components\nUsing Custom Components in the Visual Editor\nMaking new versions backward-compatible\n\nAlways make new versions of custom components backward-compatible so that any content using a prior version of the component continues to work.\n\nBuilder uses the current version of the custom component when rendering your content because that is the version that exists on your site–even if the content was originally created with a prior version of the component.\n\nFor example, if the new version of the custom component has an additional input, make sure to handle the case where that input is undefined, since old content does not have a value for that input.\n\nImportantly, even if you are deprecating a previous version of a component, keep that previous version registered with Builder so that any instances still in use continue to work properly.\n\nAn example of backward compatibility\nReact\nQwik\nVue\nSvelte\nAngular\n\nThe following code is a minimal first version of HelloWorldComponent with a single input called text.\n\n// Original version that has a input called \"text\"\nconst HelloWorldComponent = (props) => <div>{props.text}</div>;\n\nBuilder.registerComponent(HelloWorldComponent, {\n  name: \"Hello World\",\n  inputs: [{ name: \"text\", type: \"string\" }], // <-- one input in this original version of the component\n});\n\n\nThe updated HelloWorldComponent has a new description input, but keeps the text input. By keeping the original text input, HelloWorldComponent continues to support the previous version's text input.\n\n// New version still supports the old input style, even though it has a new \"description\" input\nconst HelloWorldComponent = (props) => <div>{props.text}</div><div>{props.description || 'default description'}</div>;\n\nBuilder.registerComponent(HelloWorldComponent, {\n  name: \"Hello World\",\n  inputs: [\n    { name: \"text\", type: \"string\" }, // <-- Keep orginal input to support previous content\n    { name: \"description\", type: \"string\" } // <-- New input for v2\n  ],\n});\n\n\nTip: If a defaultValue is passed to an input, Builder only applies that value to new content that uses the new component–it is not retroactive. For more information on defaultValue, refer to the defaultValue description in Input Types in Builder.\n\nNaming versioned custom components\n\nWhen naming your custom components, including when introducing new versions, be sure to give each component a unique name. You can use completely different names such as Our Header and Our New Header, or you can use a naming technique that uses version numbers in your code while maintaining the same name, unchanged, in the Visual Editor.\n\nTo manage names and versions of custom components, we recommend the following workflow:\n\nOptionally hide the previous version of the component to prevent its use.\nGive the component(s) a version number.\n\nTo hide and assign a version number to your components, follow the steps for your framework:\n\nReact\nQwik\nVue\nSvelte\nAngular\n\nTo keep the same name in the Visual Editor while using version numbers in your code, you can prepend a version indicator such as number followed by a colon, :, in the name of the component in registerComponent().\n\nThe following example demonstrates removing the first version of a HeadingComponent from the Visual Editor and replacing it with a second version by the same name.\n\n1. Set hideFromInsertMenu to true. In this way, the first version of this component doesn't show up in the Insert tab.\n\nconst Heading = props => (\n  <h1>{props.title}</h1>\n)\n\n\nBuilder.registerComponent(Heading, { \n  name: 'Heading', // <-- the name your users see in the Visual Editor\n  hideFromInsertMenu: true, // <-- don't show in Insert tab\n  inputs: [{ \n    name: 'title', \n    type: 'text',\n    defaultValue: 'I\\'m version 1' }]\n})\n\n\n2. Register the second version of the component. Keep the original version registered so any content that relies on it continues working as expected.\n\n3. In the second component name, prepend the name that shows up in the Visual Editor with a version followed by a colon. In this example, the name is v2: Heading.\n\nBuilder omits anything that you put before the colon, so you have flexibility in how you indicate versions.\n\nIf you have content that uses version one, that content still renders as long as you keep that original component registered; however, with hideFromInsertMenu set to true, the first version doesn't show up in the Visual Editor. Instead, the second version shows up, making sure users use the new version.\n\nThe full example is below:\n\nReact\nQwik\nVue\nSvelte\nAngular\n\nTip: The content model backing the component does not update automatically.\n\nReact\nQwik\nVue\nSvelte\nAngular"
  },
  {
    "title": "Using Custom Components in the Visual Editor - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-visual-editor",
    "html": "Using Custom Components in the Visual Editor\n\nAfter you've set up your code base to use your custom components within Builder, you can test it out and organize your components in the Visual Editor.\n\nPrerequisites\n\nTo get the most our of this tutorial, you should have already done the following:\n\nConfigured your codebase to use your custom component with Builder\nSet up editing and previewing directly on your site\nFinding your custom components in the Visual Editor\n\nWhen you've successfully registered your custom components with Builder, you'll find your components in the Insert tab in the Custom Components section.\n\nThe following image shows the Custom Components section expanded within the Visual Editor for this page. In this example, within the Custom Components section, are eleven custom components that Builder developers have registered. The contents of your Custom Components section depends on which components you've registered, so yours might look different than this screenshot.\n\nOrganizing your components in custom sections\n\n\n\n\nYou can create a section in the Visual Editor Insert tab just for your custom components. The following image shows a custom section in the Insert Tab called Our Components, which contains four custom components; a hero, double columns, triple columns, and dynamic columns.\n\nThe following image shows an example of a custom section in the Insert tab called Our Components, which contains four custom components; a hero, double columns, triple columns, and dynamic columns.\n\nTo add your custom section to the Insert tab, specify insertMenu as an argument in Builder.register(). Give your section a name and list the items you'd like include in that section as in the following example.\n\nimport { Builder } from '@builder.io/sdk';\n\n Builder.register('insertMenu', {\n   name: 'Our components',\n   items: [\n     { name: 'Hero' },\n     { name: 'Double Columns' },\n     { name: 'Triple Columns' },\n     { name: 'Dynamic Columns' },\n   ],\n}) \n\n\nFor more detail on registering Insert tab menus, refer to Interface: Insert Menu Config readme on GitHub and a complete builder-settings.js config.\n\nDeveloping and testing locally\n\nBefore your team starts using your custom component, you can test it out in the Visual Editor. When developing locally, update the preview URL in the top right corner of the preview from your production URL to your local development URL.\n\nTip: When developing locally, you are mostly likely developing on a non-ssl http:// url within Builder, which is an https:// site. Browsers don't allow https:// sites to make insecure http:// requests unless you explicitly allow it. To allow access to your local http URL in Chrome, click the shield icon on the right side of the address bar, and choose load unsafe scripts. The page will reload and you might have to enter your local URL a second time for Chrome to allow its content to load.\n\nThe following video shows you how to set your preview URL by clicking the URL setting and typing in your local URL for development. This URL is temporary and does not persist when you leave the page, which makes it ideal for testing out your new component."
  },
  {
    "title": "Registering Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-setup",
    "html": "Registering Custom Components\n\nWant a shortcut? Get going right away with Builder's Devtools, where you can register components with the flip of a switch. For details, visit Using Builder Devtools for Automated Integration.\n\nTo use your custom components in the Builder Visual Editor, you need to take a couple of minimal steps in your codebase.\n\nPrerequisites\n\nTo get the most our of this tutorial, you should have the following:\n\nIntegrated Pages or Sections\nThe Builder SDK installed for your framework\n\nTip: This tutorial is for custom components in all Builder's supported frameworks except for the HTML API.\n\nExample\n\nBuilder can register any of your components for use in the Visual Editor. Just provide a reference to the component and describe the inputs—or the props—that you would like to be editable in the Visual Editor as in the following example:\n\ntype MyProps = { content: string; link: string }\n\n// Any component in your codebase\nfunction MyButton(props: MyProps) {\n  return <Button href={props.link}>{props.content}</Button>\n}\n\n// Register this component for use in the Visual Editor\nBuilder.registerComponent(MyButton,{\n  name: 'MyButton',\n  inputs: [\n    // 'name' is the name of your prop\n    { name: 'content', type: 'text' },\n    { name: 'link', type: 'url' },\n  ],\n)\n\nSetting up your code\n\nTo use your custom component with Builder, you need to let Builder know about it by registering your component. Registering your component makes the component appear in the Visual Editor as a custom block. Follow the steps according to framework.\n\nNext\nQwik\nReact\nVue\nSvelte\nAngular\n\nTip: Currently, Builder supports registering client components. Server component support is in development. Subscribe to the Builder newsletter for the latest in feature development.\n\nDefining a component\n\nYou can use a component you already have or create a component that you want to register with Builder. This example uses a Heading component that displays a title prop.\n\nconst Heading = props => (\n  <h1>{props.title}</h1>\n)\n\nRegistering your component\n\nRegister your component as in the following example. Here, registerComponent() registers a Heading component with one text input: title\n\nMake sure that you import the file where Builder.registerComponent() resides into any file that has a BuilderComponent. This import is vital to the setup.\n\nimport { Builder } from '@builder.io/react'\n\n// Make sure that every page where renders Builder \n// content calls the file containing this function call\nBuilder.registerComponent(Heading, { \n  name: 'Heading',\n  inputs: [{ name: 'title', type: 'text' }],\n  image: 'https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png'\n})\n\n\nThe registerComponent(component, options) method takes two arguments:\n\ncomponent: such as Heading in the following example\noptions: an object with which you can specify property values such as children, requirements, and inputs\n\nThe options you provide to registerComponent() determine how your component appears in the Visual Editor. For example, with the image option, you can provide your own icon that the Visual Editor uses in the Insert tab. For a list of additional options, refer to Input types.\n\nAs a best practice, always specify an image to use as an icon in the Visual Editor. This example uses an icon from Tabler Icons.\n\nAfter registering your component with Builder, you can use it as in this example where an h1 uses title from the custom component, Heading.\n\nTip: If you have a prop you'd like to make editable in the Visual Editor, be sure to define an input for it. In this example, name is editable because it is specified in the inputs array of registerComponent().\n\nCheck out the full reference docs for registerComponent() options for more details.\n\nUsing your component in Builder's Visual Editor\n\nNow your component should show up in the Visual Editor with no further configuration in the code.\n\nThe following video shows the Custom Thing block in the Custom Components section of the Insert tab.\n\nCustomThing has an input registered with Builder called name. To use a registered component's input, do the following:\n\nDrag and drop your custom component into the work area.\nSelect your component by clicking on it.\nClick the Edit button.\nAdd a value for the the input, in this example, the input is called name, and the value added is the text, \"Sunshine\".\nSetting component options\n\nThe following table describes each of the additional component options:\n\nName\tType\tDescription\n\ndefaultStyles\n\n\t\n\nobject\n\n\t\n\nUse for showing an example value in the input form when creating a new instance of this component, to users understand its purpose. Users in the Visual Editor can edit these styles.\n\n\n\n\nhideFromInsertMenu\n\n\t\n\nBoolean\n\n\t\n\nHide your component from the Insert tab within Builder's Visual Editor. Use this feature for deprecating a component when you want to reduce its use, but still need the component registered with Builder so that older content that uses the component continues to function properly. For more information on versioning, refer to Versioning Custom Components.\n\nhideFromInsertMenu: true\n\n\n\nnoWrap\n\n\t\n\nBoolean\n\n\t\n\nBy default, Builder wraps your components in a <div>.\n\nYou can opt out of this wrapping by using the noWrap option. For a full code example, see Builder's built-in form input component.\n\nThe following example shows noWrap with a Material UI TextField in Builder.io.\n\nTip: When using noWrap: true, it is important to pass {...props.attributes} to ensure class names are assigned correctly as in the following example.\n\nimport { TextField } from '@material-ui/core'\n\nexport const BuilderTextField = props => (\n  // Important! Builder.io must add a couple classes \n  // and attributes via props.attributes\n  // Important! If you add your own classes, \n  // do it after ...props.attributes \n  <TextField \n    variant={props.variant} \n    {...props.attributes} \n    className={`my-class ${props.attributes.className}`}\n   />\n)\n\nBuilder.registerComponent(BuilderTextField, {\n  name: 'TextField',\n  noWrap: true, // Important!\n  inputs: [{ name: 'variant', type: 'string' }]\n})\n\nProgrammatically setting bindings\n\nYou can programmatically set bindings on custom components so you can apply multiple bindings simultaneously. This is helpful when, for example, applying styles from an existing design system. The snippet below registers a custom component with default bindings for the product title and a theme background color:\n\nFetching data async\n\nUnless you're using a React-based framework, your components can fetch data async out-of-the-box.\n\nIf you are using a React-based framework and want your component to fetch data async, use Builder's getAsyncProps helper.\n\nIn the following example, the page loads after the all the data arrives:\n\nFor more information about getAsyncProps see the Builder Utils README on GitHub.\n\nMaking a component available only in specified models\n\nWhen you use Builder.registerComponent() to register custom components in Builder.io, you can provide various options to customize the behavior of your component.\n\nOne of these options is the models property, where you can specify a list of model names. By doing so, you can restrict the usage of the component to only those models listed, ensuring that the component is available only for specific purposes. If the models property is not provided, the component will be available for all models in Builder.io.\n\nTo control exactly which models your component is available in, use the models array when registering your component as in the following example:\n\nIn this example, the RelatedProducts component is only accessible in the Visual Editor when editing content entries made with the product-editorial or page models.\n\nWhat's next\n\nTo learn how to test and customize how your component appears in the Visual Editor, continue on to Using Your Custom Components in the Visual Editor.\n\nTo limit visual editing to only your custom components, use Components-only mode."
  },
  {
    "title": "Overriding Built-in Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-overriding",
    "html": "Overriding Built-in Components\n\nIn addition to using your own unique custom components with Builder, you can tailor built-in components overriding them with your own component. You can extend, limit. or otherwise tweak built-in components so that your team has exactly what they need to build projects.\n\nThe image below shows an example of a custom button component registered with Builder. Because the button has the same name as the built-in component, the custom button overrides the default button.\n\nPrerequisites\n\nTo override Builder's built-in components, you should already be familiar with the following:\n\nRegistering Custom Components\nUsing Custom Components in the Visual Editor\nOverriding Builder's built-in components\n\nYou can override Builder-provided components by registering a custom component with the same name. By overriding a component, you can add extra features to Builder's built-in blocks and change their behavior.\n\nThe following example demonstrates how to replace Builder's default Image block.\n\nReact\nQwik\nAngular\n\nTo override Builder's built-in components, take the following steps:\n\nUsing Builder.registerComponent(), register a component with the same name as the component in Builder that you'd like to override.\nSet the override property to true\nAdd an inputs array with each input you want your component to have.\n// MyImage.jsx\n\nBuilder.registerComponent(MyImage, {\n  // Provide the name of the built-in Builder component\n  // that you want to override.\n  name: 'Image',\n  // Signify that this is an override\n  override: true,\n  inputs: [\n    // Add your own input fields.\n    { name: 'myInput', ... },\n    // Copy/paste the original component's inputs\n    // from Builder's React SDK if you also want to\n    // retain the original fields.\n    { name: 'image', type: 'file', ... },\n  ],\n  ...\n})\n\n\nTip: If you have a prop you'd like to make editable in the Visual Editor, be sure to define a input for it. In this example, name is editable because it is specified in the inputs array of registerComponent().\n\nCheck out the full reference docs for registerComponent() options for more details.\n\nTip: Check out Builder's open source repository for a list of our built-in components. You can find their names along with their input fields and configuration in the Builder.registerComponent() method within each component's file.\n\nWhat's next\n\nAs you create more custom components for Builder, check out Versioning Custom Components to learn how to version and deprecate components."
  },
  {
    "title": "Intro to contributing plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/contributing-plugins",
    "html": "Common Types of Plugins Contributed to Builder\n\nIf you'd like a plugin with specific features but it's not already in Builder, you can submit a public plugin to Builder with a GitHub pull request. A public plugin is a plugin that anyone can use with Builder. When a public plugin is merged, it becomes part of Builder and Builder developers maintain it.\n\nThis document covers the main types of plugins developers contribute with links to examples and more information.\n\nTip: You can create public plugins and submit a pull request on any plan. If a public plugin doesn't meet your needs, you can create a private plugin. Private plugins require an Enterprise plan, you host your own plugins, and you handle configuration manually.\n\nPrerequisites\n\nTo get started contributing plugins, you should be familiar with the following:\n\nthe basics of Builder plugins\ngit and GitHub\nTypes of Builder plugins\n\nPlugin contributions tend to fall into three categories that cover the most common use cases:\n\nCustom editor plugins\nData connector plugins\nAction shortcut plugins\nCustom editor plugins\n\nCustomer editor plugins are the main use case for creating your own plugins. Almost all of the integrations in Builder use custom editors, which incudes most of the built-in e-commerce plugins.\n\nFor example, with this type of plugin, teammates can search and link selected products and categories from their backend to structured data entries, Sections, and Pages within the Visual Editor with a minimal process.\n\nUsing custom editor plugins, marketing or design teammates can populate elements such as product cards, product galleries, add to cart buttons, and lists of product recommendations by selecting what they need from your plugin.\n\nFor more information see the following resources:\n\nOn the Builder Forum, see How to build a Custom Editor plugin for my e-commerce backend with Builder.io.\nFor an example of an e-commerce plugin in production, check out Builder's Swell plugin on GitHub.\nFor help on creating your e-commerce plugin, Builder offers an e-commerce plugin utility library.\nData Connector plugins\n\nUse data connector plugins to enrich the data available in Visual Editor Sections and Pages from external sources. With a data plugin, team mates can select entries or query the source and bind to the results of queries directly in Builder.\n\nResources:\n\nFor a step-by-step guide on connecting to data, see the Builder blog post Using Contentful Data in Builder's Visual Editor.\nFor example data plugin code, see Builder's data plugin example on GitHub.\nFor an example of a data plugin in production, check out Builder's Contentful plugin on GitHub.\nBuilder also offers a data plugin utility library to help you in creating your data plugin.\nAction shortcut plugins\n\nYou can use action shortcuts in Builder to give non-technical teammates access to some of the tasks that would otherwise require developer involvement. With action shortcuts a user can trigger tracking events, set up conditional values, or set specific values on state without having to write code.\n\nIn the example illustrations that follow, the action Track Event with Google Analytics comes from a plugin that defines what this action does for the bound element. In this example, when the user clicks a button, the action sends the event addToCart to Google Analytics.\n\nFor a pre-made example, check out Builder's example action plugin.\n\nGeneric Custom Editor plugin\n\nCustom editor plugins help you register custom field types for your Builder model custom fields and inputs for your custom components, custom targeting, and symbols.\n\nTo create a custom editor, build a React component that takes a value prop and an onChange prop. Within your custom editor component, call the passed in onChange() function when the value is updated. The value you set can be any type serializable to JSON—for example, string, number, null, array, object—and be as deeply nested as you need.\n\nFor more information see the following resources:\n\nBuilder plugins doc\nRich Text editor example\nWhat's next\n\nIf you're ready to start contributing, check these articles:\n\nMaking Your Own Plugins\nExtending Builder with Plugins\n\n\n"
  },
  {
    "title": "SDK Comparison - Builder.io",
    "url": "https://www.builder.io/c/docs/sdk-comparison?_host=www.builder.io",
    "html": "SDK Comparison\n\nIf you want to use the latest, second-generation Builder SDKs, understanding how the imports might have changed for your framework can help you get started smoothly so you can leverage the many improvements and updates.\n\nTip: Currently, the React Gen 2 SDK is in beta. We recommend that you use the Gen 1 SDK for React and React-based frameworks.\n\nComparison: Gen 1 and Gen 2\n\nAt Builder, we refer to the two sets of SDKs as Gen 1 and Gen 2:\n\nGen 1: first generation of the Builder SDKs\nGen 2: second generation of the Builder SDKs\n\nUse the table below so that you reference the SDK for your framework correctly.\n\nFramework\tGen 1\tGen 2\n\nQwik\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-qwik\n\n\n\n\nReact*\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react\n\n\n\n\nNext.js\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react-nextjs\n\n\n\n\nVue**\n\n\t\n\nstable\n\n@builder.io/vue\n\n\t\n\nin beta\n\n@builder.io/sdk-vue/vue2\n\n@builder.io/sdk-vue/vue3\n\nThough Vue Gen 2 is in beta, this is the recommended SDK.\n\n\n\n\nSvelte\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-svelte\n\n\n\n\nSolid\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-solid\n\n\n\n\nReact Native\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-react-native\n\n\n\n\nAngular\n\n\t\n\nstable\n\n@builder.io/angular\n\n\t\n\nn/a\n\n*Includes React-based frameworks such as Remix, Hydrogen, Gatsby, Next.js, and App Router.\n\n**Includes Nuxt.\n\nImporting the rendering component\n\nThe component's name changed from BuilderComponent in Gen 1 to RenderContent in Gen 2.\n\nGen 1\n\nIn Gen 1, the import is:\n\nimport { BuilderComponent } from '@builder.io/react';\n\nNotice:\n\nthe component is BuilderComponent\nthe Gen 1 SDK is @builder.io/react\n\nGen 2\n\nIn Gen 2, the import changes to:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\nNotice:\n\nthe component is RenderContent\nthe Gen 2 SDK is @builder.io/sdk-react\nImporting helpers to configure the editor\n\nThe process of importing helpers to configure the editor has also changed between React Gen 1 and React Gen 2.\n\nGen 1\n\nIn Gen 1, import a Builder object and use the register() helper:\n\nimport { Builder } from '@builder.io/react';\n\n\nBuilder.register('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' },\n    { name: 'Triple Columns' },\n    { name: 'Dynamic Columns' },\n  ],\n})\n\n\nGen 2\n\nIn Gen 2, the Builder import no longer exists. Instead, import register directly from the module:\n\nimport { register } from '@builder.io/sdk-react';\n\nregister('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' }\n  ],\n})\n\nImporting helpers to register custom components\n\nThe process of importing the helper to register custom components has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import the Builder object and use the registerComponent() helper:\n\nimport { Builder } from '@builder.io/react';\nimport { MyHero } from './MyHero';\n\nBuilder.registerComponent(MyHero, {\n  name: 'Hero',\n  inputs: [\n   { name: 'title', type: 'string' },\n  ],\n});\n\n\n\nGen 2\n\nIn Gen 2, instead of using registerComponent, create a customComponents array containing all the custom components, and pass that as a prop to the RenderContent component:\n\nimport { RenderContent } from '@builder.io/sdk-react';\nimport { MyHero } from './MyHero';\n\nconst MY_HERO_CUSTOM_COMPONENT = {\n  component: MyHero,\n    name: 'Hero',\n    inputs: [\n      { name: 'title', type: 'string' },\n    ],\n}\n\n// this array can contain as many custom components as you want\nconst CUSTOM_COMPONENTS = [MY_HERO_CUSTOM_COMPONENT]\n\n// pass the array to RenderContent\n<RenderContent customComponents={CUSTOM_COMPONENTS} />\n\n\nImporting helpers to fetch data\n\nThe process of importing the helper to fetch data has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import a builder object and use the get() or getAll() helper:\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url,name',\n});\n\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n});\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using getAll().\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\nFor more detail, read Fetching reference and Symbols further in this document.\n\nGen 2\n\nIn Gen 2, the builder import is no longer used. Instead, import fetchOneEntry() and fetchEntries()—to fetch single and multiple entries respectively—directly from the package. Additionally, the apiKey is now a required field:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY'\n});\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY’\n});\n\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using fetchEntries().\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\n\nFor more detail, read the next section in this document, Fetching reference and Symbols.\n\nFetching references and Symbols\n\nUsing enrich: true is crucial in ensuring that references and Symbols are fetched, which provides a consistent experience between the Visual Editor and the live site.\n\nGen 1\n\nTo fetch references and Symbols in Gen 1 when using builder.get() or builder.getAll(), pass in the enrich: true option:\n\nimport { builder } from '@builder.io/react';\n\n// Fetch a single entry with references and Symbols\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n\nGen 2\n\nTo fetch reference and Symbols in Gen 2 when using fetchOneEntry() or fetchEntries(), include the enrich: true option:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\n// Fetch a single entry with references and Symbols\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\nUsing enrich when rendering content\n\nGen 1\n\nIn Gen 1 of the Builder SDK, fetch references and Symbols when rendering components with BuilderComponent by specifying enrich to true:\n\nimport { BuilderComponent } from '@builder.io/react';\n\n<BuilderComponent\n  modelName=\"page\"\n  options={{ enrich: true }} // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with BuilderComponent makes sure that references and Symbols associated with the content are fetched during rendering, which provides a consistent experience with the live site where the content is published.\n\nGen 2\n\nIn Gen 2 of the Builder SDK, when rendering components using RenderContent, fetch references and Symbols by specifying enrich: true:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\n<RenderContent\n  customComponents={CUSTOM_COMPONENTS} \n  options={{ enrich: true }}  // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with RenderContent ensures that your custom components have access to the necessary content and provides a consistent experience with the live site where the content is published.\n\nWhat's next\n\nFor more detail on the Gen 2 (or Mitosis) SDKs, see the Builder GitHub repo."
  },
  {
    "title": "Builder with iOS and Android - Builder.io",
    "url": "https://www.builder.io/c/docs/ios-and-android",
    "html": "Builder with iOS and Android\n\nTip: New Native Mobile SDKs are under active development. For more, sign up for early access.\n\nBuilder can be used with any platform. All data is just simple JSON. There are a few options to leverage Builder with native mobile apps.\n\nData Models\n\nData models work seamlessly across all platforms. First, create your data model and structure your data with fields. Once your data model is created, editors can create content entries based on your data model, manipulating the fields using simple inputs. (see screenshots below for example)\n\nAll data model content can be consumed via our Content API and rendered however you choose.\n\nFurthermore, if your data model will be rendered on a website, then you can add a preview URL to the data model. If you do this, then content editors will be able to see live visual previews of the final rendered content while they are editing their content entries. For certain field types, such as lists, they can even utilize drag-and-drop functionality for reordering (see video below).\n\nPage and Section models\n\nFor visual (drag + drop) content creation we use a simple standardized JSON format. We have SDKs for popular frontend frameworks, and you can also render Builder content yourself easily too.\n\nTo render the same content on web and native, we would recommend using components-only mode to restrict to a set of components you define.\n\nYou can preview and edit on web, and as long as you provide components with the same structure for iOS and/or Android, you can render them easily.\n\nThe data is a minimal array of blocks to render:\n\n{\n  \"data\": {\n    \"blocks\": [\n      {\n        \"component\": {\n          \"name\": \"YourComponentName\",\n          \"options\": {\n            \"yourOption\": \"providedValue\"\n          }\n        }\n      },\n      {\n        \"component\": {\n          \"name\": \"YourOtherComponentName\",\n          \"options\": {\n            \"yourOtherOption\": \"providedOtherValue\"\n          }\n        }\n      }\n    ]\n  }\n}\n  }\n})\n\n\nAnd to render them, for instance with SwiftUI:\n\nstruct BuilderContent: View {\n    var body: some View {\n        // Iterate over the blocks\n        ForEach(content!.data.blocks) { block in\n            // Render your SwiftUI components by name\n            if (block.component.name == \"YourComponentName\") {\n                YourComponentName(\n                    // Passing in the relevant options\n                    yourOption: block.component.options[\"yourOption\"]!\n                )\n            }\n            if (block.component.name == \"YourOtherComponentName\") {\n                YourOtherComponentName(\n                    yourOtherOption: block.component.options[\"yourOtherOption\"]!\n                )\n            }\n        }\n    }\n}\n  }\n})\n\n\n\nWebViews\n\nAs an alternative to rendering code manually for native apps, you can also pull HTML from our HTML API (or a custom server you setup to render your Builder content) and load that content into your native app as HTML in a WebView.\n\nThis offers the most ease and flexibility, and in most cases is unnoticeable to end users that this content is actually HTML and not native Views.\n\nimport UIKit\nimport WebKit\n\nclass ViewController: UIViewController, WKUIDelegate {\n\n    var webView: WKWebView!\n    \n    override func loadView() {\n        let webConfiguration = WKWebViewConfiguration()\n        webView = WKWebView(frame: .zero, configuration: webConfiguration)\n        webView.uiDelegate = self\n        view = webView\n    }\n    override func viewDidLoad() {\n        super.viewDidLoad()\n        \n        let myURL = URL(string:\"https://cdn.builder.io/api/v1/html?apiKey=YOUR_KEY&url=/some-page\")\n        let myRequest = URLRequest(url: myURL!)\n        webView.load(myRequest)\n    }\n}\n\nReact Native (beta)\n\nFor the SDK for React Native (beta), visit Builder's GiHub repo."
  },
  {
    "title": "Builder.io Write API - Builder.io",
    "url": "https://www.builder.io/c/docs/write-api",
    "html": "Updating Content with the Write API\n\nWith the Write API you can POST, PATCH, PUT, and DELETE Builder content using HTTP Request Methods. You can use the Write API for use cases such as writing programmatically from your own internal application, or as part of a code release and build process.\n\nTip: The Write API is separate from the Admin API. If you need to administer Builder Spaces and create, read, update, and delete models, use the Admin API.\n\nPrerequisites\n\nTo use the instructions in this document, you need:\n\nA Private API Key\nPOST\n\nTo create new entries in Builder, send a POST request as follows:\n\ncurl https://builder.io/api/v1/write/MODEL_NAME \\\n  -X POST \\\n  -d '{ \"name\": \"Hi!\", \"data\": { \"field\": \"value\" } }' \\\n  -H 'Authorization: Bearer YOUR_PRIVATE_KEY' \\\n  -H 'Content-Type: application/json'\n\n# Example response\n# {\n#  \"name\": \"Hi!\",\n#  \"id\": \"ca7397dfdcd93\",\n#  \"data\": { \"field\": \"value\" }\n# }\n\nEach time you send a POST request, a new resource is created.\n\nStructure of POST requests\n\nWhen using the POST method with the Builder Write API, the payload of the POST request must contain content data that conforms to the structure defined by the schema.\n\nInclude in your POST requests properties such as name, modelId, published, and data. The data property can contain various fields based on your content requirements, such as title, blocks, inputs, and state.\n\nAbout the data property\n\nThe data property can be any arbitrary key-value pairs, with an optional blocks property. If data does include a blocks property, the blocks property must be an array of Builder blocks.\n\nYou only need the blocks property if you're using Page or Section models; that is, a visual feature. With a Data model, there is only data and no blocks, so the blocks property isn't applicable.\n\nThe BuilderBlock interface defines a Builder block, which is a nested element used in Builder's Visual Editor. The following is an excerpt of BuilderBlock interface featuring the most commonly used properties.\n\nRefer to this object shape when sending a POST request to the Write API:\n\ninterface BuilderBlock {\n  '@type': '@builder.io/sdk:Element';\n  tagName?: string;\n  responsiveStyles?: {\n    large?: Record<string, string>;\n    medium?: Record<string, string>;\n    small?: Record<string, string>;\n  };\n  component?: {\n    name: string;\n    options?: Record<string, any>;\n  };\n  children?: BuilderBlock[];\n  ...\n}\n\n\nFor the complete BuilderBlock interface, which includes many additional properties, such as bindings, actions, and code, see the source code on GitHub.\n\nA detailed POST example\n\nA detailed example of a POST request is as follows:\n\n// example POST request\n\ncurl https://builder.io/api/v1/write/MODEL_NAME \\\n  -X POST \\\n  -d '{\n    \"name\": \"Hi!\",\n    \"data\": {\n      \"blocks\": [\n        {\n          \"@type\": \"@builder.io/sdk:Element\",\n          \"tagName\": \"div\",\n          \"children\": [\n            {\n              \"@type\": \"@builder.io/sdk:Element\",\n              \"component\": {\n                \"name\": \"Text\",\n                \"options\": {\n                  \"text\": \"Hello World\"\n                }\n              }\n            }\n          ]\n        }\n      ],\n      \"customProperty\": \"Custom value\"\n    }\n  }' \\\n  -H 'Authorization: Bearer YOUR_PRIVATE_KEY' \\\n  -H 'Content-Type: application/json'\n\nWhen sending a POST request for a Data model, omit the blocks property, for example:\n\n// example data property for a Data model\n...\n{\n  \"data\": {\n     \"message\": \"my message value\",\n     \"count\": 10\n  }\n}\n...\n\n\nWhen sending a POST request for a Page or Section model, be sure to include the blocks property, for example:\n\n// example data property for a Page or Section model\n...\n{\n  \"data\": {\n     \"blocks\": [...],\n     \"message\": \"my message value\",\n     \"count\": 10\n  }\n}\n...\n\n\nFor more information, read the MDN document, POST.\n\nPUT\n\nUse a PUT request to create or replace an entire resource.\n\nWhen sending a PUT request, provide the complete representation of the resource you want to replace. This replaces the existing resource, or if the resource doesn't exist, it creates a new resource. If you don't specify a property, it is deleted.\n\nTo replace entries in Builder, send a PUT request as follows:\n\nFor more information, read the MDN document, PUT.\n\nPATCH\n\nUse a PATCH request to update or modify a specific part or property of an existing resource. Unlike PUT, which replaces the entire resource, PATCH only updates the specified fields or properties.\n\nIn a PATCH request, you send the changes you want to make those changes apply to the existing resource. PATCH is useful when you want to modify specific attributes without sending the entire resource representation.\n\nTo update entries in Builder, send a PATCH request as follows:\n\nFor more information, read the MDN document, PATCH.\n\nDELETE\n\nTo delete entries in Builder, send a DELETE request as in the following:\n\nFor more information, read the MDN document, DELETE.\n\nExample content JSON\n\nThe following is an example of the shape of the content to send in the body of a request to the Write API. This example reflects the shape of the content that Builder uses in the Visual Editor and is informed by Builder's JSON schema.\n\n{\n  \"name\": \"My content name\",\n  // set published to: \"archived\", \"draft\", or \"published\"\n  \"published\": \"draft\",\n  // Optional. query is where you specify your targeting properties\n  \"query\": [\n    {\n      \"property\": \"urlPath\",\n      \"operator\": \"is\",\n      \"value\": \"/test-out-json\"\n    }\n  ],\n  // example of a custom field. See \n  // https://www.builder.io/c/docs/custom-fields\n  // The type is what you specified in the model \n  // when creating the custom field. \n  \"data\": {\n    \"someProperty\": \"hello\",\n  }\n}\n"
  },
  {
    "title": "Salesforce Commerce Cloud Integration - Builder.io",
    "url": "https://www.builder.io/c/docs/sfcc-integration",
    "html": "SFCC Content Assets Integration\n\nThe purpose of this integration is to allow users to create Salesforce Commerce Cloud (SFCC) content assets from content entries within Builder. This is an API-only integration and doesn't require a cartridge installation.\n\nHow the integration works\n\nSFCC Content Assets Integration works via a webhook that listens for any content changes on the Builder side and creates, updates, or deletes the HTML equivalent as content assets in your SFCC library.\n\nSetting up the integration\nSetting SFCC API Client\n\nSet up a new API Client in the SFCC account manager, you’ll need admin access for this:\n\ngo to the API Client screen.\nClick Add API Client\nEnter a display name to identify the API Client, for example, “Builder.io SFCC Sync”\nEnter a password. This will be your client secret.\nFrom the “Token Endpoint Auth Method” menu choose “client_secret_basic”\nClick ‘Add’\nMake a note of the API Client ID that is generated and the password to be used in next steps\nAssign the access permissions to your API client\nIn SFCC Business Manager, go to Administration > Site Development > Open Commerce API Settings\nFrom the Select Type field, select ‘Data’\nFrom the Select Context field, select ‘Global’\nIn the text field add the client ID from step 1 to the following json and paste it\n\n\n\n\n{\n  \"_v\": \"20.4\",\n  \"clients\": [\n    {\n      \"client_id\": \"Change this to match your API Client ID\",\n      \"resources\": [\n        {\n          \"resource_id\": \"/libraries/{library_id}/content/{content_id}\",\n          \"methods\": [\n            \"get\",\n            \"put\",\n            \"patch\",\n            \"delete\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        },\n        {\n          \"resource_id\": \"/libraries/{library_id}/content/{content_id}/folders\",\n          \"methods\": [\n            \"get\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        },\n        {\n          \"resource_id\": \"/libraries/{library_id}/folders/{folder_id}\",\n          \"methods\": [\n            \"get\",\n            \"put\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        },\n        {\n          \"resource_id\": \"/libraries/{library_id}/folders/{folder_id}/content\",\n          \"methods\": [\n            \"get\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        },\n        {\n          \"resource_id\": \"/libraries/{library_id}/folder_assignments/{content_id}/{folder_id}\",\n          \"methods\": [\n            \"get\",\n            \"put\",\n            \"delete\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        },\n        {\n          \"resource_id\": \"/libraries/{library_id}/folders/{folder_id}/sub_folders\",\n          \"methods\": [\n            \"get\"\n          ],\n          \"read_attributes\": \"(**)\",\n          \"write_attributes\": \"(**)\"\n        }\n      ]\n    }\n  ]\n}\n\nUse the client ID and secret to connect to Builder\nGo to integrations tab and Install the SFRA/Site Genesis plugin\nadd the client ID, password, main content assets library name and your instance path in the plugin configurations\nCreating a Section model\n\nIn the Builder UI, create a Section model so you can create your content assets under it.\n\nYou can start by clicking Models in the left side nav on the Dashboard.\n\nClick +Create Model.\n\nSelect Section from the list.\n\nEnter Content Asset as the name for your new Section model or any name that make sense to your use case and click Create.\n\nEstablish SFCC content asset connection\n\nHit Show more options\n\nPress Sync To SFCC\n\nPress Save\n\nYou're all set now, try creating new entries on the model you created and upon publishing you should see it in your SFCC Content Assets Library"
  },
  {
    "title": "Intro to Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-intro",
    "html": "Intro to Plugins\n\nPlugins for Builder help you integrate a third-party service and customize nearly every part of Builder's Visual Editor and models.\n\nPlugins are a powerful tool for customizing the Visual Editor to make it easier for users to manage and create content.\n\nPlugins help you:\n\nCreate custom types.\nExtend the Visual Editor's user interface.\nTypes of Plugins\n\nThere are three types of plugins in Builder:\n\nBuilt-in plugins: On the Integrations page in Builder, use these ready-made plugins to help you integrate with e-commerce platforms and external data providers with minimal configuration. All plans can use the built-in plugins.\nPublic plugins: You code these and then submit a PR to add to the built-in integrations. Public plugins become part of the Builder ecosystem and when they're merged, Builder.io's engineers help maintain them. All plans can submit public plugins.\nPrivate plugins: You code these but they do not become part of the Builder ecosystem because you maintain them privately. Private plugins are available on all Enterprise plans while plugins with your own branding are available as an add-on for Enterprise customers.\n\nThe diagram below shows these points in a table form:\n\nUse cases for plugins\nBuilt-in Plugins\n\nUse built-in plugins for integrating your Builder account space with with e-commerce platforms and external data providers.\n\nBuilt-in plugins include everything in Integrations, such as:\n\nBigCommerce\nCommercetools\nCommerce.js\nFigma\nPartytown + Shopify\nSmartling\n\nFor a full list, see Integrations and for further documentation, refer to Overview of Built-in Plugins.\n\nPublic Plugins\n\nUse public plugins when you want to customize the Builder Visual Editor UI and you are willing to share your plugin with others. Common use cases for public plugins are:\n\nAdding your own custom types for a model, such as a rich text editor\nCustomizing the Builder Visual Editor\nTargeting content based on what users have in their cart\nCustomizing Symbol inputs\nCreating an action plugin to trigger events in Google Analytics\nAdding an image management plugin\nIntegrating with Shopify\n\nFor more details and instructions on creating plugins, see Extending the Builder UI with Plugins and Making a Plugin.\n\nPrivate Plugins\n\nCreate private plugins when you have needs specific to your company that you need to keep accessible only within your organization. Examples include:\n\nCustomizing the look and feel of Builder with your own branding\nAdding custom flows for creating e-mail campaigns\nNext Steps\n\nUsing and creating plugins opens up countless possibilities. For more info on plugins, check out the following documents:\n\nOverview of Built-in Plugins—an introduction to the plugins already available in Builder.\nMaking a Plugin—a tutorial on how to create your own plugin.\nBuilder.io plugin examples on GitHub"
  },
  {
    "title": "Getting Around with the Command Palette - Builder.io",
    "url": "https://www.builder.io/c/docs/command-palette",
    "html": "Getting Around Builder with the Command Palette\n\nGetting around Builder quickly can help you make the most of your time while working. Using the keyboard shortcut Cmd/Ctrl+k to open the Command Palette, you have direct access to Builder's most in-demand features.\n\nThe video below demonstrates one of the many Command Palette shortcuts, toggling the code editor.\n\nThis document covers:\n\nCommand Palette shortcuts\nUsing the Command Palette\nCommand Palette shortcuts\n\nTo search for content, grab key info, or navigate to any part of Builder use the Command Palette. You can directly and immediately access these features:\n\nToggle Dark Mode and Developer Options\nGo to the different sections of the Builder UI, such as Account Settings, or the Models section\nCopy your Public API Key\nSwitch to another Organization or Space\n\nWithin a content entry, the Command Palette has additional options specific to the Visual Editor including:\n\nImporting from web\nToggling the code editor, console, JSON view, templates\nDuplicating the current content entry\nLaunching Responsivizer\nImporting liquid\nViewing liquid output\n\nSelecting any of the suggested options in the Command Palette opens that section of Builder or feature.\n\nUsing the Command Palette\n\nWith the Command Palette you can immediately jump from one part of Builder to another, whether it be your content, areas of Builder—such as Account Settings or the documentation—or even launch Builder features such as JSON view or the code editor. To use the Command Palette:\n\nPress Cmd/Ctrl+k.\nType in your query or scroll to the option.\nPress Enter.\n\nTo filter content entries, type the word go followed by the name of the content entry; for example: go about, where the name of the entry you're looking for is \"about\".\n\nThe following video gives a brief demo of using the Command Palette to pull up a content entry in the Builder documentation called \"Breakpoints\", jump to the docs, copy your Public API Key, and toggle JSON view.\n\nWhat's next\n\nFor more on making the most of your workflow, see:\n\nKeyboard Shortcuts\nOrganizing Your Content with Folders"
  },
  {
    "title": "Creating a Private Model - Builder.io",
    "url": "https://www.builder.io/c/docs/private-models?_host=www.builder.io",
    "html": "Creating a Private Model\n\nWhen you need a model that is only privately accessible, you can adjust the configuration of your model, use a Private API Key, as well as the Content API to ensure privacy.\n\nMaking a model private\n\nBy default, Builder Page, Section, and Data models are publicly readable.\n\nTip: When setting a model to be private, consider whether you want all entries of that model to be private. If some of them need to be publicly readable, create a model specifically for private content entries.\n\nTo make a model private:\n\nGo to Models.\nOpen your page model.\nGo to Advanced.\nSwitch the Public Readable toggle to off.\nClick Save.\nCreate content entries from this model for any that you'd like to be private.\n\nThe following video shows how to toggle off the Public Readable setting for a Page model, but you can change this setting on any kind of model.\n\nCreating a Private API Key\n\nTo leverage a private model, you need to create a Private API Key in your Organization Settings. Follow the instructions in the Managing Private Keys section of the API Keys documentation.\n\nWhen you have your Private API Key, continue with the instructions below.\n\nAdding the code\n\nUse the Content API with your Private API key with the following code, where you replace these values with your own:\n\nmodelName\nyourPublicAPIKey\nyourPrivateAPIKey\nlet apiUrl = 'https://cdn.builder.io/api/v2/content'\nlet modelName = 'private-page'\nlet content = await request(`${apiUrl}/${modelName}?apiKey=${yourPublicAPIKey}&limit=1&userAttributes.urlPath=/some-page`, {\n  headers: { Authorization: `Bearer ${yourPrivateAPIKey}` },\n})\n\n\nNext, pass the JSON to render as needed; for example as in this React snippet for a model named private-page:\n\nlet page = content.results[0];\n\nif (page) {\n  return <BuilderComponent model=\"private-page\" content={page} />\n}\n\nWhat's next\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time."
  },
  {
    "title": "Content API - Builder.io",
    "url": "https://www.builder.io/c/docs/content-api?_host=www.builder.io",
    "html": "Content API\n\nWith the Content API, you can make requests to retrieve data about any of your models within Builder. The Content API supports advanced query filtering with URL parameters to help you get exactly the data you need.\n\nUse cases for querying data could include searches, populating content for a collection, or getting all links that meet certain criteria.\n\nTo access this data, write queries with dot notation and, optionally, MongoDB style operators.\n\nFor more details on querying, see the Querying Cheatsheet.\n\nSet up\n\nTo start using the Content API, make sure to import the Builder SDK into your project.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\n\nAt the command line, use npm to install the Builder SDK:\n\nnpm install @builder.io/react\n\nIn your code, be sure to import the SDK:\n\nimport { builder } from \"@builder.io/react\";\nQuery requirements\n\nTo use the Builder Content API to retrieve data from your models, be sure to always provide the following request parameters in your queries:\n\nRequired: my-model-name (replace with your model's name)\nRequired: apiKey query param (replace with your Public API Key)\n\nAs an example, you'd replace my-model-name with the name of your model, such as page, and YOUR_API_KEY with your own Public API Key.\n\nhttps://cdn.builder.io/api/V3/my-model-name?apiKey=YOUR_API_KEY\nContent API query params\n\nThis section covers the available Builder Content API query params.\n\napiKey\n\nUse your API key when integrating with Builder.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\nbuilder.init(YOUR_API_KEY);\n\nquery\n\nMongoDB style query of your data.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from '@builder.io/react'\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n}\n\n// to get all entries from a page model that are using a specific symbol\n// where SYMBOL_ID is your Symbol's ID\nconst entry = await builder.get('page', {\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n});\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n})\n\n// get all the entries from a page model that are using a specific symbol \n// where SYMBOL_ID is your Symbol's ID\nconst entry = await fetchOneEntry({\n  model: 'page',\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n})\n\n\nBuilder supports the following operators: $eq $gt $in $lt $lte $ne $nin $and $not $or $nor $exists $type $elemMatch $gte $regex $options. For more information, including examples, see the Builder Querying Cheatsheet.\n\nuserAttributes\n\nOptionally use to send targeting attributes.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\nfields\n\nOnly include these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  fields: 'id, name, data.customField'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    fields: 'id, name, data.customField'\n  }\n})\n\nomit\n\nOmit only these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  omit: 'data, bigField, data.blocks'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    omit: 'data, bigField, data.blocks'\n  }\n})\n\nlimit\n\nMax number of results to return. The default is 30 and the maximum is 100.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entries = await builder.getAll('my-model-name', {\n  limit: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchEntries } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entries = await fetchEntries({\n  model: 'my-model-name',\n  limit: 10\n})\n\noffset\n\nUse to specify an offset for pagination of results. The default is 0.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  offset: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  offset: 10\n})\n\n\nTo fetch all content beyond the limit of 100, use limit and offset together by paginating results and making multiple API calls as follows:\n\nconst limit = 100;\nlet offset = 0;\nconst pages = await getResults({limit, offset});\nwhile(pages.length === (limit + offset)) {\n  offset += pages.length;\n  pages.push( ... (await getResults({ limit, offset}));\n}\nreturn pages;\n\nFor more detail, see this forum post and this forum post.\n\nincludeRefs\n\nInclude content of references in response.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeRefs: true\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeRefs: true\n})\n\ncacheSeconds\n\nSeconds to cache content. This sets the maximum age of the cache-control header response header. Set value higher for better performance, and lower for content that changes frequently.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  cacheSeconds: 10\n})\n\nstaleCacheSeconds\n\nBuilder.io uses stale-while-revalidate caching at the CDN level. This means Builder always serves from edge cache and updates caches in the background for maximum possible performance.\n\nIn this way, the more frequently content is requested, the fresher it is. The longest Builder holds something in stale cache is one day by default, but you can set this to be shorter if needed. We suggest keeping this high unless you have content that must change rapidly and gets very little traffic.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  staleCacheSeconds: 86400\n})\n\nsort\n\nProperty to order results by. Use 1 for ascending and -1 for descending.\n\nThe key is what you're sorting on, so the following example sorts by createdDate. and because the value is 1, the sort is ascending.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  sort: {\n    createdDate: 1\n  }\n})\n\nincludeUnpublished\n\nInclude content entries in a response that are still in draft mode and unarchived.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeUnpublished: true\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeUnpublished: true\n})\n\nnoTraverse\n\nThough the default is true, you can pass false to include Symbol JSON in the response. This is helpful if you want to render your page all at once such as in server-side rendering.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  noTraverse: false\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  noTraverse: true\n})\n\n\nContent API v3 is currently the default. Learn more in Content API Versions.\n\nTo experiment with the Content API, you can use the Builder API Explorer, which offers a way for you to compose queries in your own Builder Space. This way, you can confirm that your queries are correct before editing your code base.\n\nBuilder API Explorer"
  },
  {
    "title": "Settings - Builder.io",
    "url": "https://www.builder.io/c/docs/settings#organization-settings",
    "html": "Settings\n\nThere two levels of Settings, Organization and Space. By changing settings at the appropriate level, you can manage many settings for your Organization and for individual Spaces.\n\nThis document covers how to get to Organization and Space Settings, and includes links to related documentation on the many features available in Settings.\n\nOrganization Settings\n\nThe Settings section of your Builder account is where you manage your Organization, your Space(s), and users.\n\nTo get to your Organization Settings:\n\nLogin to Builder.\nEnter your Organization.\nClick on the Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Organization is named Enterprise Docs demos, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Organization will likely be different. However, getting to your Organization Settings is the same, regardless of plan.\n\nFor more information, read the following documents.\n\nUnderstanding Organizations: a conceptual overview of what an Organization is.\nManaging Your Organization: a how-to guide for the most common Organization tasks.\nSpace Settings\n\nTo get to your Space Settings:\n\nLogin to Builder.\nEnter the Space you'd like to manage.\nClick on the Account Settings icon at the bottom left of the UI.\n\nThe following video shows this process. In this case, the Space is named My Favorite Space, a space we use for our documentation demo videos and screenshots.\n\nThe name of your Space will likely be different. However, getting to your Space Settings is the same, regardless of plan.\n\nFor more information, read the following documentation.\n\nUnderstanding Spaces: a conceptual overview of what a Space is.\nManaging Spaces: a how-to guide for the most common Space tasks.\nLogging out of your account\n\nTo log out of your Builder account:\n\nGo to Space Settings or your Organization Settings (either one works).\nClick on the cog icon at the upper right.\nSelect Log Out.\n\nThe following image shows where the Log Out option is in Settings:\n\nWhat's next\n\nThrough Account Settings, you can manage many settings, and finetune Builder features for your team, including:\n\nOrganization\nSpaces\nUsers for your organization as well as your Space(s)\nRoles and Permissions\nPublic and Private API Keys\nSubscription\nBilling\nTargeting Attributes\nSocial Media integrations\nEnvironments"
  },
  {
    "title": "Tracking metrics with the Insights tab - Builder.io",
    "url": "https://www.builder.io/c/docs/viewing-metrics-from-the-insights-tab",
    "html": "Viewing Metrics with Insights\n\ngrowth plans\n\nYou can view metrics, such as engagement and conversion for Pages and Sections, using the Insights tab in the Visual Editor.\n\nThe Insights tab dashboard displays built-in as well as custom event metrics. Finally, you can visualize clicks, taps, and conversions using the heatmap.\n\nInsights dashboard\n\nNavigate to the Insights tab by selecting Insights near the top of the Visual Editor.\n\nThe Insights tab displays the dashboard and features the following data:\n\nMetrics table and charts: view built-in metrics including data such as impressions, clicks, conversions, and any of your custom event metrics.\nTime range: specify the time period of the data displayed by the overview dashboard.\nDownload CSV and customize metrics: click the three-dots button to download an overview dashboard data in CSV format. You can also customize displayed metrics using built-in events such as clicks or your own custom events.\n\nThe image below is an example default Insights dashboard.\n\nVisualizing clicks, taps, and conversions using the heatmap\n\nAll of your pages have a heatmap for visualizing your users' clicks and taps. The heatmap also correlates page interactions with conversions.\n\nTo get started, select View heatmap from the Insights tab.\n\nThe heatmap's features are as follows:\n\nHeatmap options: you can control the relative intensity and size of your map's hot spots using the sensitivity slider. Set a date range for input data and toggle whether to display conversion data.\nHot spots: these multicolored areas show user clicks and taps. Blue and green indicate areas with less user interaction while yellow, orange, and red indicate areas with more user interaction.\nSection overlays: hovering over a content section brings up an overlay that displays the number of clicks, click-through rate, and conversion value for that section.\nCreating a custom dashboard\n\nenterprise plans\n\nEnterprise customers can create their own fully-customizable dashboards. Developers can also modify these dashboards using custom SQL queries.\n\nFor more information, see Building custom dashboards."
  },
  {
    "title": "Intro to Integrating Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-intro?_host=www.builder.io",
    "html": "Integrating Custom Components\n\nYou can expand on Builder's selection of built-in blocks by registering components from your codebase with Builder. Then, teammates can drag and drop your components within Builder's Visual Editor just like any other block.\n\nYou can use components you code yourself or third-party components with Builder.\n\nGet Started\n\nUsing your custom components in Builder's Visual Editor is a minimal process:\n\nStep 1: Register Custom Components with Builder, which requires minimal code setup.\nLearn to register your components\nStep 2: Use your component in the Visual Editor by dragging and dropping your component like any other block and customizing it in the Visual Editor.\nUse cases for integrating custom components\n\nCustom components are ideal when you want to accomplish goals such as:\n\nAdding unique functionality to your site for special use cases\nSystematizing design and content patterns\nStandardizing your design system with custom components-only mode, which makes only your custom components available for use in the Visual Editor\nCustomizing blocks\nOverriding built-in blocks\nFurthering your customized experience\n\nAfter you've set up custom components in Builder you can customize your team's experience even further by:\n\nUsing Builder Blocks in Custom Components\nOverriding Built-in Components\nVersioning Custom Components\n\nNext steps\n\nTo get started using your custom components in Builder, head over to Registering Custom Components with Builder."
  },
  {
    "title": "Querying Cheatsheet - Builder.io",
    "url": "https://www.builder.io/c/docs/querying",
    "html": "Querying Cheatsheet\n\nThis document is a quick reference for query operators you can use to query anything that's on your content objects.\n\nTo experiment with querying your content from within Builder, you can use the Builder API Explorer.\n\nThis document covers the following operators:\n\nComparison Operators\n\n$eq\n\n$gt\n\n$gte\n\n$in\n\n$lt\n\n$lte\n\n$ne\n\n$nin\n\nLogical Operators\n\n$and\n\n$not\n\n$or\n\n$nor\n\nElement Operators\n\n$exists\n\n$type\n\nArray Operators\n\n$elemMatch\n\nEvaluation Operators\n\n$regex\n\n$options\n\nMongoDB style queries for your Builder data\n\nWhen querying Builder data, you can use MongoDB style operators, such as:\n\nOperator\tDescription\n$eq\n\t\n\nUse to match values equal to a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.myCustomProperty.$eq': 'sale'\n  }\n})\n\n\n\n$gt\n\t\n\nUse to match values greater than a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$gt': 50\n  }\n})\n\n\n\n$gte\n\t\n\nUse to match values greater than or equal to a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$gte': 50\n  }\n})\n\n\n\n$in\n\t\n\nUse to match any of the values you specify in an array.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.evenMoreCustomAttributes.$in': '[1, 2, 3]'\n  }\n})\n\n\nWhen querying an array of strings, use JavaScript notation and pass an array of strings to the $in operator.\n\nbuilder.get('your-model', {\n  query: {\n    'data.evenMoreCustomAttributes.$in': '[\"myString1\", \"myString2\", \"myString3\"]'\n  }\n})\n\n\n\n$lt\n\t\n\nUse to match values less than a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.evenMoreCustomProperty.$lt': 100\n  }\n})\n\n\n\n$lte\n\t\n\nUse to match values that are less than or equal to a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.evenMoreCustomProperty.$lte': 100\n  }\n})\n\n\n\n$ne\n\t\n\nUse to match all values not equal to a specified value.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$ne': 'womens'\n  }\n})\n\n\n\n$nin\n\t\n\nUse to match none of the values specified in an array. This example excludes the numbers 50 and 51.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$nin': '[50, 51]'\n  }\n})\n\n\n\n$and\n\t\n\nUse to join query clauses with a logical and and return all documents that match the conditions of both clauses.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$and': '[ \n      { item: { $ne: 'hat' } }, { item: { $exists: true } } \n    ]'\n  }\n})\n\n\n\n$not\n\t\n\nUse to invert the effect of a query expression and return documents that do not match the query expression.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$not': 'hat'\n  }\n})\n\n\n\n$or\n\t\n\nUse to join query clauses with a logical or and return all documents that match the conditions of either clause.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$or': '[ \n      { quantity: { $gt: 5 } }, { price: 100 } \n    ]' \n  }\n})\n\n\n\n$nor\n\t\n\nUse to join query clauses with a logical nor and return all documents that do not match both clauses.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$nor': '[ \n      { price: 100 }, { closeout: true } \n    ]' \n  }\n})\n\n\n\n$exists\n\t\n\nUse to match documents that have the specified field.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$exists': true \n  }\n})\n\n\n\n$type\n\t\n\nUse to select documents if a field is of the specified type.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$type': boolean \n  }\n})\n\n\n\n$elemMatch\n\t\n\nUse to select documents if element in the array field matches all the specified $elemMatch conditions.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.anotherCustomProperty.$elemMatch': { \n      item: { $ne: 'hat' } \n    }\n  }\n})\n\n\n\n$regex\n\t\n\nUse to select documents where values match a specified regular expression.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.someNumber.$regex': /pattern/\n  }\n})\n\n\n\n$options\n\t\n\nUse to specify options to use with $regex.\n\nJS\nREST API\nbuilder.get('your-model', {\n  query: {\n    'data.someNumber.$regex': \n    'pattern&query.data.someNumber.$option=gi'\n  }\n})\n\n\nFor more detail about available options, refer to the MongoDB $regex documentation.\n\nDescriptions for the above operators adapted from MongoDB per the Creative Commons License as referenced on the MongoDB Documentation GitHub repo. For more in-depth information on the query operators above, see MongoDB's documentation on Query and Projection Operators.\n\nWhat's next\n\nFor more information on querying, see the Content API documentation."
  },
  {
    "title": "How to make a Symbol - Builder.io",
    "url": "https://www.builder.io/c/docs/make-a-symbol",
    "html": "Making a Symbol\n\nYou can use Symbols to create and control content that you can use in multiple places throughout your app. This article guides you through creating and updating a Symbol.\n\nPrerequisites\n\nTo get the most out of this document, make sure you are familiar with the following:\n\nReusing blocks: get to know the different types of reusable blocks, which include Symbols.\nIntroduction to Symbols\nOpening and editing Symbols\n\nThe following video walks through the process for creating a Symbol, and below the video the steps are outlined.\n\nCreating a Symbol\n\nTo create a Symbol:\n\nSelect the block you'd like to convert to a Symbol and click on the arrow next to the Edit button.\nClick Convert to Symbol.\nIn the dialogue, name your Symbol and leave the Model field with the default Create Symbol Model text.\nClick the Convert button.\n\nYour Symbol is ready to use throughout your Space.\n\nTip: If you've created your Symbol through the Models section, rather than converting a Block as in this article, you must Publish your Symbol to make it available for use.\n\nUpdating Symbols\n\nEdit your Symbol by selecting Edit and then the Edit Symbol button.\n\nThe Symbol opens so you can make your changes.\n\nTo Publish, select the green Publish button in the upper right of the Symbol.\n\nUsing a Symbol\n\nTo use your new Symbol in a page, in the Insert tab, select the My Symbols tab and drag and drop your Symbol block onto the page."
  },
  {
    "title": "Architecture Best Practices - Builder.io",
    "url": "https://www.builder.io/c/docs/architecture",
    "html": "Architecture Best Practices\n\nTo build your site most efficiently, use this guide's best practices for:\n\nStructuring your integrated app\nDeciding what goes into Builder and what stays in your code\nStructuring your integrated app\n\nBy using Builder's models with a few points in mind, you can establish a structure for your app that lends itself more readily to working in parallel. With this workflow, you can unblock teammates so that they can take care of more of their own needs to meet deliverables.\n\nUse one Page model\n\nA model is like a cookie-cutter, a paradigm that you can use over and over again to create infinitely varied creations.\n\nGenerally, you only need one Page model to reuse for multiple pages. A Page is distinct from a Section in that a Page requires a URL, while a Section does not. For more information on Page models, see Page Models.\n\nUse Section models for parts of Pages\n\nA Section is a part of a Page; for example, a banner, a marketing section on a product page, or a hero.\n\nAt Builder.io, we use Sections for the docs left side navigation, blog articles, and docs headers.\n\nFor more information on Section models, see Section Models.\n\nUse Data models for non-visual structured data\n\nStructured Data models are a key feature of any CMS, and best reserved for non-visual elements.\n\nIn most cases, a Section Model is the preferred choice, except for things that truly are purely data; such as blog authors, product information, or other needs that are best as minimal, structured data.\n\nExplore common integration patterns:\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nDeciding what goes into Builder\n\nWhen integrating your codebase and Builder, a best practice is to keep some things in Builder while keeping others in your code. This empowers all team members by giving each access to what they need to edit in a way that compliments their workflow.\n\nFor example, if you keep parts of your site that are visually based in Builder, non-developers can freely iterate on non-code parts of the app such as copy, design, and layout. In this way, developers can stay focused on the code.\n\nWhen deciding what goes into Builder and what stays in code, consider these points.\n\nKeep it in Builder if:\n\nA non-developer maintains it\nContent is conversion-driven\nInvolves repeated iteration\nContains ephemeral content\nFeatures layouts; regular and A/B testing layouts\n\nKeep it in code if:\n\nA developer maintains it\nInvolves nuanced logic\nIs static, unchanging data\nContains content that doesn't change often\nConsists of components that already exist in code\n\nThe following tree shows this same decision-making process for determining what goes into Builder and what stays in code:\n\nNext Steps\n\nWhen you use Builder best practices to architect your site, you help your team mates work in parallel by leveraging powerful features for each role. For more information on who does what, see:\n\nRoles and Permissions"
  },
  {
    "title": "Content API - Builder.io",
    "url": "https://www.builder.io/c/docs/content-api",
    "html": "Content API\n\nWith the Content API, you can make requests to retrieve data about any of your models within Builder. The Content API supports advanced query filtering with URL parameters to help you get exactly the data you need.\n\nUse cases for querying data could include searches, populating content for a collection, or getting all links that meet certain criteria.\n\nTo access this data, write queries with dot notation and, optionally, MongoDB style operators.\n\nFor more details on querying, see the Querying Cheatsheet.\n\nSet up\n\nTo start using the Content API, make sure to import the Builder SDK into your project.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\n\nAt the command line, use npm to install the Builder SDK:\n\nnpm install @builder.io/react\n\nIn your code, be sure to import the SDK:\n\nimport { builder } from \"@builder.io/react\";\nQuery requirements\n\nTo use the Builder Content API to retrieve data from your models, be sure to always provide the following request parameters in your queries:\n\nRequired: my-model-name (replace with your model's name)\nRequired: apiKey query param (replace with your Public API Key)\n\nAs an example, you'd replace my-model-name with the name of your model, such as page, and YOUR_API_KEY with your own Public API Key.\n\nhttps://cdn.builder.io/api/V3/my-model-name?apiKey=YOUR_API_KEY\nContent API query params\n\nThis section covers the available Builder Content API query params.\n\napiKey\n\nUse your API key when integrating with Builder.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\nbuilder.init(YOUR_API_KEY);\n\nquery\n\nMongoDB style query of your data.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from '@builder.io/react'\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n}\n\n// to get all entries from a page model that are using a specific symbol\n// where SYMBOL_ID is your Symbol's ID\nconst entry = await builder.get('page', {\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n});\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  query: {\n    id: 'abc123',\n    data: {\n      myCustomField: 'someValue',\n      someNumber: { $ne: 2 }\n    }\n  }\n})\n\n// get all the entries from a page model that are using a specific symbol \n// where SYMBOL_ID is your Symbol's ID\nconst entry = await fetchOneEntry({\n  model: 'page',\n  query: {\n    'meta.symbolsUsed.SYMBOL_ID': true\n  }\n})\n\n\nBuilder supports the following operators: $eq $gt $in $lt $lte $ne $nin $and $not $or $nor $exists $type $elemMatch $gte $regex $options. For more information, including examples, see the Builder Querying Cheatsheet.\n\nuserAttributes\n\nOptionally use to send targeting attributes.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  userAttributes: {\n    urlPath: '/about',\n    device: 'desktop',\n    userLoggedIn: true\n  },\n})\n\nfields\n\nOnly include these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  fields: 'id, name, data.customField'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    fields: 'id, name, data.customField'\n  }\n})\n\nomit\n\nOmit only these fields.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  omit: 'data, bigField, data.blocks'\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  options: {\n    omit: 'data, bigField, data.blocks'\n  }\n})\n\nlimit\n\nMax number of results to return. The default is 30 and the maximum is 100.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entries = await builder.getAll('my-model-name', {\n  limit: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchEntries } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entries = await fetchEntries({\n  model: 'my-model-name',\n  limit: 10\n})\n\noffset\n\nUse to specify an offset for pagination of results. The default is 0.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  offset: 10\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  offset: 10\n})\n\n\nTo fetch all content beyond the limit of 100, use limit and offset together by paginating results and making multiple API calls as follows:\n\nconst limit = 100;\nlet offset = 0;\nconst pages = await getResults({limit, offset});\nwhile(pages.length === (limit + offset)) {\n  offset += pages.length;\n  pages.push( ... (await getResults({ limit, offset}));\n}\nreturn pages;\n\nFor more detail, see this forum post and this forum post.\n\nincludeRefs\n\nInclude content of references in response.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeRefs: true\n})\n\n\nUse the next example with the React (beta) SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeRefs: true\n})\n\ncacheSeconds\n\nSeconds to cache content. This sets the maximum age of the cache-control header response header. Set value higher for better performance, and lower for content that changes frequently.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  cacheSeconds: 10\n})\n\nstaleCacheSeconds\n\nBuilder.io uses stale-while-revalidate caching at the CDN level. This means Builder always serves from edge cache and updates caches in the background for maximum possible performance.\n\nIn this way, the more frequently content is requested, the fresher it is. The longest Builder holds something in stale cache is one day by default, but you can set this to be shorter if needed. We suggest keeping this high unless you have content that must change rapidly and gets very little traffic.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  staleCacheSeconds: 86400\n})\n\nsort\n\nProperty to order results by. Use 1 for ascending and -1 for descending.\n\nThe key is what you're sorting on, so the following example sorts by createdDate. and because the value is 1, the sort is ascending.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  sort: {\n    createdDate: 1\n  }\n})\n\nincludeUnpublished\n\nInclude content entries in a response that are still in draft mode and unarchived.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  includeUnpublished: true\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  includeUnpublished: true\n})\n\nnoTraverse\n\nThough the default is true, you can pass false to include Symbol JSON in the response. This is helpful if you want to render your page all at once such as in server-side rendering.\n\nREST API\nJS\nNext\nApp Router\nQwik\nReact\nReact Native\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nimport { builder } from \"@builder.io/react\";\n\n// replace model with your model name\nconst entry = await builder.get('my-model-name', {\n  noTraverse: false\n})\n\n\nUse the next example with the React (beta) SDK and React-Native SDK.\n\nimport { fetchOneEntry } from '@builder.io/sdk-react'\n\n// replace model with your model name\nconst entry = await fetchOneEntry({\n  model: 'my-model-name',\n  noTraverse: true\n})\n\n\nContent API v3 is currently the default. Learn more in Content API Versions.\n\nTo experiment with the Content API, you can use the Builder API Explorer, which offers a way for you to compose queries in your own Builder Space. This way, you can confirm that your queries are correct before editing your code base.\n\nBuilder API Explorer"
  },
  {
    "title": "Using Custom Targeting - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-targeting-attributes",
    "html": "Custom Targeting\n\ngrowth plans\n\nLearn how to create custom targeting attributes in Builder.io to go beyond the built-in targeting options.\n\nPrerequisites:\nYou may want to read Targeting Content in Builder if this topic is new to you.\n\nThe short video below explains custom targeting attributes.\n\nYou can set custom targeting attributes to conditionally render content based on complex criteria. For example, you can:\n\nHave an announcement bar appear when a customer adds a certain item to their cart.\nDisplay different pages depending on a user's current stage in your onboarding flow.\nCustomize a sidebar depending on a user's profile.\n\nUsing Builder's built-in types, custom targeting attributes offer a straightforward way to allow your team to specify arbitrary targeting conditions using strings and booleans. Using custom types further allows your team to create targeting conditions based on input from forms, color pickers, calendars, and other rich user interfaces.\n\nSetting up a custom targeting attribute\n\nYou can set up a custom targeting attribute on the Account page, which enables you to use that attribute when targeting any content across your space.\n\nFrom the Account page, click the Edit pencil for Custom targeting attributes.\n\nClick New target attribute.\n\nYou can add a new custom targeting attribute from the Custom targeting attributes window using the following properties:\n\nName: The name of your custom targeting attribute.\nType: Your attribute's type determines the editor UI that pops up when a user targets content using your attribute. For example, users may enter text for a targeting attribute that has a string type inside of a text box, while a boolean type attribute presents the user with a toggle switch.\nEnum (string type only): Restricts user input for the string type to a multiple-choice selection of strings.\n\nClick Save to create your new custom targeting attribute.\n\nTargeting content with custom targeting attributes\n\nYou can target content with your custom targeting attributes by creating targeting conditions using those attributes.\n\nThe process is the same as targeting with built-in attributes; the only difference is that your custom targeting attributes appear in the list of attributes to choose from when creating a targeting condition.\n\nThe example below features two custom targeting attributes called Some string and Some product.\n\nRendering targeted content with custom targeting attributes\n\nTargeting works by matching the value of targeting data sent with a content API request to the value of your targeted content's targeting conditions. When you request content that uses the built-in Device or URL path targeting attributes, Builder automatically infers the targeting data from your request.\n\nWhen using custom targeting attributes, you can manually provide targeting data with your request either by using the JavaScript (JS) SDK or with query string parameters when requesting content using the content/GraphQL APIs.\n\nFor example, when requesting content that has a targeting condition named product that expects a product ID, you can set userAttributes when using the SDK:\n\nconst content = await builder.get('myTargetedContent', {\n  userAttributes: { product: product.id }\n}).promise();\n\n\nYou can alternatively use setUserAttributes to set the targeting attributes once across multiple content requests:\n\nbuilder.setUserAttributes({ product: product.id });\n\nconst content = await builder.get('myTargetedContent').promise();\nconst otherContent = await builder.get('myOtherTargetedContent').promise();\n\nFinally, when requesting content directly from the content or GraphQL APIs, you can pass the targeting attributes using query strings:\n\nconst response = await fetch(`https://cdn.builder.io/api/v2/content/my-model?apiKey=YOUR_API_KEY&userAttributes.product=${product.id}`)\n\nIf product.id matches the ID of the product selected for your targeting condition, then your content will be rendered.\n\nMatching custom targeting attributes with custom types\n\nIn order to know what targeting data to send with a content API request, it's important to know how a targeting attribute's type editor stores a user's input as a value.\n\nFor example, the editor for the built-in string type is a simple text box. The value entered inside this text box when adding a targeting condition is the value that must match the targeting data sent with your content API request for your content to be rendered.\n\nIn contrast, custom types generally provide editors with rich user interfaces, allowing users to provide complex inputs such as colors, forms, or products. How these inputs are represented as a stored value isn't always immediately clear and depends on the editor.\n\nFor example, the Shopify plugin's Shopify product handle custom type provides a searchable menu for selecting a product from a Shopify store. The editor stores the product's Shopify handle as the value.\n\nThe same plugin also provides a Shopify product custom type. Despite providing the same editor user interface for selecting a product, it stores the selected product using its Shopify ID.\n\nYou can refer to the documentation for the plugin that provides the custom type used by your custom attribute for more information on how the type's editor stores values.\n\nFor more information on passing parameters, check out the Builder Content API.\n\nNext steps"
  },
  {
    "title": "Introduction to Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/symbols-intro?_host=www.builder.io",
    "html": "Intro to Symbols\n\nWhen you want to create one element, reuse it throughout your site, and update all instances at once, use a Symbol. When you edit and Publish updates, the Symbol updates apply immediately to all occurrences of that Symbol throughout your app.\n\nYou can use Symbols for any content you want to reuse, such as a header, footer, or products. In fact, you can use it for repeated content that you want to use many places, such as a definition, an introductory paragraph or even a section of illustrated code.\n\nMake it once, reuse infinitely\n\nSave time by creating reusable elements such as headers, footers, navigation, and forms. Updates apply automatically to all instances of your Symbol.\n\nTo create your own Symbol, see How to create a Symbol.\n\nCustomizing your Symbols\n\nOccasionally, you might require an element like a product recommendation section or banner that needs to vary under specific conditions. In such cases, you can detach a Symbol from its source, Making a Symbol inline, which converts it into a standard Builder block. This way you can make inline changes for that particular instance.\n\nFor more on customizing Symbols, visit Adding Inputs to Symbols.\n\nTip: For a reusable component that you can edit individually, see Creating Templates. Templates are like Symbols, but when you edit a Template on a page, the other instances of that Template don't change.\n\nAdding a symbol to another account\n\nAt this time, you cannot transfer a symbol from one account to another. One workaround is to download your symbol and upload it to your other account.\n\nOpen the symbol you want to copy.\nRight click on the symbol and select Download content as JSON.\nCreate a new page in your other account, right click in the editor window, and select Upload builder.json file.\nWhat's next"
  },
  {
    "title": "Custom fields - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-fields",
    "html": "Custom Fields\n\nA field in Builder is a piece of data on a model. For example, the built-in Page model comes with two fields, a Title and a Description. These two fields help define what a Page is. Any time you make or edit any kind of model in Builder, you have the option of editing fields or adding custom fields.\n\nThe following video shows some example custom fields on the three kinds of models in Builder: the Page, Section, and Data models.\n\nPrerequisites\n\nTo get the most out of this document, make sure you've integrated Pages, Sections, or Data. The following tutorials give step-by-step instructions:\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate CMS data\n\nOverview of custom fields\n\nCustom fields are fields that you add to a model. You can add custom fields to models you create or to an existing model, such as the built-in Page model. All kinds of Builder models accept custom fields, so you can add the fields you need to Page models, Section models, and Data models.\n\nExamples of custom fields include data such as title, URL, name, timestamp, or any piece of data you want to define on a model. You define and specify aspects of your custom fields such as:\n\nType: There are many types available in Builder. Refer to Custom field types for more detail.\nLocalization: Translate fields according to region settings.\nDefault value: Pre-populate the custom fields you create.\nHelper text: Give your users a helpful hint about what to enter into the field.\nRequired: Make a field required or optional.\nEnum: Give users a predefined list of options.\nHidden: Make a given field hidden when editing content.\n\nThe following video shows where to find custom fields on a model, points out the available field Types, and then shows Page and Section custom fields in the Visual Editor's Option tab.\n\nAdding custom fields to a model\n\nYou can add custom fields to any model in Builder by doing the following:\n\nOpen the Model.\nClick the Edit Fields button.\nClick + New Field.\nName the field.\nChoose a Type.\nConfigure any other settings for the field and add additional fields as needed.\nScroll to the top and click Save.\n\nThe following video shows adding a custom field called name and date to a model.\n\nTo delete a custom field, click the x to the right of the field.\n\nUsing field values in your code\n\nTip: To interactively explore the data that is sent from the Builder API, check out the Builder API Explorer where you can query the Builder API using your actual data.\n\nCustom field types\n\nThe following table describes each Type in Builder along with an image of how each Type renders in the Builder UI.\n\nTip: This section covers the built-in types for models, but you can also make your own with plugins. For more information, see Making Your Own Plugins Overview.\n\nText\n\nText is analogous to the text type in HTML. With the Text type, you can specify minimum and maximum length.\n\nSelect\n\nCreates a select in content entries. With a select, teammates can choose from options you provide.\n\nLong Text\n\nLong Text accommodates multi-line text. With the Long Text type, you can specify minimum and maximum length.\n\nURL\n\nThe URL Type accommodates a URL, also known as a web address.\n\nFile\n\nUse the File Type to specify what kind(s) of file a user may upload to a custom field.\n\nNumber\n\nThe Number file type specifies that the value that the user enters must be a number.\n\nBoolean\n\nThe Boolean Type provides a toggle for a true/false setting.\n\nRich text/HTML\n\nThe Rick text/HTML Type provides a rich text interface with styling options and a toggle to write directly in HTML. Click the code icon, <>, at the upper right to toggle the HTML editor.\n\nDate\n\nUse the Date Type to accept a date from the user. When the user clicks on the input, a datepicker opens\n\nTimestamp\n\nUse the Timestamp Type to accept a date from the user. When the user clicks on the input, a date picker opens with a time picker. Though the Date and Timestamp Types appear similar, prefer Timestamp querying.\n\nColor\n\nUse Type Color to provide users with a color picker.\n\nList\n\nUse the List Type when for a series of items.\n\nReference\n\nUse the Reference type when you have Data entries that users choose from. For example, you could have a Blog Author custom field and when you click the Choose Entry button, all Blog Author Data entries display.\n\nMap\n\nText\n\nUse the Map type when you want users to provide a collection of key-value pairs.\n\nJavaScript\n\nUse the JavaScript type so users can provide JavaScript code snippets.\n\nCode\n\nText\n\nUse the Code type for accepting JavaScript, HTML, CSS, or other type of code.\n\nTags\n\nUse the Tags type for adding Tags. The field is empty by default. To add tags, type the tag you'd like and press Enter. Click the x to delete a tag."
  },
  {
    "title": "Targeting Content - Builder.io",
    "url": "https://www.builder.io/c/docs/targeting?_host=www.builder.io",
    "html": "Targeting Content\n\ngrowth plans\n\nTargeting content for specific audiences can help you drive customer acquisition and retention.\n\nYou can target content based on attributes such as whether customers have purchased from a specific collection, their current product page, or if they have a product with a specific tag in their cart. These are just a few examples—there are endless possibilities for targeting.\n\nPrerequisites\n\nTo get the most out of this article, you should be familiar with the following:\n\nTargeting and Scheduling Content\nTargeting options by plan\n\nTargeting options in Builder depend on your plan.\n\nAll plans come with the URL Path targeting attribute.\nGrowth and Enterprise plans offer both URL Path and Device targeting capabilities.\nWith Growth plans and above, can use your own Custom Targeting Attributes.\nBuilder provides e-commerce plugins for various platforms, each equipped with custom targeting attributes.\nAccessing targeting attributes\n\nTo use targeting:\n\nOpen the content entry for which you'd like to configure targeting.\nClick the Targeting icon at the top of the Visual Editor.\nIn the Targeting dialog, click +Target, and choose a property from the dropdown menu.\n\nAs an example, the following video shows targeting where the URL is /demo and the Device is mobile. This means this page is to be delivered when the device the visitor is using is a mobile device.\n\nTargeting by device with SSR? When using SSR or SSG, and targeting by device—such as mobile, tablet, or desktop—you must reference the targeted device in userAttributes as in the following example:\n\nuserAttributes: {\n    ...\n  device: \"mobile\"\n}\n\n\nFor more details on userAttributes, visit the userAttributes entry in the Content API documentation.\n\nFor a Next.js-specific example, refer to this example on GitHub for retrieving userAgent and device type server side.\n\nUsing order with targeting\n\nThe order of content entries in Builder determines how Builder evaluates and determines which content entry to deliver. Builder starts at the top of the list of entries at the specified URL and works its way down to find the entry to render.\n\nFor example, when you have multiple pages set up as alternatives for a specific targeting condition, they all share the same URL. When a user requests that URL, Builder checks each page in the list associated with that URL, starting at the top. The first page that meets the specified targeting condition is the version that is displayed to the user.\n\nExample\n\nConsider three versions of a homepage; home, home 2, and home 3. Each has different content, but they are all at the same URL, as in the following:\n\nhome 3, targeting mobile\nhome 2, targeting desktop\nhome (fallback), with no targeting\n\nHere's how Builder determines which Page to deliver:\n\nFirst, Builder considers all published Pages at the requested URL, /.\nIf home 3 has the Device targeting attribute set to Mobile, and your user visits yoursite.com from their phone, they get the content from home 3.\nIf home 2 targets Tablet, Builder delivers that Page to tablet users.\nThis example also has a fallback, home (fallback), just in case. It's a best practice to be sure all your conditions have a fallback Page in case none of the conditions are met.\n\nWhen you configure targeting, you establish a condition about a user and then deliver the appropriate content to that user. For example, you might want a user on a mobile device to have a different UI from a user on a laptop. Targeting statements follow the below pattern:\n\nWhere condition + operator + value\n\nBuilt-in conditions are:\n\nDevice\nURL Path\n\nSome examples of targeting statements are:\n\nWhere URL is /shoes\nWhere device is tablet\n\nThe operators available are:\n\nis means equal to the value\nis not means not the value. Available for conditions with one possible value; for example, a Boolean.\ncontains means the condition includes in it the string you specify for the value\nstarts with means the condition begins with the string you specify for the value\nends with means the condition ends with the string you specify for the value\n\nAdditionally, if you're on a Growth or Enterprise plan, you can customize targeting to meet your specific needs. For more information, see Custom Targeting Attributes.\n\nTargeting in-depth\n\nThe following video provides an in-depth introduction to targeting in Builder:\n\nFor more information targeting based on query parameters, visit this Builder Forum discussion.\n\nShopify custom attributes\n\nWith Shopify, Builder offers several ways to target content. For example, you can leverage your Shopify customer tags or if a user has specific items in their cart, you can display and even A/B test your content.\n\nDepending on the type of theme page you're working on, such as a homepage, a collection page, or a product page, Builder populates additional targeting parameters specific to the theme page."
  },
  {
    "title": "Section Models - Builder.io",
    "url": "https://www.builder.io/c/docs/models-sections",
    "html": "Section Models\n\nSection Models are the paradigm, or pattern, that defines what a Section is. When you make a Section content entry in the Content section of Builder, Builder uses the chosen Section model to create that Section content entry.\n\nThis document describes the following:\n\nAbout Section models\nFinding Section models\nHow to create a Section model\n\nIntegrate Builder Sections with your codebase\n\nWhen you integrate, non-coding team members can create as many Sections as they need for iterating, testing, targeting, and scheduling—leaving developers free to focus on the code.\n\nIntegrate Section Building\n\nAbout Section models\n\nA Section model describes a portion of a Page that your teammates can use in the Visual Editor. Use Section models to define editable parts of Pages, such as:\n\nAnnouncement bars\nMarketing sections on collection pages\nHeroes\nBlog posts\n\nLike Pages, you use Sections in the Visual Editor's drag-and-drop interface. Unlike Pages, however, a URL is optional for Sections.\n\nThe following image outlines an Add Block area of a Page. This area, a Section, is only a part of the Page.\n\nWith Sections, you can create your Section and then use targeting and querying to make it display in the right place at the right time. For more information, refer to Targeting and Scheduling Content.\n\nFinding Section models\n\nTo view the details of a Section model in a Space, do the following:\n\nGo to the Models section of the Builder UI.\nSelect the Section model.\n\nFrom within the Section model, you can edit and add fields. For details on fields in models, refer to Custom Fields.\n\nThe following video demonstrates the above steps for locating and opening a model. In this example, the Section model is named Blog article.\n\nCreating Section models\n\nYou can create Section models for any area of a Page. Section models are perfect for variations and iterating and you can create as many as you like.\n\nTo create and use a Section model, do the following:\n\nGo the the Models section of the Builder UI.\nClick the + Create Model button.\nChoose Section.\nIn the Model Display name field, enter the name you'd like this model to have when listed in the Models section of Builder. You can edit this later if you change your mind.\nName the model and fill out the Model Description field.\nClick Create.\nAdd any needed custom fields.\nClick Save.\n\nTo use the new Section model, integrate with your codebase and then your teammates can create content entries in the Visual Editor.\n\nThe following video shows how to create an example Blog article Section model then shows how to use the new model to create a content entry:\n\nNext steps\n\nModels are a foundational part of Builder that you can customize to countless use cases. For more information on what you can do with models, refer to the following documentation:\n\nUsing Custom Fields: You can edit or create many kinds of custom fields on models with a variety of types.\nTargeting and Scheduling: Get the right content to the right people at the right time."
  },
  {
    "title": "Creating a Page - Builder.io",
    "url": "https://www.builder.io/c/docs/create-page",
    "html": "Popular Tutorials\n\n>\n\nHow to Create a Page\nCreating a Page\n\nThis tutorial is an introduction to creating a blank page, dragging in a template, previewing, and publishing. Perfect if you're new to Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: < 1 minute\n\nPrerequisites\n\nTo get the most out of this tutorial, you should have the following:\n\nYou'll need a Builder account.\nAn evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.\nCreating a page\nGo to the Content section of Builder.\nClick + New and select Page.\nName the page; for example, About. Builder auto generates a URL based on the name you provide, but you can customize the URL if you like.\nChoose a template or use the blank template and create a page from scratch.\nWhen your page is ready, click the Publish button.\nTo view your page, click the eyeball icon next to the Publish button and choose View current draft or View live page. If View Live Page isn't clickable, be sure that you've published.\n\nThe following video demonstrates creating and publishing a Page:\n\nTip: For step-by-step instructions on building a landing page inspired by Everlane, check out Making a Landing Page.\n\nExtra: Page models, or how Builder defines Pages\n\nBuilder comes with a built-in Page model for you to use. The Page model is what defines a Page. When you create a Page content entry, as this tutorial shows, Builder uses the Page model to determine the characteristics the Page content entry.\n\nThe default Page comes with a Title and Description field. If you need to edit the default Page model or create additional models, check out Intro to Models. Working with models is an ideal way for developers to define content paradigms that all team members can use.\n\nNext steps\n\nTo get the most out of Builder Pages, start by Integrating Pages with your codebase. In this way, the developer can focus on the code while non-coding team members have the freedom to create and edit as many Pages as they like."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?_host=www.builder.io#builder-blueprints",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "Programming custom dashboards - Builder.io",
    "url": "https://www.builder.io/c/docs/programming-custom-dashboards",
    "html": "Programming Custom Dashboards\n\nenterprise plans\n\nYou can modify or replace the SQL, or Structured Query Language, queries in the table and chart blocks of your custom dashboards to fully customize their displayed metrics.\n\nPrerequisites\n\nTo get the most out of this document, you should be familiar with Using Custom Dashboards.\n\nEditing your custom dashboard's SQL queries\n\nYou can edit a custom dashboard's SQL queries by opening your dashboard in the Visual Editor.\n\nBegin by selecting the Edit button next to your dashboard inside the dashboards list on the Insights tab. If you don't have a custom dashboard yet, you can select New dashboard from the dashboards list to create one.\n\nYou can edit the SQL query or create your own inside the SQL editor in the Options tab on the right. As an alternative, Builder also provides a full-screen text editor that you can open by pressing the Edit full screen button above the editor.\n\nUsing JS interpolations, context, and inputs\n\nThe syntax for custom dashboard SQL statements is based on Google BigQuery.\n\nYou can additionally use JS interpolation with the ${} syntax to inject dynamic values into your query, as illustrated in the example below:\n\nSELECT *\nFROM @events \nWHERE \n  -- show results for the last week in milliseconds.\n  -- 8.64e+7 = 1 day in ms\n  _PARTITIONTIME >= \"${sqlDate(Date.now() - Number(inputs.sinceDaysAgo || 7) * 8.64e+7)}\"\n  ${context.content ? `AND CONTENT_ID = \"${context.content.id}\"` : ''}\nLIMIT 10\n\nInterpolated JS statements have access to the browser's JS API as well as the context and inputs objects.\n\nYou can use context to get additional information, such as the id of the current content, allowing you to make queries that target only that content.\n\ninputs is populated with the names and values of the inputs that you add to your SQL table or chart. You can add inputs by clicking on Show advanced in the options pane.\n\nIn the example below, we've added an enum text field input named userType that's displayed as a drop down options control on our custom dashboard. You can access the value of this control through inputs.userType in a JS interpolation.\n\nRunning ad hoc SQL queries on custom dashboards\nDefault event properties\nName\tType\tNotes\n\ntype\n\n\t\n\nstring\n\n\t\n\nThis is the event type: impression, click , conversion or if you're sending custom events, it'll be the type of your custom event.\n\n\n\n\ncontent_id\n\n\t\n\nstring\n\n\t\n\nOptional, will be in impression events.\n\n\n\n\nurl_path\n\n\t\n\nstring\n\n\t\n\nwindow.location.pathname\n\n\n\n\ndate\n\n\t\n\ntimestamp\n\n\t\n\nThe date of the event.\n\n\n\n\nurl_query_string\n\n\t\n\nstring\n\n\t\n\nwindow.location.search\n\n\n\n\ntest_variation_id\n\n\t\n\nstring\n\n\t\n\nOptional, will be in impression events on content that has a/b tests on, and it represents the variation that the user have seen.\n\n\n\n\ntarget_builder_element_id\n\n\t\n\nstring\n\n\t\n\nOptional, will be in click events on content, and it represents the builder block that the user interacted with, used in builder Heatmaps.\n\n\n\n\nsession_id\n\n\t\n\nstring\n\n\t\n\nIn all events, represents the session where this event happened.\n\nLimitations"
  },
  {
    "title": "Managing Your Organization - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-organizations#viewing-organization-insights",
    "html": "Managing Your Organization\n\nAn Organization is the top-most entity in Builder and contains users and Spaces.\n\nViewing and editing account details\n\nBuilder creates your first Organization automatically the first time you sign in.\n\nTo view or edit account details for your Organization, go to the Organization's Settings. With Admin permissions, you can:\n\nEdit the name of an Organization\nEdit and view billing information\nAccess private key information\nView invoices\nManage users\n\nThe following image is a screenshot of the Organization-level Settings, which features the Organization tab with account information and users, as well as the My Profile tab, which includes information about the name of the Organization and user account info. This document discusses each section in detail.\n\nManaging Spaces\n\nOrganizations contain Spaces. This means that you can access high-level data about a Space or create new a Space from within your Organization.\n\nAdding Spaces\n\nTo view all the spaces in an Organization, along with the number of users, bandwidth, and page views for those Spaces:\n\nGo to the Organization's Spaces tab.\nTo optionally filter data on the available spaces, click the three dots at the upper right and select a month and year.\nTo create a new Space within this Organization, click the + New Space button. Each space will have separate content, separate models, and separate Public API Keys.\n\nYou can also create a new Space by going to your Organization using the fly-out menu. Under your Organization, click + New Space.\n\nArchiving Spaces\n\nTo remove a Space from an Organization, you must archive that Space. Visit the Archiving a Space instructions in Managing Spaces.\n\nManaging payment and billing\n\nTo manage payment and billing information for your Organization:\n\nGo to the Organization Settings.\nTo the right of Payment, click Add Payment Info to add a credit card or Update Billing Info as required.\n\nSelf-Service customers can pay for the subscription with American Express, MasterCard, and Visa credit cards. Enterprise customers have the option of paying with ACH or wire transfer.\n\nViewing invoices\n\nTo view invoices for your Organization:\n\nGo to the Organization Settings.\nTo the right of Invoices, click View.\nAccessing invoices for Enterprise, Shopify, and Legacy plans\n\nEnterprise plans\n\nIf you need to change payment methods or access invoices, contact finance@builder.io.\n\nBuilder invoices for Shopify app users\n\nYou can find billing and invoices through Shopify's billing platform. Review your Shopify invoice to see any Builder charges.\n\nLegacy plans\n\nFor older accounts on legacy self-serve plans that only have a single space, you can see invoices within the Space Settings.\n\nManaging Private Keys\n\nPrivate API Keys help you keep certain content private. For detailed information on Private API Keys, see the Managing Private API Keys section of Using Builder API Keys.\n\nManaging users\n\nYou must have users at the Organization level as well as in the Space they work in. Set up your users in this order:\n\nSet up your users in the Organization.\nSet up your users in the Space you want them to access.\n\nFor detailed instructions, see Managing Users.\n\nViewing Organization insights\n\nenterprise plans\n\nViewing the contents of the Insights tab for an Organization is an add-on feature available on the Enterprise plan.\n\nWhen this feature is enabled, Admins can access data such as who the most active users are, which, for example, can inform re-allocating user licenses based on activity.\n\nAdmins for the Organization have access to the Organization Insights, accessible from the Builder left sidebar. Organization Insights show you, by Space:\n\nUser names\nUser e-mail addresses\nUser role\nLast sign-in date\nCreation date\nLast refresh date\nDeleting an Organization\n\nIf you need to delete an Organization, contact us.\n\nWhat's next\n\nTo learn more about what's inside an Organization, see Roles and Permissions, Settings, and Spaces.\n\nIf you want to jump right in, visit Popular Tutorials."
  },
  {
    "title": "Using Custom Dashboards - Builder.io",
    "url": "https://www.builder.io/c/docs/using-custom-dashboards",
    "html": "Using Custom Dashboards\n\nenterprise plans\n\nViewing a custom dashboard\n\nYou can create your own custom dashboards for visualizing your page metrics. For example, you can create a dashboard to show trailing metrics over a certain period of time or your most important KPIs, or Key Performance Indicators, at a glance. Developers can also customize your dashboard's data query to get advanced insights.\n\nPrerequisites\n\nTo get the most out of Builder's custom dashboard feature, you should have the following:\n\nA Builder account\nFamiliarity with the Insights tab. For an introduction to the basics, visit Viewing Metrics with Insights.\n\nCustom dashboards appear in the dashboards list on the right side of the Insights tab. Select a dashboard to view details.\n\n\n\n\nCreating a custom dashboard in the Visual Editor\n\nCeate a custom dashboard by selecting New dashboard from the Dashboards list on the Insights tab.\n\nCreating a new dashboard is similar to creating any other page in the Visual Editor in that you use blocks to build your dashboard piece by piece. Additionally, you can take advantage of two dashboard-specific features:\n\nTable and chart blocks: add any combination of Builder's pre-built tables and charts, which your developer can customize with SQL statements.\nType option: use this option to select Global or Content. Global makes your dashboard visible for every page in your space while Content makes your dashboard only visible in the Insights tab for the page you were editing when you selected New dashboard in the first step of creating your dashboard.\nBuilding a custom dashboard\n\nThis section shows you how to add a Top engaged content table block to a blank page.\n\nThe table in the editing area contains live engagement metrics for pages, in order of click-through rate by default.\n\nThe Options tab contains a text editor where you can customize the table's SQL query.\n\nRename the dashboard to Top engaged content and select Publish in the upper right corner.\n\nNavigate back to the Insights tab where you can select your new dashboard from the dashboards list to view metrics.\n\nCustomizing data queries for your dashboards\n\nfor developers\n\nEach dashboard receives data from an SQL, or Structured Query Language, query to Builder's database.\n\nBuilder's table and chart blocks gather data from an analytics database using built-in SQL queries. Builder's built-in queries cover the most common use cases, such as displaying the number of clicks and impressions.\n\nFor advanced use cases, developers can modify the default queries or provide their own. See the developer documentation Programming custom dashboards, for more details."
  },
  {
    "title": "Spaces - Builder.io",
    "url": "https://www.builder.io/c/docs/managing-spaces#copying-a-space",
    "html": "Managing Spaces\n\nA Space is a workspace where your team can collaborate to create, manage, and publish content. Marketers, writers, and designers can work with the graphical user interface while developers can integrate their code base, including custom components for non-coding teammates to use.\n\nThis document covers the basics of using a Builder Space.\n\nPrerequisites\n\nYou'll get the most out of this document if you are familiar with Understanding Spaces, which covers the concepts behind Spaces.\n\nAccessing a Space\n\nTo go to a Space:\n\nLog in to Builder.\nHover over the Builder logo in the upper left corner to expand the left side bar.\nClick the down arrow.\nHover over the Organization to display its Spaces.\nClick on the Space you'd like to access.\n\nThe following video shows using these steps to access one space called Docs Demo and then switch to another Space in the same Organization called Another Space.\n\nIf the Space you need isn't in the list but does exist in that Organization, contact your team's Admin to make sure they've added you to the Organization and Space.\n\nTip: If you're using the Builder Shopify app, each store is a separate Space. When you install the app on your store, a Builder Space is automatically created.\n\nManaging subscriptions\n\nBecause you can control your subscription plan per Space, you can select the most cost-effective subscription for a particular Space.\n\nTo view or edit your subscription for a Space:\n\nGo to your Space Settings.\nClick the Subscription tab.\nSelect the plan you want.\nCopying content from one Space to another\n\nIf you have more than one Space, you can copy content between those two Spaces.\n\nTo copy a content entry from one Space to another:\n\nFrom the content entry, click the three dots in the top right corner and select Copy to another space.\nChoose the Space to which you want to add the content. This will automatically route you to the space.\nYou can now create a new content entry or select an existing entry to copy the content into. If you want to make a new content entry, click + New and select the type of content entry to create.\nName your new entry and choose the blank template.\nWhen the new page opens, click Copy content in the bottom right corner to paste in the copied content.\n\nIf this is content you want to reuse frequently, you can save time by saving it as a template. See Creating Templates for specific instructions.\n\nThe following video demonstrates these steps to copy a full page of content from one Space to another:\n\nArchiving a Space\n\nTip: Archiving a Space cannot be undone.\n\nTo archive a Space:\n\nGo to Space Settings for the Space you want to archive.\nClick on the three dots at the upper right.\nSelect Archive.\nClick the OK button to confirm.\n\nThe next video shows this process.\n\nCopying a Space\n\nenterprise plans\n\nYou can duplicate an entire Space, including all of its content and models within the Builder UI or with the API.\n\nCopying a Space in Builder\n\nTo copy a Space in the Builder UI:\n\nGo to the Settings for the Space you want to copy.\nClick the three dots to the upper right and select Duplicate Space.\nName the new Space.\nClick the Duplicate Space button.\nBuilder provides a dialogue letting you know that the Space is being copied. Click the Close button.\nThe new Space appears in the flyout menu. Select your new Space to enter it.\n\nThe next video shows copying a Space and entering that Space to show the same content and models:\n\nCopying a Space with code\n\nTo copy a Space programmatically:\n\nCreate a new Space so you have somewhere to copy the existing Space to.\nCreate a Private API Key within the new Space.\nUse the following code:\n{\n    headers: {\n     Authorization: 'bpk-private-key'\n    },\n    method: 'POST',\n    body: {\n      spaceId: 'apiKey'\n      name: 'name of new space'\n    }\n}\n\n\nThis code represents the following:\n\nRequest headers: Include the Authorization header in the request with a value of 'bpk-private-key'. This indicates that you are using a Private API Key.\nRequest method: Use the POST method to send the request.\nRequest body: The request body is in JSON format and include the following properties:\nspaceId: Replace apiKey with the actual API key or space ID of the space you want to copy.\nname: Replace 'name of new space' with the name of the new space you want to create.\n\n4. Make your POST request to the API endpoint as follows:\n\nhttps://cdn.builder.io/api/v1/copy-space/create-space?apiKey={apiKey}"
  },
  {
    "title": "White-label Plugins and Embedding - Builder.io",
    "url": "https://www.builder.io/c/docs/white-labeling",
    "html": "White-label Plugins and Embedding\n\nenterprise plans\n\nenterprise add-on\n\nWith the White-label Add-on, Enterprise customers and partners can deeply customize the Builder interface to achieve a bespoke experience such as:\n\nEnabling completely custom user flows\nUsing your own branding\nEmbedding within your own application(s), leveraging your own authentication system\n\nIn the images below, Builder is completely customized with Enterprise branding, also known as white-labeling:\n\nWhite-labeling\n\nWhite-labeling in Builder is to change the look and feel of the visual editor to fit with the system you're embedding Builder in, which you can do with plugins.\n\nIntegration Partners\n\nPartners can integrate Builder into their own applications and tools as an optional add-on for their users.\n\nPlugins\n\nPlugins help you deeply customize Builder UIs and flows. White-label plugins enable even deeper customization to modify core user flows.\n\nimport { Builder } from '@builder.io/react';\n\n// Register some app settings\nBuilder.register('appSettings', {\n  settings: {\n    hideLeftSidebar: true, // Remove the default navigation\n    defaultRoute: '/apps/our-custom-app', // Replace the default content route\n  },\n  theme: {\n    colors: {\n      primary: 'rgb(220 130 86)',\n    },\n    // Provide any theme configuration for material UI v3\n    // https://v3.material-ui.com/customization/themes/#theme-configuration-variables\n    mui: {\n      typography: {\n        fontFamily: 'Arial',\n      },\n    },\n  },\n})\n\nEmbedding\n\nThis is an enterprise add-on, please talk with your account manager to get this set up.\n\nYou can embed your custom Builder space in your dashboard using the builder-app custom element:\n\n<script async src=\"https://cdn.builder.io/js/embedded-app\"></script>\n<builder-app api-key=\"YOUR_KEY\" token=\"YOUR_EMBED_TOKEN\"></builder-app>\n\nThis loads the space you specify and has some requirements.\n\nThe first requirement is getting an embed token in each session to verify the ability to embed the space under a specific domain, for example, passing the current domain to the following function:\n\nimport { createAdminApiClient } from '@builder.io/admin-sdk'\n\nasync function generateEmbedToken(\n  rootPrivateKey: string,\n  claims: { spaceId: string; domain: string }\n) {\n  const rootAdminSDK = createAdminApiClient(rootPrivateKey)\n  const { token, expires } = await rootAdminSDK.chain.mutation\n    .generateEmbedToken({\n      claims,\n    })\n    .execute()\n\n  return { token, expires }\n}\n\n\n\nThe second requirement is configuring an SSO provider on the embedded space programmatically prior to embedding; for example when creating the space:\n\nimport { createAdminApiClient } from '@builder.io/admin-sdk'\n\nexport default async function configureSSO(\n  spacePrivateKey: string,\n  config: { clientId: string; issuer: string }\n) {\n  const spaceAdminSDK = createAdminApiClient(spacePrivateKey)\n\n  const response = await spaceAdminSDK.chain.mutation\n    .addOIDCProvider({\n      settings: {\n        displayName: 'Auth0 connection',\n        issuer: config.issuer,\n        clientId: config.clientId,\n      },\n    })\n    .execute()\n\n  return response\n}\n\n"
  },
  {
    "title": "Creating a Private Plugin - Builder.io",
    "url": "https://www.builder.io/c/docs/private-plugins-setup",
    "html": "Creating a Private Plugin\n\nenterprise plans\n\nThis document guides you through the process of creating a private plugin. The steps for creating a private or public plugin are the same until you're ready to use your plugin in Builder. For a public plugin, you submit a PR to Builder's GitHub repo.\n\nFor a private plugin, which this document covers, you host and maintain the plugin yourself.\n\nAnyone on an Enterprise plan can make private plugins. However, if you'd like to go further and use your own branding with your private plugins, you'll need to add this feature on to your Enterprise plan.\n\nContact your Account Executive, email sales@builder.io, or reach out to us through our contact form.\n\nPrerequisites\n\nTo get the most out of this document, you should:\n\nHave an Enterprise plan\nHave a plugin you've made that's ready to add to Builder. For more information, see Making a Plugin, a tutorial for a basic plugin.\nHave your plugin code somewhere on GitHub.\nAdding your plugin in Builder\nGo to Account Settings.\nClick on the Pencil icon to the right of Plugins to edit your plugins.\nClick the Add Plugin button.\nAdd your CDN link for your repo. You can use any CDN to deliver your plugin. This example uses JSDelivr to deliver the plugin with the following format:\nhttps://cdn.jsdelivr.net/gh/{{ github user name}}/{{repo name}}/dist/plugin.system.js?pluginId={{plugin id in code}}\n\nWhere github username is your GitHub handle, repo name is the name of the repo you just created on GitHub, and plugin id in code is the name you specified in package.json. Leave out the curly braces, {{}}.\n\n5. Click the Save button.\n\n6. When saving is complete, click the Configure button in the notification at the bottom of the screen.\n\nTip: You can confirm that your plugin is available by pasting your completed JSDelivr URL into a browser address bar. If the contents of System.register(), displays, it is available for Builder to use.\n\nNext Steps\n\nUsing and creating plugins opens up countless possibilities. For more info on plugins, check out the following documents:\n\nBuilder.io plugin examples on GitHub"
  },
  {
    "title": "Using Templates across Spaces - Builder.io",
    "url": "https://www.builder.io/c/docs/using-templates-across-spaces",
    "html": "Using Templates across Spaces\n\nenterprise plans\n\nReusable parts of websites help you build and maintain your site efficiently. By default, Templates are available in the Space you create them in. So if you have more than one Space, a Template is available in only that one Space. However, you can also make a Template in one Space and use it in another.\n\nThis video shows you how to share a Template across your Spaces, and below the video is the list of steps.\n\nPrerequisites\n\nTo get the most out of this article, you should know how to create Templates. For step-by-step instructions on making Templates, read the following article:\n\nCreating Templates\nSaving Templates across Spaces\n\nWhen you create a Template, Builder prompts you with the dialog to name your Template. If you're on an Enterprise Plan, you can opt to share across Spaces in your Organization. When saving your Template, select the checkbox next to Save across all spaces in your organization.\n\nClick OK.\n\nTo confirm that you created the Template, check the Insert tab, under My Templates where you should see your new Template.\n\nUsing your Template in another Space\n\nAfter you've created your Template with the option to save it across all Spaces in your Organization, you can open another Space in the same Organization and see your Template in the My Templates section of the Insert tab.\n\nIn the same Organization, go to the Builder Spaces section of your account and open a different Space from the one where you created the Template.\n\nThis example is switching from my-app-2 to my test app.\n\nIn the new Space, open or create a page.\n\nOn the new page, go to the My Templates section of the Insert tab to see your new Template. Drag and drop it onto the page to use it.\n\nSharing an existing Template across Spaces\nHow to stop sharing an existing Template across Spaces"
  },
  {
    "title": "Smart Targeting - Builder.io",
    "url": "https://www.builder.io/c/docs/smart-targeting",
    "html": "Smart Targeting\n\nenterprise plans\n\nBuilder Smart Targeting uses historical API logs to suggest targeting attribute values, which in turn saves time, reduces errors, and provides customer data platform (CDP) insights.\n\nIdentifying diverse attribute values helps Builder to offer suggestions and autocomplete options when targeting new content to improve UX.\n\nPrerequisites\n\nTo get the most out of this document, make sure you're familiar with Targeting Content in Builder.\n\nActivating Smart Targeting\n\nTo activate Smart Targeting:\n\nGo to Account Settings.\nClick the pencil icon for Advanced Settings.\nClick Labs.\nChoose Predefined Attributes only or Full.\n\nAlong with the option to disable Smart Targeting—only applicable if it's already on and you want to turn it off—there are two settings for configuring Smart Targeting:\n\nPre-defined Attributes Only: Enrich the possible values with defined targeting attributes only.\nFull: Enrich both targeting attribute keys and values with historical values.\n\nThe video below shows activating Smart Targeting by choosing the Full option.\n\nTip: If you choose to use Predefined Attributes only, make sure to set up Custom Targeting Attributes to define attributes.\n\nTargeting content with smart targeting attributes\n\nTo use your smart targeting attributes, follow the instructions for targeting. Now your smart targeting attributes appear in the list of attributes to choose from when creating a targeting condition.\n\nFor example, in the image below, the most frequently used attributes are automatically in the list as options when setting up targeting:\n\nWhat's next\n\nFor more about CDPs and Builder, read Using Builder with Customer Data Platforms."
  },
  {
    "title": "SSO with Entra - Builder.io",
    "url": "https://www.builder.io/c/docs/sso-with-entra?_host=www.builder.io",
    "html": "Single Sign-On with Microsoft Entra ID\n\nenterprise plans\n\nThere are two main steps to setting up SSO with Builder and Microsoft Entra ID:\n\nConfiguring Entra by creating an application integration.\nConfiguring Builder by adding an Entra SAML Config.\n\nTip: Microsoft has recently renamed Azure AD to Microsoft Entra ID. As of September 25, 2023, some of the features related to Entra ID are still named Azure.\n\nStep 1: Configuring Entra\nNavigate to the Microsoft Entra (formerly Azure) Portal.\nGo to the Microsoft Entra, where and select Enterprise Applications.\nClick on New Application.\nClick on Create your own application. A dialogue opens where you can enter the name of your application and keep the default selected option Integrate any other application you don’t find in the gallery (Non-gallery) as below:\n\nAfter you create your application:\n\nGo to Single sign-on and select SAML as the single sign-on method.\nEdit the Basic SAML Configuration by setting these values:\nIdentifier (Entity ID): https://builder.io\nReply URL (Assertion Consumer Service URL): https://builder-3b0a2.firebaseapp.com/__/auth/handler\nSign on URL (Optional): https://builder.io/login/saml/your-provider-id\n\nAfter you save, the Basic SAML Configuration should include:\n\nIdentifier (Entity ID): https://builder.io\nReply URL: https://builder-3b0a2.firebaseapp.com/_/auth/handler\nSign on URL: https://builder.io/login/saml/builder-sso-saml\nRelay State: Optional\nLogoutURL: Optional\n\nThe screenshot below shows these values in context:\n\nNext, download the certificate from SAML Certificates as below:\n\nStep 2: Configuring SSO in Builder\nVideo demo\n\nThe video below, by one of our excellent engineers, goes through the process of setting up SSO with Entra (formerly Azure) and Builder, from beginning to end. (It wasn't initially made for the docs, but it is so perfect that we just had to add it!)"
  },
  {
    "title": "Request to Publish - Builder.io",
    "url": "https://www.builder.io/c/docs/request-to-publish",
    "html": "Request to Publish\n\nenterprise plans\n\nWith Builder's Roles and Permissions, Admins on an Enterprise plan can grant custom levels of access. With custom roles, an Admin can specify who can publish, and who must request publishing.\n\nUsers with publish access have a Publish button in the upper right of the Visual Editor, while those without publish access have a Request Publish button.\n\nBy requesting to publish, the user without publish permissions can submit a request to a user with publish permissions to publish content.\n\nPrerequisites\n\nTo use this feature, be sure to meet these criteria:\n\nYou're on an Enterprise plan\nThe person requesting publish is a user with a custom role that doesn't include permissions to publish.\nThe request recipient has permissions to publish.\n\nTip: All of Builder's standard roles include the access to publishing. However, if you'd like to restrict publish access, you must create a custom role, a feature available on Enterprise plans.\n\nRequesting to publish\n\nIn the Visual Editor, when you're ready to publish:\n\nClick on the Request to Publish button.\nSelect the name of the person you'd like to request publishing from. Teammates with publish permissions shows up in this list.\nAdd a note if needed.\nClick Send Request.\n\nThe Request Publish button deactivates and changes to Publish Requested. Builder posts your publish request as a comment in the Comments tab and tags the person you requested.\n\nReceiving a publish request\n\nWhen a teammate requests that a content entry be published, Builder adds a comment and tags the person or people they requested.\n\nIf you're the recipient of a publish request, by default, Builder sends you an email. Because this adds a new comment, Builder also displays a notification badge on the bell icon in the upper right of the Visual Editor.\n\nTo review, you can do any of the following:\n\nGo directly to the content entry's bell icon.\nGo to the content entry's Comments tab.\nFollow the link in the notification email.\n\nWhen you're ready for the content to go live, click the Publish button.\n\nThe video below shows the workflow using the bell icon:\n\nWhat's next\n\nFor more information on roles and how to configure permissions, see:\n\nRoles and Permissions\nCustom Roles"
  },
  {
    "title": "Content Governance - Builder.io",
    "url": "https://www.builder.io/c/docs/content-governance",
    "html": "Workflows and Rules for Content Governance\n\nprivate beta\n\nenterprise plans\n\nGain greater control over your content with Workflows and Rules. By combining the two, you can take a fresh approach to Content Governance for improved content quality, streamlined production, and better collaboration among team members.\n\nWorkflows: defining the creation process\n\nWorkflows allow companies to create a structured content creation process within the Builder.io platform. This means companies can define and manage stages, roles, and responsibilities that align with their internal processes.\n\nAn example might be a Blog Workflow with Stages of Draft, In Progress, Ready for Review, and Completed.\n\nRules: defining who can do what\n\nRules give companies greater control over their publishing process through flexible publishing permissions and stage requirements. With Rules, companies can set specific criteria for publishing content entries or for moving them through the Workflow process. Examples might include:\n\nOnly allow users who have a custom role of “Editor” to approve a content entry for publish.\nOnly allow user “Janet” to publish when the locale is “English” for the “English Content” workflow.\nSetting Up Workflows\n\nBy implementing Workflows in Builder.io, companies can streamline their content creation process and ensure that content is produced in a consistent and structured way.\n\nTo create a new Workflow, go to Account Settings, select Content Governance, and click the + New Workflow button.\n\nGive your Workflow a name and a description that will help team members understand its purpose and scope.\n\nWithin the Create Workflow dialogue, you can:\n\nSelect the Workflow Owner(s). This allows specific users to have administrative rights to control all aspects of the workflow and along with super rights to move stages without Rules being applied.\nSelect which models to apply this Workflow to.\nAdd Stages for the Workflow.\nEnable or disable the Workflow.\nAdding Stages\nDefine the stages of your workflow by clicking the Add Stage button.\nEach stage represents a specific step in the content creation process, such as ideation, drafting, editing, and approval.\nAssign roles and responsibilities to team members for each stage. You can assign individual users or a role to a single stage for who is allowed to move a stage and who is allowed to edit content in the specific stage.\nOptionally, you can apply a Rule to the specific stage to requirements to move from this stage and publishing rights for the content entry.\nSetting up Rules\n\nWith Rules, companies can set publishing permissions and stage requirements to ensure compliance with internal guidelines.\n\nTo create a new Rule, go to Account Settings, select Content Governance, and click Rules on the left.\n\nClick the + New Rule button to define a new rule for your content process.\n\nGive your Rule a name and a description that will help team members understand its purpose and scope.\n\nWithin the Create Rule dialogue, you can:\n\nSelect what specific user(s) and/or role(s) is allowed to grant approval for this specific rule.\nSelect which locales to apply this Rule to.\nSelect which models to apply this Rule to.\nOptionally, you can open Show Advanced to add specific validations that will be applied to content entries for this rule.\nEnable or disable the Rule.\nApplying a Rule to a Workflow Stage\n\nWhen you set up a rule, it applies to all content within the defined stages, which helps maintain compliance with internal guidelines throughout the content creation process.\n\nTo apply a Workflow Stage:\n\nGo to Account Settings, select Content Governance, and click the + New Workflow button.\nClick on the Workflow that you want to apply the Rule to or create a new Workflow\nSelect the stage that you want to apply the Rule to\nType in the Rule you want to add to the specific stage within the “Rules for this stage” input.\nClick Save to apply the Rule to the selected stage.\n\nBy using Rules in combination with Workflows, companies can ensure that content is created, reviewed, and published in accordance with internal guidelines and standards."
  },
  {
    "title": "Builder.io - Single Sign-On with Okta - Builder.io",
    "url": "https://www.builder.io/c/docs/single-sign-on-with-okta",
    "html": "\n\n\nSingle Sign-On with Okta\n\nenterprise plans\n\nIf your organization is using Okta as an identity provider, you can set up Single Sign-On (SSO) with either OIDC or SAML 2.0. This guide covers both methods of integrating with Okta.\n\nPrerequisites\n\nTo get the most out of this guide, you must be:\n\nOn an Enterprise plan\nAn Organization Admin\nUsing Okta with Builder\n\nThere are two main steps to setting up SSO with Builder and Okta:\n\nConfiguring Okta by creating an application integration\nConfiguring Builder by adding Okta\nIn Okta: creating an OIDC app integration\n\n1. Go to your Okta Dashboard and expand the Applications section. The URL takes the following format: https://my-org-admin.okta.com/admin/apps/active.\n\n2. Click Applications.\n\n3. Click the Create Application Integration button.\n\n4. In the dialogue that opens, choose OIDC - OpenID Connect for the Sign-in method.\n\n5. For the Application type, choose the type of application you're developing.\n\n6. Click Next.\n\n7. Name the app integration Builder.io.\n\n8. Add the Builder logo. Click the image below to open the logo in a new tab if needed.\n\n9. For Grant type, select Implicit(hybrid).\n\n10. Add the Sign-redirect URI:\n\nhttps://builder-3b0a2.firebaseapp.com/__/auth/handler\n\n11. Select an option in the Assignments section according to your needs.\n\n12. Click Save.\n\n13. In General Settings, uncheck Allow Access Token with implicit grant type.\n\nThe following video demonstrates this process in Okta:\n\nWhile in Okta, take note of your Client ID and your Issuer URL, which you need when you configure Builder. They are located as follows and as highlighted in the next image.\n\nClient ID: Okta Dashboard -> Applications -> General -> Client Credentials.\nIssuer URL: Click on your name in the upper right. Hover over the domain to copy.\nIn Builder: adding Okta to your Builder Organization\n\nTo integrate Okta with Builder:\n\nGo to your Organization Account Settings.\nClick the Pencil icon next to Sign Sign-On.\nFor SSO method, choose OpenID Connect.\nEnter a human-friendly display name. This is the name that your users will refer to.\nEnter a Provider ID for the SSO Name field. You'll use this to sign into Builder via a url such as https://builder.io/login/oidc/demo-org.\nEnter the Client ID that you noted during the Okta configuration. You can find it in your Okta Admin Dashboard -> Applications -> General -> Client Credentials.\nEnter your Issuer URL that you noted during the Okta configuration. Usually, it has the format of your-company.okta.com and you can find it in the menu that displays when you click on your name at the upper right of the Okta dashboard.\nTesting the integration\n\nOnce you've saved the SSO integration, you can test the login flow by logging out and visiting https://builder.io/login/oidc/<your-sso-name>.\n\nTip: You cannot use SSO if your browser doesn't support cookies. If you're in an incognito window ensure that cookies are enabled.\n\nAdding Builder to your Okta Dashboard\n\nYou can add the integration to your Okta dashboard so users can sign into Builder directly from Okta:\n\nGo to the Okta Admin Dashboard -> Applications -> General -> Login.\nAdd your SSO name that you configured above in the Initiate login URI field. For example, https://builder.io/login/oidc/<your-sso-name>.\n\nThe following image illustrates where to add the SSO name:"
  },
  {
    "title": "Adding SSO to Builder: Google Workspace - Builder.io",
    "url": "https://www.builder.io/c/docs/sso",
    "html": "Adding SSO to Builder: Google Workspace\n\nenterprise plans\n\nBuilder supports the industry standards, Security Assertion Markup Language (SAML) and OpenId Connect (OIDC). This means on single sign-on (SSO) integrates with any identify providers that support either. \n\nThis document covers how to integrate Google Workspace with SAML.\n\nStep 1: Creating a Builder account and contacting Builder\n\nSetting up SSO is a two-part effort in which you and Builder coordinate:\n\nCreate an account—the user you create the account with is your account owner.\nEmail Builder support at support@builder.io to enable SSO.\nContinue with the rest of the instructions in this document while we configure things on our end.\nStep 2: Creating a new SAML app in G Suite\n\nWhile we enable SSO for your organization, you can start setting up the SAML App in Google Admin. For more detailed instructions, follow the Google guide, Set up your own custom SAML application: Using SAML-based SSO.\n\n1. Navigate to your Google Admin account and visit your Apps page.\n\n2. Click on SAML Apps.\n\n3. Click the “+” icon or link to create a new app, then select the option at the bottom for Setup my own custom app.\n\n4. Save your SSO URL, Entity Id, and download your certificate, then click Next.\n\n5. You’ll see a form where you can enter the name of the App (such as, builder-io), a description (such as, Drag-and-drop Visual CMS”), and an icon:\n\n6. On the next screen, enter the Builder SAML information:\n\nACS URL: https://builder-3b0a2.firebaseapp.com/__/auth/handler\nEntity ID: https://builder.io\n\n7. Save service.\n\n8. After you create the SAML app, make sure you turn it on for all users or the group of users you would like to enable access for.\n\nStep 3: Adding the Google Workspace provider information to your Builder Account\n\nWith SSO enabled on your Builder account and an app, you can add your SSO details:\n\nGo back to your Builder Organization page.\nEnter the SAML information from your Google account above (SSO URL, Entity Id, and the certificate you downloaded).\nWhen choosing an SSO Name be aware that this is a unique name across all organizations in Builder, and it will be used to access your unique SSO login page; for example, https://builder.io/login/company-name. Choose something that is easy to bookmark or remember for you and your colleagues."
  },
  {
    "title": "Setting Up Environments for a Space - Builder.io",
    "url": "https://www.builder.io/c/docs/environments",
    "html": "Setting Up Environments\n\nin beta\n\nenterprise plans\n\nWhen you're developing and iterating on your product, you need a place to work freely while leaving your production code untouched. You might have a variety of environments such as Dev, Staging, QA, and Prod and push from one to the next as you work through the production cycle.\n\nWith Builder's environments, you can create environments to meet your company's workflow and sync environments, models, and content as needed.\n\nPrerequisites\n\nTo get the most out of this tutorial, you should have already have the following:\n\nBuilder Admin permissions in a space with an Enterprise plan\nCreating an environment\n\nBy default, Builder offers three environments for Enterprise plans, which include the main environment. This means that in addition to the main environment that an Enterprise plan starts with, you can create two more.\n\nIf you'd like to add more than two environments to bring your total environment count beyond three, contact your Account Executive, email sales@builder.io, or reach out to us through our contact form.\n\nGo to the Space Settings.\nOn the Environments tab, click the + New Environment button.\nIn the dialogue that opens, enter a name for the new Environment.\nClick Create Environment. You can close the Creating your new environment notification as the process runs in the background. When the environment is ready, the Synced status changes to Completed.\nClick Enter to go into the new environment.\n\nTip: When you create an environment, make sure to integrate in the same way you integrate the main Space. For detailed instructions, refer to Integrating Pages.\n\nThe following video demonstrates creating an environment.\n\nClick Enter to go into the new environment. To return to your main environment, select the main space from the top left sidebar or go to the Settings Environments tab and click Enter.\n\nSyncing of Organization settings in environments\n\nWhen an environment is created in Builder, it serves as a clone of the originating space. As a result, various settings from the original space are replicated in the environment during its creation. This includes user accounts, roles, and other space-level configurations.\n\nOrganization settings are not automatically synchronized between the original space and its associated environments after the initial creation.\n\nThis means that any changes made to the Organization settings in the original space, such as adding new users or modifying settings, will not be automatically propagated to the corresponding environments.\n\nExample\n\nSuppose the original space has five users with specific space settings enabled. During the creation of an environment, these users and their associated settings are duplicated in the environment.\n\nHowever, if you subsequently add new users or modify settings in the original space, those changes will not be reflected in the existing environments.\n\nTo ensure consistency between the original space and its environments, a manual re-sync process must be initiated. By performing a re-sync, you can update the environment to mirror the current state of the original space, including any changes made to organization settings.\n\nFor instructions on re-syncing, read Re-syncing an Environment.\n\nWhat's next\n\nAfter you've set up environments, be sure to read Using Environments to learn how to leverage the available features."
  },
  {
    "title": "Custom roles - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-roles",
    "html": "Defining Custom Roles\n\nenterprise plans\n\nenterprise add-on\n\nUse custom roles to create customized user permissions and workflows.\n\nIf you'd like to add this feature on to your Enterprise plan, contact your Account Executive, email sales@builder.io, or reach out to us through our contact form.\n\nPrerequisites\n\nTo define custom roles, make sure:\n\nYou're familiar with Builder's standard roles and permissions.\nYou have this feature as an add-on.\nTypes of permissions and access\n\nYou can define new custom roles that have any—or all—of the below permissions and access:\n\nPermission\tDescription\n\nPublish/Unpublish content\n\n\t\n\nUser can can publish or unpublish content entries.\n\n\n\n\nEdit designs\n\n\t\n\nUser can edit styles from the Style tab.\n\n\n\n\nAdmin\n\n\t\n\nUser can manage all users and billing.\n\n\n\n\nEdit code\n\n\t\n\nUser can add and edit code within Builder, such as custom HTML, CSS, JS.\n\n\n\n\nEdit layouts\n\n\t\n\nUser can add, remove, and rearrange blocks in the Visual Editor. When this setting is off, users can only edit options such as text and images.\n\n\n\n\nCreate content\n\n\t\n\nUser can add new content entries.\n\n\n\n\nAccess\n\n\t\n\nUser can access all models or models the Admin selects.\n\n\n\n\nLocale access\n\n\t\n\nUser can access all locales or locales the Admin selects.\n\nYou can adjust permissions at the Space level or on a per-content model basis. This means you can allow custom roles to only have access to certain models and, within each model, you can apply filters to make the control even more granular based on the fields, data, and targeting properties associated with the model.\n\nFor example, if you want to use the same model across multiple projects—such as domains, locales, or environments—within the same space, but only allow certain users to access/view specific projects using that model, then you can create a custom role for that purpose using model-specific permissions and filters.\n\nThe sections that follow demonstrate the process for specifying basic permissions as well as permissions based on models along with using filters.\n\nSetting permissions\nGo to Account Settings.\nClick the Pencil icon to the right of Roles.\nClick + New Role.\nGive the new role a Name and Description.\nChoose the Permissions you'd like. See the previous table describing each.\nClick Save.\n\n\n\n\nGranting permissions on a per-model basis\n\nWhen choosing permissions as above, you can specify particular models.\n\nFollow steps 1-5 above.\nSelect All Models if you'd like this role's permissions to apply to all models.\nDeselect All Models to display a list of all of the available models and choose the models to which you'd like to apply the permissions.\nRefining model permissions with filters\nTo further refine permissions when selecting individual models, expand that model and click + Filter.\nSelect the model's property to add permissions for that property.\nClick Save.\n\nThe following video demonstrates these steps.\n\nNote that you can select any of the locales that you have configured. Additionally, you can select the Default locale; that is, whichever locale you've specified as your default locale."
  },
  {
    "title": "Builder Support - Builder.io",
    "url": "https://www.builder.io/c/docs/help-and-support#ent-support",
    "html": "Getting Help\n\nWe're here to help empower our customers and make Builder the best product possible. If you have any questions or concerns, we provide a variety of channels to communicate directly with our team.\n\nOnline resources\n\nFor general how-to questions, the documentation is a great resource. For specific or nuanced questions, refer to the Builder forum.\n\nDocumentation\n\nBuilder documentation is extensive and constantly evolving. There are two main sections of the documentation with step-by-step guides:\n\nPopular Tutorials: A starting point for the most requested docs for using the Builder UI and Visual Editor.\nDeveloping with Builder: A collection of docs especially for developers.\n\nBuilder Forum\n\nThe Builder Forum discussions are a great way to connect with others, including the Builder team. Open to all plans, the Builder Forum is perfect for getting others' thoughts.\n\nContacting us\n\nThe Builder in-app help widget is the best way to get help.\n\nIf you're on a paid plan, you can generate a ticket through the widget:\n\nClick on the question mark icon at the bottom right of the Builder app.\nSelect Submit a Ticket.\nFill out the form that opens and click Send.\n\nWith this process, your help request generates a ticket, which enters the Builder support queue. When you submit a ticket through the in-app widget, you'll receive a confirmation email from Zendesk, and a team member will get in touch with you as soon as possible.\n\nYou can also always email us at support@builder.io.\n\nInformation to include\n\nWhether you're posting to the forum, emailing us, or submitting a ticket, the more information you provide, the better. Some suggestions of things to include in your message are:\n\nDescription of the question or issue you have\nLink to the relevant Builder page\nAny error messages related to your issue\nDescription of your steps in trying to resolve the issue\nAttachments of screenshots or videos, if available\nTypes of support Builder provides\nFree trial customers\n\nWhile on our 30-day free trial, you have access to Growth features, including our ticket widget and email support.\n\nFree subscription plan customers\n\nStandard (free) users can often receive help by posting in the Builder Forum. Builder also offers extensive documentation that might help you answer your questions. Upgrade to a paid plan to get access to our ticket widget and email support.\n\nBasic & Growth subscription plan customers\n\nIn addition to the forum, customers on our Basic and Growth plans can get in touch with Builder support using the ticket widget within the application or by emailing us at support@builder.io. Support is available 24 hours Monday through Friday, GMT time.\n\nGrowth customers have priority over Basic customers in the queueing system.\n\nWhile we try to help answer your questions as soon as possible, we cannot provide any code or styling support via the ticket widget or over email. If you need this type of assistance, please post in the forum.\n\nNote: We do not offer video/phone support and cannot guarantee response or resolutions times unless you are an Enterprise customer.\n\nEnterprise customers\n\nWe provide premium support to Enterprise customers, which includes:\n\nTicket queue priority\nSLA response times\nDedicated support through a Customer Success Manager\nDedicated support through a Customer Engineer\n\nImportant: SLA accountability requires that all support tickets be submitted through the in-app help widget or by email at support@builder.io.\n\nIf you're interested in learning more about Builder's Enterprise offerings, contact us."
  },
  {
    "title": "Start Building - Builder.io",
    "url": "https://www.builder.io/c/docs/start-building",
    "html": "LET'S BUILD TOGETHER\n\nPopular Tutorials\n\nThe documentation within Building Content features the Builder Visual Editor, an intuitive drag-and-drop editor where you can quickly build pages, sections, and leverage your data.\n\nFEATURED GUIDES\n\nMake a Landing Page\n\nBecome a Responsive Design Pro\n\nBuilder for Shopify\n\nLearn about Blocks\n\nTour the Visual Editor\n\nReuse Blocks to Work Smarter\n\nPOPULAR VIDEO TUTORIALS\n\nThe following collection of how-to videos walks you step-by-step through some of our customers' most requested project types.\n\nHow to Create a Page\n\nCreate a page. Perfect if youʻre new to Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: < 1 minute\n\nHow to Make a Hero Block\n\nCreate a full-width image that features a button and copy.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 3 minutes\n\nHow to Batch Upload Images\n\nUpload multiple pictures at a time into Builder.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1 minute\n\nHow to Make a Multi-column Section\n\nCreate a section with multiple images in columns that sit side-by-side at larger screen widths and stack on smaller screens.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2 minutes\n\nCreate a Full-width Two Column Section\n\nCreate a section that spans the whole viewport with a pull quote on one side and an image on the other.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 4 minutes\n\nHow to Make an Announcement Bar\n\nCreate a bar that spans the whole viewport with an announcement.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 1.5 minutes\n\nHow to Make a Full-Width Carousel\n\nCreate a section with multiple images that you can scroll through horizontally.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 2.5 minutes\n\nHow to Make a Footer\n\nCreate a footer that spans the viewport, contains a logo, and columns of links. These guidelines meet most use cases.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 10 minutes\n\nHow to Make a Footer Symbol\n\nCreate a footer Symbol with customizable inputs. If youʻre new to Symbols, be sure to check out Reusing Blocks first.\n\nSkill set: Advanced\n\nArea: UI only\n\nLength: 5 minutes\n\nCreate a Section with a Changeable Background\n\nMake a section with a background that changes when you hover over certain configured areas. Includes:\n\ninteractive example, also known as a fiddle\na preview so you can see the end result\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 17.5 minutes\n\nHow to Make a Grid Layout\n\nCreate a responsive grid layout with techniques that you can adapt to different designs.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 10 minutes\n\nMixing Content from Different Models\n\nLearn how to embed a section that displays data model content inside of a Next.js page. Includes:\n\nOverview of the video's contents\nNext.js and Shopify starter with Shopify plugin setup instructions\nCode for this tutorial\nLive demo\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 33 minutes\n\nBuild a Page with Templates\n\nUsing a pre-built Template, you can create your first Builder page quickly. Follow this tutorial to create your page in four steps. Then, have fun customizing your page.\n\nSkill set: Basic\n\nArea: UI only\n\nVideo coming soon\n\nGet Up and Running with the Visual Editor\n\nLearn your way around the Visual Editor by creating a page, using blocks, and styling your creation in this in-depth half-hour tutorial.\n\nSkill set: Basic\n\nArea: UI only\n\nLength: 29 minutes\n\nCreate a Site Theme\n\nChange site colors instantly with Data models that feature color pickers. Teammates can iterate on color palettes and make as many as they need.\n\nSkill set: Intermediate\n\nArea: UI only\n\nLength: 3 minutes\n\nSet Up Server-side Redirects with Next.js\n\nUse a Builder Data model with your Next.js app to redirect site traffic from one URL to another.\n\nSkill set: Familiar with code\n\nArea: UI and code\n\nLength: 2 mins\n\nSet Up and Use Product Data\n\nUse a Builder Data model to create Product Data and use that Data in the Visual Editor with data binding.\n\nSkill set: Intermediate\n\nArea: UI\n\nLength: 4 mins\n\nMake a Landing Page Series\n\nFollow this six-step tutorial to make a responsive landing page.\n\nSkill set: Basic\n\nArea: UI\n\nLength: Six 5-minute videos\n\nCreate a Countdown Timer Hero\n\nUse a built-in Builder template or custom code to create a countdown hero.\n\nSkill set: Basic OR familiar with code\n\nArea: UI or code\n\nLength: 21 sec for built-in template."
  },
  {
    "title": "Learning - Builder.io",
    "url": "https://www.builder.io/c/docs/learning",
    "html": "Learning Builder\n\nIf you're new to Builder and want to learn your way around, the Builder documentation has articles that cover the basics to get you started. The following categories are based on Builder roles and permissions.\n\nTip: If you're just starting out with Builder, check out Key Concepts first for context on how Builder works and an intro to common terms we use.\n\nContributors and Editors\n\nBecause Contributors don't edit layouts, they can focus on content such as copy and images. To get familiar with Builder, get up and running with our recommended learning path:\n\n1\n\nTour the Builder UI\n\nRecommended docs:\n\nLeft Sidebar\nVisual Editor\nTopbar\n\n2\n\nLearn how to create and edit content\n\nRecommended docs:\n\nBlock Types in Builder\nWorking with Images\nCreating Links\nFor Editors: Using Layers\n\n3\n\nGet acquainted with Builder workflows\n\nRecommended docs:\n\nRequest to Publish\nEditing Your Site Using the Builder Chrome Extension\nAdding Comments to Your Content\nDesigner\n\nTo get off to a good start, Designers should get acquainted with the Builder UI, its features made just for Designers, and how to apply the principles of responsive design in the Visual Editor.\n\n1\n\nLearn about responsive design\n\nRecommended docs:\n\nIntro to Responsive Design\nThe Box Model\nHow Width Affects Layout\nMargin and Padding\nUsing Breakpoints to Build Responsively\n\n2\n\nGet to know the UI\n\nRecommended docs:\n\nMake a Landing Page\nImporting Figma Designs\nUsing Alignment for Layout\nBest Practices\nAdmin\n\nIf you're an Admin, you might have many varied responsibilities, while still maintaining access and permissions in Builder for your team.\n\n1\n\nLearn about managing your account and users\n\nRecommended docs:\n\nRoles and Permissions\nUnderstanding Organizations\nAccessing Your Invoices\nUnderstanding Pageviews\n\nTip: If you need to create web experiences, make sure to check out the documents under Designer, in the previous section.\n\nDeveloper\n\nDevelopers have their own section of the documentation. To get started coding with Builder, check out Developing with Builder, which highlights some of the most frequently used documentation tailor-made for developers.\n\nNext Steps\n\nThis document laid out a roadmap to help you get the information you need to get up and running with Builder. The next step is to play with Builder and start creating with Builder's Popular Tutorials."
  },
  {
    "title": "Input types for custom components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-input-types#code-strong-list-strong-code",
    "html": "Input Types in Builder\n\nWhen you create custom components to use in Builder, there are two required inputs and a number of optional inputs to help you further customize your components. This document covers these inputs types in detail.\n\nThis document covers the following:\n\nRequired inputs: inputs you must use with your custom components\nOptional inputs for further customization: inputs that you can use to modify the look and behavior of your component in the Visual Editor\nInput type examples: definitions, code snippets, and a screenshot of input types in the Visual Editor\n\nTip: With plugins in Builder, you can create custom field types. For more information on using Builder's built-in plugins or creating your own, see Intro to Built-in Plugins and Making a Plugin.\n\nPrerequisites\n\nTo get the most out of this document, you should be familiar with Integrating Your Custom Components with Builder.\n\nRequired inputs\n\nWhen you register a component with Builder, you must include the name and type inputs as in the following table:\n\nName\tRequired\tDescription\n\nname\n\n\t\n\nYes\n\n\t\n\nA unique name for this input that should match the equivalent prop name on your React component.\n\n\n\n\ntype\n\n\t\n\nYes\n\n\t\n\nTypes correlate to what editing UI is appropriate to edit this field. Common types include:\n\n'string'\n'number'\n'boolean'\n'longText' // String type but with a multiline text field editor\n'richText' // Displays a rich text editor and provides the value as html\n'file' // Uploads a file and provides the value as a url string\n'color'\n'date'\n'email'\n'object'\n'list'\n'reference' // displays a content entry picker to reference\nOptional inputs for further customization\n\nYou can use additional inputs to further customize your components in Builder. The following table contains Builder's optional inputs.\n\nName\tType\tDescription\n\nadvanced\n\n\t\n\nBoolean\n\n\t\n\nSet to true to put this component under the Show More section of the Options tab. Useful for things that are advanced or rarely used and don't need to be prominent.\n\n\n\n\nallowedFileTypes\n\n\t\n\narray\n\n\t\n\nFor the file input type, specify what types of files users can upload. This is an array that takes content-type files such as:\n\nallowedFileTypes: ['jpeg', 'png', 'mp4', 'gif', 'pdf', 'svg']\n\n\n\ndefaultValue\n\n\t\n\nany\n\n\t\n\nUse for showing an example value in the input form when creating a new instance of this component, to users understand its purpose.\n\n\n\n\nenum\n\n\t\n\narray\n\n\t\n\nFor any text-based field type, you can specify a set of options that the field can use.\n\nenum: ['option 1', 'option 2']\n\n\n\nfriendlyName\n\n\t\n\nstring\n\n\t\n\nThe name the Visual Editor displays for the input.\n\nfriendlyName: 'Open link in new tab',\n\n\n\nhelperText\n\n\t\n\nstring\n\n\t\n\nProvide text to help the end user know how to fill in this input. Displays below the input.\n\nhelperText: 'Some helpful description about how to use this input'\n\n\n\nmodel\n\n\t\n\nstring\n\n\t\n\nUse optionally with inputs of type reference. Restricts the content entry picker to a specific model by name.\n\nBuilder.registerComponent(ProductBox, {\n  name: 'ProductBox',\n  inputs: [{\n    name: 'metafields',\n    type: 'reference',\n    model: 'product-metafields'\n }]\n})\n\n\n\n\n\nonChange\n\n\t\n\nFunction\n\n\t\n\nProvide a function that is called whenever the value of the input is updated. Useful for more complex validation than regex or running custom logic when an input value updates.\n\n// Example of how to validate and limit the length \n// of a list input called myList\n// \n// Note: the function is stringified and evaluated in \n// the context of the parent window, \n// so don’t try to use any references to other \n// variables or functions that you might have \n// within the file that your component defined\nonChange: (options) => {\n  if (options.get('myList').length > 6) {\n    options.set('myList', options.get('myList').slice(0, 6))\n    alert('maximum items is 6, delete items to continue')\n  }\n}\n\n\n\n\nregex\n\n\t\n\nobject\n\n\t\n\nFor any input that results in a string value you can provide a regex to validate user input.\n\n regex: {\n    // pattern to test; such as \"^\\/[a-z]$\" \n    pattern: \"^\\/[a-z]$\",\n    // flags for the RegExp constructor; for example, \"gi\"  */\n    options: \"g\",\n    // message to display to end-users if the regex fails\n    message: \"You must use a relative url starting with '/...' \"\n  }\n\n\n\n\nshowIf\n\n\t\n\nFunction\n\n\t\n\nShow and hide the input dynamically.\n\noptions is an object with the current options, that is, values from inputs, that are set on the component.\nparent is the component definition,\nparentElements is an array of all the parent elements of where the component is placed\n\nFor example, to only show the input if the component is inside of a Columns component has the input myInputOption set to true, you could write a function as follows:\n\nshowIf: (options, parent, parentElements) => {\n  return options.get('myInputOption') \n    && parentElements.some(el => \n      el && el.component && el.component.name === 'Columns');\n}\n\n\n\nUse the state of other inputs via options to hide or show inputs that depend on one another. For example, you could show an input that opens a link in a new tab only if a link is present, instead of always showing all inputs.\n\n\n\n\nsubFields\n\n\t\n\nInput[]\n\n\t\n\nIf the input type is list , you must include the subFields property that is a list of inputs, with this same schema, for each list item.\n\n{\n      name: 'reviews',\n      type: 'list',\n      defaultValue: [ \n            { reviewText: 'hello' \n     }],\n      subFields: [\n\t{\n          name: 'reviewText',\n          type: 'string',\n          defaultValue: '\"You are \n          the best\"',\n        },\n        {\n          name: 'reviewAuthor',\n          type: 'string',\n          defaultValue: 'Jane Smith',\n        },\n        {\n          name: 'image',\n          type: 'file',\n          allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],\n          required: true,\n          defaultValue:\n         'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',\n        },\n      ],\n    }\n\n\n\n\nlocalized\n\n\t\n\nboolean\n\n\t\n\nYou can mark any input type with localized to get a separate value for each of the locales configured on your space.\n\n{\n  name: 'title',\n  type: 'text',\n  localized: true,\n}\n\nInput type examples\n\nThis section provides examples of the effects of input types in Builder and covers the following:\n\nInput type name\nDefinition of input type\nAlias/alternative input type you can use instead of the given input type\nScreenshot of input type's effect in Builder's Visual Editor\n\nTip: This section covers the built-in types for custom components, but you can also make your own with plugins. For more information, see Making Your Own Plugins Overview.\n\nboolean\n\nAn input field taking true or false.\n\n  {\n    name: 'darkMode',\n    type: 'boolean',\n    defaultValue: true,\n  }\n\ncolor\n\nProvides a color value, in hex or rgb, to a component.\n\n {\n    name: 'backgroundColor',\n    type: 'color',\n    defaultValue: '#fafafafa',\n  }\n\ndate\n\nTakes same formats as the date constructor for Javascript.\n\n  {\n    name: 'event',\n    type: 'date',\n    defaultValue: 'December 17, 1995 03:24:00', \n  }\n\nemail\n\nCreates an email value for a component.\n\n  {\n    name: 'signup',\n    type: 'email',\n    defaultValue: 'noreply@email.com'\n  }\n\nfile\n\nUploads a file and provides the value as a URL string. Refer to allowedFileTypes for details.\n\n  { \n    name: 'image',\n    type: 'file', \n    allowedFileTypes: ['jpeg', 'png'] \n  }\n\nlist\n\nA collection of items.\n\nAlias: array\n\n{\n      name: 'reviews',\n      type: 'list',\n      defaultValue: [ \n            { reviewText: 'hello' \n     }],\n      subFields: [\n\t{\n          name: 'reviewText',\n          type: 'string',\n          defaultValue: '\"You are \n          the best\"',\n        },\n        {\n          name: 'reviewAuthor',\n          type: 'string',\n          defaultValue: 'Jane Smith',\n        },\n        {\n          name: 'image',\n          type: 'file',\n          allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],\n          required: true,\n          defaultValue:\n         'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',\n        },\n      ],\n    }\n\n\nTip: list requires the defaultValue option.\n\nlocalized text\n\nA localized text input is a key/value object where the keys are the locales configured in your space. For more information, see Introduction to Localization with Builder.\n\n{\n  name: 'title',\n  type: 'text',\n  localized: true,\n}\n\nlongText\n\nSame as string type but with a multi-line text field editor.\n\n  {\n    name: 'description',\n    type: 'longText',\n    defaultValue: 'Builder is the first and only headless CMS with a powerful \n    drag-and-drop visual editor that lets you build, \n    optimize, and measure digital experiences with speed and flexibility'\n  }\n\n\nTip: If the text is to be formatted, use richText.\n\nnumber\n\nSpecifies that an input field expects a number.\n\n  {\n    name: 'amount',\n    type: 'number',\n    defaultValue: 20,\n  }\n\nobject\n\nA set of specific names and values.\n\n  {\n      name: 'Carousel',\n      type: 'object',\n      defaultValue: {\n         variant: 'primary'\n      },\n      subFields: [\n        {\n          name: 'text',\n          type: 'string',\n          required: true,\n        },\n        {\n          name: 'url',\n          type: 'url',\n          required: true,\n        },\n        {\n          name: 'variant',\n          type: 'string',\n          defaultValue: 'primary',\n          enum: ['primary', 'info', 'dark', 'light', 'warning'],\n        },\n      ],\n    }\n\n\nIf you have large objects with multiple fields:\n\nUse folded so that multiple inputs are rendered collapsed to preserve space on the screen.\nUse keysHelperText to provide helpful copy to the user.\n    {\n      name: 'HugeObject',\n      type: 'object',\n      folded: true,\n      keysHelperText: 'Pick a property to edit',\n      helperText: 'Edit this enormous object',\n      // Example of 30 subfields\n      subFields: Array.from({ length: 30 }).map((_, index) => {\n        return {\n          // Type can be whatever you need\n          type: index % 2 === 0 ? 'text' : 'file',\n          allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],\n          name: `prop${index}`,\n          helperText: `The helper text of prop ${index}`,\n        }\n      })\n    },\n\n\nTip: object requires thedefaultValue option.\n\nrichText\n\nDisplays a rich text editor and provides the value as HTML\n\nAlias: html\n\n  {\n    name: 'description',\n    type: 'richText',\n    defaultValue: '<b>This text is bold</b>'\n  }\n\nstring\n\nAny text, usually short in length and unformatted.\n\nAlias: text\n\n  {\n    name: 'buttonText',\n    type: 'string',\n    defaultValue: 'Click',\n  }\n\nTags\n\nTags, usually short text for adding tags to your content entries.\n\n  {\n    name: 'blogTags',\n    type: 'Tags'\n  }\n\nAn example using icons\n\nIf you have a design system that features an icon set, you can use a custom component that takes an icon name as input. In this way, you can manage and distribute your icons across your app. Register your icon component as below:\n\n Builder.registerComponent(Icon, {\n    name: 'Icon',\n    inputs: [{ name: 'icon', type: 'text', enum: ['error', 'warning' ..] }]\n  },\n\nWhat's next\n\nEvery use case is unique. If you need further customization, you can add custom types with plugins."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/api-intro",
    "html": "Builder API Documentation\n\nBuilder's APIs gives you a wide variety of ways to leverage content and data quickly and efficiently.\n\nContent API\n\nMake requests to retrieve data about any of your Builder models.\n\nGraphQL API\n\nQuery your data by targeting attributes and custom fields.\n\nHTML API\n\nUse Builder to pre-render your components server-side.\n\nQwik API\n\nBuilder's ultra performance optimized alternative to the HTML API.\n\nWrite API\n\nCreate, delete, and update content in Builder.\n\nAdmin API\n\nA GraphQL API for back-end servers or trusted partners.\n\nWebhooks\n\nListen for content changes that should trigger workflows.\n\nWeb components API\n\nDisplay dynamic Builder content on any tech stack."
  },
  {
    "title": "Intro to Models - Builder.io",
    "url": "https://www.builder.io/c/docs/models-intro",
    "html": "Intro to Models\n\nA model is a paradigm—a pattern for something else. Builder offers three kinds of models that define content types:\n\nA Page model: The basis for a full Page built in Builder\nA Section model: The basis for a part of a Page.\nA Data model: Gives structure to a collection of data that you render as you choose.\n\nYou use these models as the defining source for content entries. Like a rubber stamp, the model provides a basic foundation. Each time you use a rubber stamp, the fundamental characteristics are the same but you might use the resulting image differently by varying other factors such as color and surface.\n\nSimilarly, with models in Builder you can define what a Page, Section, or collection of Data is and use those models over and over to build your site and populate it with content. And you can create as many models as you like.\n\nThe following graphic compares Builder models. Follow the Try it out link to play with a demo of each.\n\nVisual Pages\n\nTry out Pages\n\nUse Pages to manage entire pages, such as:\n\nMarketing and content pages\nLanding pages\n\nVisual Sections\n\nTry out Sections\n\nUse Sections to maintain parts of your site or app, such as:\n\nAnnouncement bars\nProduct editorial\nCollection heroes\nCart upsells\n\nStructured Data\n\nTry out Data\n\nUse Structured Data to manage structured data, such as:\n\nNavigation links\nProduct details\nBlog post authors\n\nAll models in Builder support:\n\nA/B Testing: Test different versions of your content.\nTargeting and Scheduling: Deliver the right content to the right people at the right time.\nRoles and permissions: Admins and Developers can edit models by default, but you can also specify permissions by content model using Custom Roles.\n\nThis means that you can granularly grant permissions, test, and precisely deliver content.\n\nExplore common integration patterns:\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nUsing models to build your app\n\nWhen you use models to build your app, you can create exactly the Pages, Sections, and Data specific to your use case. With your integrated app, you can, for example, use your Sections in the Pages you choose as well as reuse Data wherever you need it.\n\nExamples of models include:\n\nA seasonal announcement banner placed on a page between certain dates.\nMarketing tile targeting a specific persona on certain pages.\nBlog authors whose profiles you want to link to from different parts of your site.\n\nBy creating models for each type of content you need, you can ensure consistency while making the process of iterating more efficient. The developer creates and integrates a model and non-developer teammates can use that model to create as many content entries as they need.\n\nWhat's next\n\nTo get the most out of Builder Models, be sure to integrate and learn about each type of model:\n\nPage Model: Learn what a Page model is and how to use one.\nIntegrating Pages: Integrate Page building with your code base so non-dev team members can create as many pages as they need and developers can focus on code.\nSection Models: Learn about Section use cases and how to use Sections in your app.\nIntegrating Sections: Integrate Builder Sections with your codebase so teammates can create and use Sections wherever they need them.\nData Models: Give shape to data and learn how to query that data.\nIntegrating CMS Data: Integrate data to create reusable data across your site.\nCustom Fields: Learn about the wide array of options available for shaping your models."
  },
  {
    "title": "Intro to Integrating Custom Components - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-components-intro",
    "html": "Integrating Custom Components\n\nYou can expand on Builder's selection of built-in blocks by registering components from your codebase with Builder. Then, teammates can drag and drop your components within Builder's Visual Editor just like any other block.\n\nYou can use components you code yourself or third-party components with Builder.\n\nGet Started\n\nUsing your custom components in Builder's Visual Editor is a minimal process:\n\nStep 1: Register Custom Components with Builder, which requires minimal code setup.\nLearn to register your components\nStep 2: Use your component in the Visual Editor by dragging and dropping your component like any other block and customizing it in the Visual Editor.\nUse cases for integrating custom components\n\nCustom components are ideal when you want to accomplish goals such as:\n\nAdding unique functionality to your site for special use cases\nSystematizing design and content patterns\nStandardizing your design system with custom components-only mode, which makes only your custom components available for use in the Visual Editor\nCustomizing blocks\nOverriding built-in blocks\nFurthering your customized experience\n\nAfter you've set up custom components in Builder you can customize your team's experience even further by:\n\nUsing Builder Blocks in Custom Components\nOverriding Built-in Components\nVersioning Custom Components\n\nNext steps\n\nTo get started using your custom components in Builder, head over to Registering Custom Components with Builder."
  },
  {
    "title": "Intro to Plugins - Builder.io",
    "url": "https://www.builder.io/c/docs/plugins-intro?_host=www.builder.io",
    "html": "Intro to Plugins\n\nPlugins for Builder help you integrate a third-party service and customize nearly every part of Builder's Visual Editor and models.\n\nPlugins are a powerful tool for customizing the Visual Editor to make it easier for users to manage and create content.\n\nPlugins help you:\n\nCreate custom types.\nExtend the Visual Editor's user interface.\nTypes of Plugins\n\nThere are three types of plugins in Builder:\n\nBuilt-in plugins: On the Integrations page in Builder, use these ready-made plugins to help you integrate with e-commerce platforms and external data providers with minimal configuration. All plans can use the built-in plugins.\nPublic plugins: You code these and then submit a PR to add to the built-in integrations. Public plugins become part of the Builder ecosystem and when they're merged, Builder.io's engineers help maintain them. All plans can submit public plugins.\nPrivate plugins: You code these but they do not become part of the Builder ecosystem because you maintain them privately. Private plugins are available on all Enterprise plans while plugins with your own branding are available as an add-on for Enterprise customers.\n\nThe diagram below shows these points in a table form:\n\nUse cases for plugins\nBuilt-in Plugins\n\nUse built-in plugins for integrating your Builder account space with with e-commerce platforms and external data providers.\n\nBuilt-in plugins include everything in Integrations, such as:\n\nBigCommerce\nCommercetools\nCommerce.js\nFigma\nPartytown + Shopify\nSmartling\n\nFor a full list, see Integrations and for further documentation, refer to Overview of Built-in Plugins.\n\nPublic Plugins\n\nUse public plugins when you want to customize the Builder Visual Editor UI and you are willing to share your plugin with others. Common use cases for public plugins are:\n\nAdding your own custom types for a model, such as a rich text editor\nCustomizing the Builder Visual Editor\nTargeting content based on what users have in their cart\nCustomizing Symbol inputs\nCreating an action plugin to trigger events in Google Analytics\nAdding an image management plugin\nIntegrating with Shopify\n\nFor more details and instructions on creating plugins, see Extending the Builder UI with Plugins and Making a Plugin.\n\nPrivate Plugins\n\nCreate private plugins when you have needs specific to your company that you need to keep accessible only within your organization. Examples include:\n\nCustomizing the look and feel of Builder with your own branding\nAdding custom flows for creating e-mail campaigns\nNext Steps\n\nUsing and creating plugins opens up countless possibilities. For more info on plugins, check out the following documents:\n\nOverview of Built-in Plugins—an introduction to the plugins already available in Builder.\nMaking a Plugin—a tutorial on how to create your own plugin.\nBuilder.io plugin examples on GitHub"
  },
  {
    "title": "Resources for integrations - Builder.io",
    "url": "https://www.builder.io/c/docs/integrating-resources",
    "html": "Resources for Integrating Frameworks\n\nThis page is a collection of helpful links to extra resources on integrating a number of frameworks with Builder.\n\nFor a complete list of Builder framework examples, see the examples directory on the Builder GitHub repo.\n\nThe GitHub logo indicates that the resource is available on GitHub. Otherwise, the resource is a Builder blog post or document.\n\nAngular\n\nGatsby\n\niOS and Android\n\nMaterial UI\n\nNext.js step-by-step blog post\n\nNext.js examples\n\nNode.js and Express\n\nReact Native\n\nReact API Reference\n\nReact: Triggering Custom Actions\n\nReact Code Example: multiple pages\n\nReact Code Example: multi-page funnel\n\nReact Code Example: design system\n\nRuby on Rails\n\nSalesforce\n\nShopify Hydrogen\n\nStorybook\n\nSvelte (Sveltekit)\n\nVanilla JS\n\nVue 2 (Nuxt 2)\n\nVue 2 (Vue Storefront)\n\nVue 3\n\nWordpress\n\nOther frameworks\n\nBuilder is API-first and designed to work alongside other APIs, including proprietary frameworks. Depending on your use case, you can also consider using Builder's Write API or Making Your Own Plugin."
  },
  {
    "title": "SDK Comparison - Builder.io",
    "url": "https://www.builder.io/c/docs/sdk-comparison",
    "html": "SDK Comparison\n\nIf you want to use the latest, second-generation Builder SDKs, understanding how the imports might have changed for your framework can help you get started smoothly so you can leverage the many improvements and updates.\n\nTip: Currently, the React Gen 2 SDK is in beta. We recommend that you use the Gen 1 SDK for React and React-based frameworks.\n\nComparison: Gen 1 and Gen 2\n\nAt Builder, we refer to the two sets of SDKs as Gen 1 and Gen 2:\n\nGen 1: first generation of the Builder SDKs\nGen 2: second generation of the Builder SDKs\n\nUse the table below so that you reference the SDK for your framework correctly.\n\nFramework\tGen 1\tGen 2\n\nQwik\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-qwik\n\n\n\n\nReact*\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react\n\n\n\n\nNext.js\n\n\t\n\nstable\n\n@builder.io/react\n\n\t\n\nin beta\n\n@builder.io/sdk-react-nextjs\n\n\n\n\nVue**\n\n\t\n\nstable\n\n@builder.io/vue\n\n\t\n\nin beta\n\n@builder.io/sdk-vue/vue2\n\n@builder.io/sdk-vue/vue3\n\nThough Vue Gen 2 is in beta, this is the recommended SDK.\n\n\n\n\nSvelte\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-svelte\n\n\n\n\nSolid\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-solid\n\n\n\n\nReact Native\n\n\t\n\nn/a\n\n\t\n\nin beta\n\n@builder.io/sdk-react-native\n\n\n\n\nAngular\n\n\t\n\nstable\n\n@builder.io/angular\n\n\t\n\nn/a\n\n*Includes React-based frameworks such as Remix, Hydrogen, Gatsby, Next.js, and App Router.\n\n**Includes Nuxt.\n\nImporting the rendering component\n\nThe component's name changed from BuilderComponent in Gen 1 to RenderContent in Gen 2.\n\nGen 1\n\nIn Gen 1, the import is:\n\nimport { BuilderComponent } from '@builder.io/react';\n\nNotice:\n\nthe component is BuilderComponent\nthe Gen 1 SDK is @builder.io/react\n\nGen 2\n\nIn Gen 2, the import changes to:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\nNotice:\n\nthe component is RenderContent\nthe Gen 2 SDK is @builder.io/sdk-react\nImporting helpers to configure the editor\n\nThe process of importing helpers to configure the editor has also changed between React Gen 1 and React Gen 2.\n\nGen 1\n\nIn Gen 1, import a Builder object and use the register() helper:\n\nimport { Builder } from '@builder.io/react';\n\n\nBuilder.register('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' },\n    { name: 'Triple Columns' },\n    { name: 'Dynamic Columns' },\n  ],\n})\n\n\nGen 2\n\nIn Gen 2, the Builder import no longer exists. Instead, import register directly from the module:\n\nimport { register } from '@builder.io/sdk-react';\n\nregister('insertMenu', {\n  name: 'Our components',\n  items: [\n    { name: 'Hero' },\n    { name: 'Double Columns' }\n  ],\n})\n\nImporting helpers to register custom components\n\nThe process of importing the helper to register custom components has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import the Builder object and use the registerComponent() helper:\n\nimport { Builder } from '@builder.io/react';\nimport { MyHero } from './MyHero';\n\nBuilder.registerComponent(MyHero, {\n  name: 'Hero',\n  inputs: [\n   { name: 'title', type: 'string' },\n  ],\n});\n\n\n\nGen 2\n\nIn Gen 2, instead of using registerComponent, create a customComponents array containing all the custom components, and pass that as a prop to the RenderContent component:\n\nimport { RenderContent } from '@builder.io/sdk-react';\nimport { MyHero } from './MyHero';\n\nconst MY_HERO_CUSTOM_COMPONENT = {\n  component: MyHero,\n    name: 'Hero',\n    inputs: [\n      { name: 'title', type: 'string' },\n    ],\n}\n\n// this array can contain as many custom components as you want\nconst CUSTOM_COMPONENTS = [MY_HERO_CUSTOM_COMPONENT]\n\n// pass the array to RenderContent\n<RenderContent customComponents={CUSTOM_COMPONENTS} />\n\n\nImporting helpers to fetch data\n\nThe process of importing the helper to fetch data has also changed between Gen 1 and Gen 2.\n\nGen 1\n\nIn Gen 1, import a builder object and use the get() or getAll() helper:\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url,name',\n});\n\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n});\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using getAll().\n\nimport { builder } from '@builder.io/react';\n\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\nFor more detail, read Fetching reference and Symbols further in this document.\n\nGen 2\n\nIn Gen 2, the builder import is no longer used. Instead, import fetchOneEntry() and fetchEntries()—to fetch single and multiple entries respectively—directly from the package. Additionally, the apiKey is now a required field:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY'\n});\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY’\n});\n\n\n\nCalls to fetch multiple entries from Builder no longer fetch or load references or Symbols by default. To fetch the references in these calls, be sure to manually pass in enrich: true when using fetchEntries().\n\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url,name',\n  apiKey: 'YOUR_API_KEY',\n  // to fetch references and Symbols\n  enrich: true;\n});\n\n\n\nFor more detail, read the next section in this document, Fetching reference and Symbols.\n\nFetching references and Symbols\n\nUsing enrich: true is crucial in ensuring that references and Symbols are fetched, which provides a consistent experience between the Visual Editor and the live site.\n\nGen 1\n\nTo fetch references and Symbols in Gen 1 when using builder.get() or builder.getAll(), pass in the enrich: true option:\n\nimport { builder } from '@builder.io/react';\n\n// Fetch a single entry with references and Symbols\nconst page = await builder.get('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await builder.getAll('page', {\n  fields: 'data.url, name',\n  enrich: true, // Fetch references\n});\n\n\nGen 2\n\nTo fetch reference and Symbols in Gen 2 when using fetchOneEntry() or fetchEntries(), include the enrich: true option:\n\nimport { fetchOneEntry, fetchEntries } from '@builder.io/sdk-react';\n\n// Fetch a single entry with references and Symbols\nconst page = await fetchOneEntry({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\n// Fetch multiple entries with references and Symbols\nconst pages = await fetchEntries({\n  model: 'page',\n  fields: 'data.url, name',\n  apiKey: 'YOUR_API_KEY',\n  enrich: true, // Fetch references\n});\n\nUsing enrich when rendering content\n\nGen 1\n\nIn Gen 1 of the Builder SDK, fetch references and Symbols when rendering components with BuilderComponent by specifying enrich to true:\n\nimport { BuilderComponent } from '@builder.io/react';\n\n<BuilderComponent\n  modelName=\"page\"\n  options={{ enrich: true }} // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with BuilderComponent makes sure that references and Symbols associated with the content are fetched during rendering, which provides a consistent experience with the live site where the content is published.\n\nGen 2\n\nIn Gen 2 of the Builder SDK, when rendering components using RenderContent, fetch references and Symbols by specifying enrich: true:\n\nimport { RenderContent } from '@builder.io/sdk-react';\n\n<RenderContent\n  customComponents={CUSTOM_COMPONENTS} \n  options={{ enrich: true }}  // <-- HERE\n  ...\n/>\n\n\nUsing options={‌{ enrich: true }‌} with RenderContent ensures that your custom components have access to the necessary content and provides a consistent experience with the live site where the content is published.\n\nWhat's next\n\nFor more detail on the Gen 2 (or Mitosis) SDKs, see the Builder GitHub repo."
  },
  {
    "title": "Using Widgets - Builder.io",
    "url": "https://www.builder.io/c/docs/widgets",
    "html": "Using Widgets\n\nBuilder widgets streamline the development process so you can focus on creating engaging user interfaces.\n\nWith these widgets, you can create interactive elements such as collapsible sections, image sliders, and tabbed content, enhancing the appeal and functionality of your content.\n\nTip: Widgets work only with the Gen 1 React SDK. For more detail on the Builder SDKs, read The Builder SDKs.\n\nPrerequisites\n\nTo get the most out of this document, you should already have the following:\n\nAn app already Integrated with Builder\nInstalling widgets\n\nIn your project, install the Builder Widgets package by running the following npm install in the terminal:\n\nnpm install @builder.io/widgets\n\nIn your React application, import the Builder Widgets package to register the widgets:\n\nimport '@builder.io/widgets';\n\nInclude this import statement wherever you render a <BuilderComponent /> in your code. This registers the widgets and makes them available for use in the Visual Editor, as well as ensures proper rendering during both client-side and server-side rendering.\n\nUpdating widgets\n\nIf you're already using widgets, you can keep them up-to-date with:\n\nnpm install @builder.io/widgets@latest\n\nOr, if you're using yarn:\n\nyarn add @builder.io/widgets@latest\nLazy loading widgets\n\nTo improve performance, you can lazy load the Builder widgets package by asynchronously importing only the widgets used in Builder content. This means that widgets only load when needed, which helps you streamline user experience (UX) and more efficiently use resources.\n\nIn Next.js\n\nInstead of importing the root package synchronously, use the following import statement in Next.js:\n\nimport '@builder.io/widgets/dist/lib/builder-widgets-async';\n\nThis enables lazy loading of the widgets, which ensures they are loaded only as needed.\n\nIn other frameworks\n\nFor other frameworks, explicitly lazy load the widget components by registering them with your chosen lazy loading library.\n\nThe following example uses Loadable, the React code-splitting library:\n\nimport { Builder } from '@builder.io/react';\nimport { accordionConfig } from '@builder.io/widgets/dist/lib/components/Accordion.config';\nimport loadable from '@loadable/component';\n\nBuilder.registerComponent(\n  loadable(() =>\n    import('@builder.io/widgets/dist/lib/components/Accordion').then(mod => mod.AccordionComponent)\n  ),\n  accordionConfig\n);\n\n\nIn this example, the Accordion component from the Builder Widgets package is registered using Loadable's lazy loading functionality. The component is loaded only when it's used in your content.\n\nIf your framework supports Suspense, you can use this technique in a similar manner as Loadable to lazy load the Builder Widgets components when needed.\n\nUsing widgets\n\nAfter installing widgets, find them in the Layouts section of the Insert tab.\n\nTip: The Layouts section only displays if you've installed and imported the Widgets package or are using the Fallback Editor or fiddle.\n\nAccordion\n\nThe Accordion component renders an accordion-style UI. It accepts an array of items, each consisting of a title and a detail section. Users can click on the title to expand and collapse the corresponding detail section.\n\nThe component supports options such as displaying as a grid, allowing only one item to be open at a time, and customizing the layout.\n\nTo use the Accordion:\n\nInstall the Widgets package.\nGo to the Insert tab > Layouts.\nDrag in the Accordion widget.\nClick Edit to adjust settings.\n\nThe following video shows dragging in an Accordion widget, editing some of the settings in the Accordion's Edit dialogue. Just as with other blocks, you can apply styles to get the look and feel you want in your Accordion.\n\nCarousel\n\nThe Carousel component renders interactive carousels or sliders using the react-slick library. It accepts an array of slides and supports options like autoplay, navigation buttons, responsive settings, and customization of slide content and styles.\n\nThis component can render static content as well as dynamic content. With its customizable settings and seamless integration, the Carousel component provides an intuitive way to showcase and navigate through a collection of content.\n\nTo use the Carousel:\n\nInstall the Widgets package.\nGo to the Insert tab > Layouts.\nDrag in the Carousel widget.\nClick Edit to adjust settings.\n\nThe following video shows dragging a Carousel widget, editing some of the settings in the Carousel's Edit dialogue, and clicking through the slides. Just as with other blocks, you can apply styles to get the look and feel you want in your Carousel.\n\nTabs\n\nTabs provide a convenient way to organize and present multiple sections of content within a limited space. It accepts an array of tabs, each consisting of a label and corresponding content. Users can switch between tabs by clicking on the labels, and the active tab's content is displayed.\n\nTo use the Tabs component:\n\nInstall the Widgets package.\nGo to the Insert tab > Layouts.\nDrag in the Tabs widget.\nClick Edit to adjust settings.\n\nThe component offers additional features like setting a default active tab, collapsible tabs to toggle their visibility, customizable tab header layout options, and the ability to style the active tab to distinguish it from others.\n\nThe following video shows dragging in the Tabs widget and editing its settings:\n\nWhat's next\n\nFor more detail on the available widgets, check out the code on GitHub."
  },
  {
    "title": "Scripting the Visual Editor - Builder.io",
    "url": "https://www.builder.io/c/docs/scripting-the-editor",
    "html": "Scripting the Visual Editor\n\nYou can leverage your browser's console with JavaScript to manipulate elements in a Builder content entry.\n\nOpen a Builder content entry in the Visual Editor.\nOpen your browser's JavaScript console.\nIn the console, use the global builder to interact with the elements in the current entry as in the following video example:\n\nThe example in the video above removes the top margin from the elements on the Page and is as follows:\n\nbuilder.allEditingElements.forEach(el => {\n  if (el.style.get('marginTop') === '20px') {\n    el.style.delete('marginTop')\n  }\n})\n\nWhat's next\n\nIf you'd prefer to use the UI, rather than the browser console, visit Intro to Plugins where you can find information on what plugins are and how to use them."
  },
  {
    "title": "Generating code from your Builder content entries - Builder.io",
    "url": "https://www.builder.io/c/docs/generate-code",
    "html": "Generating Code with Visual Copilot\n\nin beta\n\nWhen generating code with Builder, you can generate code for any content entry.\n\nPrerequisites\n\nBefore generating code in Builder, make sure:\n\nYou have a Builder Page or Section with content\nOverview\n\nWhen generating code, you specify your framework, styling, and select Fast or Quality for code output type.\n\nThe image below gives an overview of where to select the main settings. The rest of this document goes into the available options in detail.\n\nSupported frameworks include:\n\nReact\nReact Native\nQwik\nVue\nAngular\nHTML\nSolid.js\nSvelte\n\nFor CSS, you can choose:\n\nTailwind\nCSS\nEmotion (React)\nStyled Components (React)\nStyled JSX (React)\n\nBuilder-generated styles include clean, contextual class names, CSS variable names that align to your design system, and styled components with contextual names.\n\nCode quality\nThere are two types of generated code available, Fast code generation and Quality code generation.\nFast code generations\n\nFast code generations leverage Builder’s proprietary AI model and open-source compiler to nearly instantly turn any Figma design file into high-performing, responsive code for any framework.\n\nFree for all plans, Builder generates Fast code for the selected layers immediately, which is nearly instantly available. This code is best for rapid prototyping and working out quick concepts.\n\nQuality code generations\n\nQuality code generations further enhance fast code generations to support your framework and styling requirements by adding an additional AI model that has been fine-tuned to generate clean, semantic code just as developers would write themselves.\n\nQuality code generates at a more deliberate speed as AI considers the design as a whole and thoughtfully creates corresponding code.This bespoke option is more specific to your needs in that you can tell Builder's AI precisely what you want with custom instructions and prompts.\n\nFor more detail on using Quality code, read Prompting AI for customization.\n\nGenerating code for your Builder entry\n\nTo generate the code from your content entry:\n\nOpen the Page or Section in the Visual Editor.\nFor the whole content entry, make sure nothing's selected. For just a portion of the entry, select what you'd like code for.\nIn the Visual Editor, click on the Get code icon, < >, in the upper right.\nIn the code pane that opens, select your Framework and Styling.\n\nThe video below shows this process:\n\nAfter generating the code, you can do one of the following to get your code into your codebase:\n\nCopy the code by clicking on the copy icon and paste it manually into your project.\nSync the code automatically, which the next section covers.\nSyncing the code automatically with your codebase\n\nTo automatically sync the generated code with your local project, it helps to have Devtools installed and the dev server running.\n\nTo install Devtools and start the dev server, if needed:\n\nExpand the Sync code section on the right.\nClick the Sync to Your Codebase button.\nCopy the npm command and run it in the terminal at the root of your project.\nStart the dev server.\n\nIf Devtools is installed and the dev server is running:\n\nWhen the dev server is running and detected*, the Sync to Your Codebase button turns blue. Now, when you click it, you'll receive a prompt for the location where you'd like to sync your code.\nEnter the path and file name or accept the default suggestion.\nClick Sync.\n\n*Detecting the dev server should only take about 2 seconds at a maximum.\n\nThe following video shows the entire process:\n\nFor more information on Devtools, visit Using Builder Devtools for Automated Integration.\n\nSyncing the code from the command line\n\nAs an alternative to using Devtools, you can run the generated npx command at the command line; for example, npx builder.io add ####, where #### is a hash that identifies the generated code.\n\nThe next video shows running this command and opening the synced code.\n\nPrompting AI for customization\n\nTo further customize your generated code with AI:\n\nBe sure you've selected Quality for the type of code.\nAt the bottom of the screen, select a suggestion or type in your own request.\n\nAs an example, the following video shows this process to break the content into separate components by selecting the multiple components suggestion:\n\nThe following image and example code show how AI worked to break the code up into separate components in the previous video:\n\nExpand for example code excerpts:\n\nCustomizableHeroLayout()\n\nHeroSection()\n\nFeatureSection()\n\nSuggested prompts for code generation include the following list. By selecting any of them, Builder regenerates the code while incorporating these features:\n\nUse Next.js Image: adds Next.js Image to your code.\nMake interactive: adds interactivity such as code that supports click events.\nBreak into multiple components: refactors code into separate components.\nUse props: adds props, making your code easier to maintain and use.\nUse MUI: uses the Material UI design system.\n\nFor other features, type your request into the input and press Enter.\n\nAdding persistent custom instructions\n\nIn addition to using the default prompts, you can give Builder your own instructions so that any time you generate code Builder will create it to your specifications.\n\nSaved custom instructions persist through logging out and apply across your Organization and Space per user. That means that if you add custom instructions, they only apply to your account, whereas a teammate's custom instructions would only apply to their own account.\n\nTo add your own custom instructions:\n\nIn the Generated Code panel, click the Settings wheel on the bottom left, next to the input.\nList your instructions by typing them in. You may also click on the suggestions to add them.\nWhen you're done, click the Save button.\n\nThe next video shows adding custom instructions:\n\nEditing or removing custom instructions\n\nTo remove or edit your custom instructions:\n\nClick the Get Code icon to open the Generated Code panel.\nIn the Generated Code panel, click the Settings wheel on the bottom left, next to the input.\nEdit or remove your instructions.\nWhen you're done, click the Save button.\n\nThe next video shows editing custom instructions:\n\nWhat's next\n\nIn addition to the process outlined above, you can fully integrate Pages, Sections, and Data and take advantage of Builder's features. Visit Integrating Pages for more information."
  },
  {
    "title": "Custom Data and Context - Builder.io",
    "url": "https://www.builder.io/c/docs/custom-actions",
    "html": "Custom Data and Context\n\nCustom actions give you a powerful tool for creating dynamic and interactive experiences in Builder. You can add new functionality to your UI, reuse code across multiple components, and create a more engaging and user-friendly experience for your users.\n\nTip: The techniques covered in this document are for the Gen 1 React SDK. For detailed information on the Gen 2 SDKs, visit SDK Comparison.\n\nPassing data down with BuilderComponent\n\nTo pass data down, you can use the data prop in the BuilderComponent and assign it an object with key-value pairs. For example, you can pass a list of products and additional data, such as an isLoggedIn boolean:\n\n<BuilderComponent\n  model=\"page\"\n  data={{\n    products: productsList,\n    isLoggedIn: true,\n  }}\n  content={builderJson}\n/>\n\n\nThe data passed down is available in Builder actions and bindings using the prefix state.*. For example, state.products refers to the productsList passed down in the example above.\n\nYou can also pass down functions and complex data using the context prop. For example:\n\n<BuilderComponent\n  model=\"page\"\n  context={{\n    addToCart: () => myService.addToCart(currentProduct),\n    lodash: lodash,\n  }}\n  content={builderJson}\n/>\n\n\nHere, the context object is assigned two key-value pairs:\n\na function addToCart()\nthe library lodash\n\nThe context passed down is available in Builder using the prefix context.*. For example, context.lodash refers to the lodash library passed down in the example above.\n\nExample: setting up a custom action on a button\n\nYou can add an action to any element, though button actions are frequently customized, which this section covers.\n\nIn your code: passing down a function\n\nThe following example demonstrates a context object that defines a single function called myFunction(), which displays an alert with \"Hi!\" when called.\n\nexport default () => (\n  <BuilderComponent \n    name=\"page\" \n    context={{ \n      myFunction: () => alert('Hi!') \n    }} \n  />\n)\n\n\nBy passing down functions using the context prop, you can create flexible and dynamic UI components in the Builder Visual Editor that respond to user input and other events.\n\nIn Builder: adding an on click event\n\nTo assign the function to run on click of a button:\n\nSelect the button.\nGo to the Data tab.\nExpand the Element events section. For this example, leave the default of On to click.\nClick the + New Event button.\nClick Edit Action > + Action > Custom Code.\nAdd your custom Javascript. In this example, add context.myFunction().\n\nThe following video demonstrates this process:\n\nAfter you've set up a custom action on an element, such as a button, you can save the element as a Template or Symbol for reusability."
  },
  {
    "title": "Using the Builder API Key - Builder.io",
    "url": "https://www.builder.io/c/docs/using-your-api-key",
    "html": "Using Builder API Keys\n\nAn API key is an alphanumeric string that you can use to connect your code base with Builder. Use the Builder Public API Key to integrate with Builder.\n\nAn example of a Builder API Key is bb209db71e62412dbe0114bdae18fd15.\n\nPrerequisites\n\nTo get the most our of this document, you should have the following:\n\nA Builder account\nAn app in your framework of choice\n\nTip: The Builder Public API Key is public, meaning that you don't have to keep it private. Because of this, there are no inherent security risks in it being publicly viewable, for example, on GitHub.\n\nFinding your Public API Key\n\nYou can find and copy your Public API Key with the following steps:\n\nWithin your Builder Space, press Cmd/Ctrl + k to open the Command Palette.\nStart to type the letters API into the search field to filter results.\nClick your API key to copy to your clipboard.\n\nAlternatively, you can also find your Public API Key in Account Settings for the Space:\n\nWithin your Builder Space, go to the Account Settings section.\nClick the copy icon to the right of the Public API Key field.\n\nThe video below shows both ways to find the Public API Key.\n\nUsing your Public API Key in your framework\n\nMost JavaScript apps use builder.init() to pass in the Public API Key. Replace YOUR_API_KEY with the Public API Key you copied from Account Settings.\n\n// Replace with your Public API Key\nbuilder.init('YOUR_API_KEY')\n\nThe following example shows what an actual Public API Key looks like when passed into builder.init().\n\n// an example of an actual API key passed into init()\nbuilder.init('bb209fb71eh2412dbe0114bdae18fd15')\nUsing your Public API Key in Angular\n\nIn Angular, pass your API Key into BuilderModule.forRoot(), by replacing YOUR_API_KEY with the Public API Key you copied in Account Settings. Place the forRoot() method in the @NgModule() imports array.\n\nWhen you replace the YOUR_API_KEY placeholder, it looks similar to the following example.\n\nManaging Private Keys\n\nUse Private Keys when you want to create a server-side only key for writing to your Builder account or to pull content that you want to keep private.\n\nTo view or use Private API Keys, you must have Admin or Developer permissions.\n\nTip: Keep your Private API Key secret. It allows anyone to have write access to your content in Builder. Only use it in API calls from your server, not calls from public client applications.\n\nRemember to ensure your Private API Keys are kept out of any version control system that you may be using.\n\nManaging an Organization's Private Key\n\nWith Organization Admin permissions, you can view, copy, or revoke the single, default Organization Private API Key. If you revoke the key, the dialogue gives you the option to create another key.\n\nTo manage the Private Key for your Organization:\n\nGo to the Organization Account Settings.\nTo the right of Private Keys, click the Edit button.\n\nFor more information on Admin permissions at the Organization level, see Managing Your Organization.\n\nManaging multiple Private API Keys in a Space\n\nIf you need to manage or create multiple Private API Keys, go to the Space Account Settings, rather than the Organization settings.\n\nTo manage the Private Key for your Organization:\n\nGo to the Organization Settings.\nTo the right of Private Keys, click the Edit button.\nCreate or revoke as many keys as you need.\n\nTo use Private Keys in a Space, make sure the Public readable toggle in the model is turned off. Then use the Content API to request private content using a Private API Key.\n\nFor more information, see Creating a Private Page.\n\nWhat's next\n\nWith your API Key in place, you can integrate powerful Builder features. To get started, check out the following tutorials:\n\nIntegrating Pages: set up your app so teammates can build Pages on their own.\nIntegrating Sections: integrate Section building for reusable content\nIntegrating CMS Data: create structured reusable data across your site\nIntegrating Symbols: elegantly reuse data across your app\nIntegrating Custom Components: use your custom components in Builder's drag-and-drop UI"
  },
  {
    "title": "How Builder Works: A Technical Overview - Builder.io",
    "url": "https://www.builder.io/c/docs/how-builder-works-technical",
    "html": "How Builder Works: A Technical Overview\n\nBuilder is a Visual Headless CMS. You determine which parts of your app that non-developers can create and manage. Builder passes data to your site or app using various SDKs and APIs.\n\nThe images below show how you:\n\nAdd a little code to your app\nUse Builder to add drag-and-drop\nClick the Publish button to make your content live\n\nBuilder doesn't host your site for you, but gives you the tools to dynamically load content created in Builder into your code. You have complete control as to what you want to be Builder-editable and where.\n\nYou control the structure of your site with models. You can customize where content of each model loads, how it is targeted and filtered, and where and how it is rendered.\n\nTo get up and running with an integrated app, see the Developer Quickstart.\n\nComparing to a traditional headless CMS\n\nIn many ways, Builder works the same as any headless CMS, and Builder's CMS data models work identically.\n\nLike a typical headless CMS, you create entries with structured custom fields or targeting. You can then query these fields with our content API and display the content you want, where you want.\n\nIn many cases with Builder, the main difference is instead of hard coding a page layout, you have a Builder renderer component render the content dynamically, optionally using components from your codebase.\n\nOptionally, you can also restrict Builder editing to only these components—with or without allowing custom styling—using components-only mode and/or roles and permissions.\n\nThe next image shows how integrating your app can remove hard-coded content best maintained by other roles on your team, such as marketers, and copywriters.\n\nIn addition to visual editing, Builder also adds additional features that are less common in traditional headless CMSes, such as content targeting and analytics.\n\nStructured CMS data has its purposes, and while it often isn't the best for things like pages and layouts, it can be great for a number of other use cases that structured data can be more ideal than pure visual editing.\n\nUnder the hood, Builder is a headless CMS like any other. You can create documents with structured data fields and consume these via our SDKs and APIs and render the data as you choose.\n\nOn top of this, Builder adds even more power by letting you register components that can render dynamically, saving you from having to write all of this logic manually. Instead, you can pass the data to a render Builder provides, such as in the following snippet:\n\nFor pages and sections, Builder automatically populates a field called blocks that is a list of components to render and their options, as in the following snippet:"
  },
  {
    "title": "Integrating Symbols - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-symbols",
    "html": "Integrating Symbols\n\nSymbols are a type of section model you can integrate for editing on your site or app. They help you elegantly reuse content across many Builder Pages and Sections. For more information, see Intro to Symbols.\n\nPrerequisites\n\nTo follow along with this tutorial, you should have the following:\n\na Builder account\nan app in the framework of your choice with the appropriate Builder SDK installed\na Symbol model that you've already created\nyou should have already integrated Page building or Section building\n\nTip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Page Building.\n\nAdd symbol editing to your app\n\nTo get started, create a special page on your site specifically for symbol editing. This is what the Builder preview opens when you create and edit symbols. It's important this be on a URL directly on your site, so all previewing and editing are accurate.\n\nIn this example, this page is named /edit-symbol.\n\nNext\nGatsby\nNuxt\nRemix\nHydrogen\nSvelte\nAngular\nREST API\n\nCreate a page with the following contents. Make sure to replace YOUR_API_KEY with your account's Public API Key:\n\n// pages/edit-symbol.jsx\n\nimport { BuilderComponent, builder } from '@builder.io/react';\n\n// Replace with your Public API Key.\nbuilder.init(YOUR_API_KEY);\n\nexport default function Page() {\n  return <BuilderComponent model=\"symbol\" />\n}\n\n\nBuilderComponent allows the drag and drop editor to work in the specified region of your site.\n\nNote that if you have registered custom components, you must import them on this page so that they are available in the Visual Editor.\n\nUpdate your symbol preview URL\n\nGo to Models and choose the Symbol model.\n\nTip: If you don't have Symbol here, make sure that you've met the prerequisite of having created a Symbol. For step-by-step instructions, see How to Make a Symbol.\n\nEnter your site domain at this new /edit-symbol path you just created, for example https://my-site.com/edit-symbol.\n\nYou can use localhost when testing locally, then change to a hosted URL like your QA or production URL once your code updates have been deployed.\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Integrating Structured Data - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-cms-data",
    "html": "Integrating Structured Data\n\nYou can use Builder CMS Data to create structured reusable data across your site. You can manage the data schema, add, and remove fields within the UI and teammates can create and remove data items in auto-generated structured forms.\n\nExamples include:\n\nHeader navigation links\nProduct Details\nBlog authors\nStructured rich content such as user profiles\n\nThis tutorial shows you how to add editable navigation links to your site header.\n\nPrerequisites\n\nTo follow along with this tutorial, you should have the following:\n\na Builder account\nan app in the framework of your choice with the appropriate SDK installed\n\nTip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Builder Pages.\n\nAdd header navigation link data to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nGatsby\nVue\nNuxt\nSvelte\nAngular\nREST API\n\nCreate a page with the following contents, replacing YOUR_API_KEY with your account's Public API Key:\n\nimport { useEffect, useState } from \"react\";\nimport { builder } from \"@builder.io/react\";\n\n// Put your API key here\nbuilder.init(YOUR_API_KEY);\n\nexport default function App() {\n  const [links, setLinks] = useState([]);\n\n  // Get the CMS data from Builder\n  useEffect(() => {\n    async function fetchContent() {\n      const links = await builder.getAll(\"nav-links\", {\n        // You can use options for queries, sorting, and targeting here\n        // https://github.com/BuilderIO/builder/blob/main/packages/core/docs/interfaces/GetContentOptions.md\n      });\n      setLinks(links);\n    }\n    fetchContent();\n  }, []);\n\n  return (\n    <>\n      <header>\n        <nav>\n          {links.map((link, index) => (\n            <a key={index} href={link.data.url}>\n              {link.data.label}\n            </a>\n          ))}\n        </nav>\n      </header>\n      {/* Put the rest of your page here */}\n      {/* <RestOfYourPage /> */}\n    </>\n  );\n}\n\nCreating a Data model\n\nIn the Builder UI, create a Data model so you can create navigation links.\n\nIn the Models section of Builder, Click +Create Model.\nSelect Data.\nEnter Nav link as the name for your new Data model.\nClick +New Field.\nName the first field label and give it a type of Text.\nRepeat steps 3 and 4 to make a second label named Url with type url.\nClick Save.\nCreating Nav link content entries\n\nUse the new Data model to create Nav Link content entries.\n\nGo to the Content section of Builder.\nClick +New.\nSelect Nav Link.\nGive it a label, url, and name.\nClick Publish.\n\nTo make more links so that you can iterate through the links in your nav list, click the three dots and select Duplicate. Repeat steps 2-4 for each link you create.\n\nThe video below shows how to make three Nav Link entries.\n\nGo back to your website and refresh the page to see your nav links. After your links are rendering, try adding new content entries in Builder. For each new entry, the new link populates the nav.\n\nWhat's next\n\nFor more information on how to work with Models in Builder, refer to Understanding Content Models.\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Integrating Sections - Builder.io",
    "url": "https://www.builder.io/c/docs/integrate-section-building",
    "html": "Integrating Sections\n\nYou can use Builder Sections to create reusable content across multiple pages. You can manage the code within your codebase, and teammates in the UI can iterate in the Visual Editor.\n\nExamples include:\n\nBlog Article\nHero Section\nAnnouncement Bar\nProduct Editorial\nHomepage\n\nThis tutorial shows you how to create and add an announcement bar section to a page.\n\nFor more conceptual information Section Models, refer to the Section Models documentation.\n\nPrerequisites\n\nTo follow along with this tutorial, you should have the following:\n\na Builder account\nan app in the framework of your choice with the appropriate Builder SDK installed\n\nTip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Page Building.\n\nAdd an announcement bar section to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nShopify\nREST API\n\nCreate a page with the following contents. Make sure to replace YOUR_API_KEY with your Public API Key:\n\nimport { useEffect, useState } from \"react\";\nimport { BuilderComponent, builder } from \"@builder.io/react\";\n\n// Replace with your Public API Key.\nbuilder.init(YOUR_API_KEY);\n\nexport default function Page() {\n  const [announcement, setAnnouncement] = useState(null);\n\n  useEffect(() => {\n    builder\n      .get(\"announcement-bar\", {\n        userAttributes: {\n          // To allow targeting different announcements at different pages (URLs)\n          urlPath: window.location.pathname,\n        },\n      })\n      .toPromise()\n      .then((announcementBar) => setAnnouncement(announcementBar));\n  }, []);\n\n  return (\n    <>\n      {/* Put your header here. */}\n      <YourHeader />\n      {announcement && (\n        <BuilderComponent model=\"announcement-bar\" content={announcement} />\n      )}\n      {/* Put the rest of your page here. */}\n      <TheRestOfYourPage />\n    </>\n  );\n}\n\n\n\nSections are typically targeted using some information about the user's state.\n\nFor instance, you can display an announcement bar when the user visits particular URLs. With custom targeting attributes, you can even display content based on complex conditions, such as when a user adds a particular item to their cart.\n\nAside from targeting, you can also query sections by custom fields.\n\nconst urlPath = '/' + (params?.page?.join('/') || '');\n\nconst announce = await builder\n    .get('announcement-bar', { userAttributes: { urlPath } })\n    .toPromise();\n\n\nThe announcement bar section in the example above is targeted with the current URL using the urlPath targeting attribute. When Builder finds an announcement bar with a matching URL, it responds with that announcement bar's content.\n\nThe snippet below demonstrates how the page and the page's announcement bar are rendered.\n\nreturn (\n  <>\n    <!-- Put your header here -->\n    <YourHeader />\n    <BuilderComponent model=\"announcement-bar\" content={announce} />\n    <!-- The rest of your page -->\n    <TheRestOfYourPage />`\n  </>\n);\n\n\nBuilderComponent receives the content for the announcement bar through the content prop and renders it next to your page's content.\n\nYou can also render a Builder-managed page next to your announcement bar or any other section by placing multiple BuilderComponent instances next to each other.\n\nCheck out How to Create a Page for a step-by-step tutorial on how to create a page in Builder and Integrating Pages on how to render your page content within your template.\n\nCreating a Section model\n\nCreate a Section model so you can make an announcement bar content entry.\n\nGo to Models.\nClick +Create Model.\nSelect Section.\nEnter Announcement bar as the name for your new Section model.\nClick Create.\nChange the Preview URL on the Model Options page to the URL of the page that you added code to display your section. This example uses /announcements, but yours might be different.\n\nThe video below demonstrates this process:\n\nDepending on the framework, the path and port can vary. Check your framework according to the below:\n\nFramework\tlocalhost URL\n\nAngular\n\n\t\n\nhttp://localhost:4200\n\n\n\n\nGatsby\n\n\t\n\nhttp://localhost:3000\n\n\n\n\nQwik\n\n\t\n\nhttp://localhost:5174\n\n\n\n\nRemix\n\n\t\n\nhttp://localhost:3000\n\nWhen you create or edit an announcement bar section, the Visual Editor displays your content embedded within your Preview URL page, providing visual context and importing styles from your site. It's a live view of your section, as it will look on one of your pages when you publish.\n\nTip: Published sections typically appear across multiple pages with different URLs depending on how they're targeted. When previewing in the editor, however, they only appear within the Preview URL's page. For more information, refer to Editing and Previewing Your Site.\n\nFor more information what Section Models are and how to use them, refer to the Section Models documentation.\n\nCreating an announcement bar content entry\n\nNow that your Section model is set up, you can create an announcement bar content entry to add an announcement bar to your site.\n\nGo to Content.\nClick the + New button and select Announcement bar.\nBuild and style your announcement bar.\nName the content entry.\nClick Publish.\n\nThe video below demonstrates this process:\n\nTargeting by URL path\n\nTo make your announcement bar display based on targeting, in the section content entry; for example, in the announcement bar:\n\nClick on the Targeting icon.\nFor Where, select URL path.\nAdd the URL path you'd like to target.\nClick the Publish button.\n\nThe video below shows this process in an integrated Remix app where the targeted URL path is /builder so that the announcement bar doesn't show up on any other URLs. This process is the same, regardless of the framework you use. The URL path you target, however, might differ.\n\nTip: If you're using Gatsby, you may need to restart your app to render the announcement bar.\n\nWhat's next\nNext\nQwik\nReact\nRemix\nHydrogen\nVue\nSvelte\nAngular\nREST API\n\nWith your app and Builder working together, the next step is the fun part–add some more Sections in Builder and drag in some elements. Play with styles and explore the UI.\n\nUse your custom components in Builder\n\nTo use your own components in the Visual Editor, including replacing built-in blocks, see Integrating Custom Components.\n\nStart using custom components\n\nDeploy your updated app to a preview environment\n\nGive others a way to try the Visual Editor integrated with your site.\n\nDeploy to a preview env\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Integrating Pages - Builder.io",
    "url": "https://www.builder.io/c/docs/integrating-builder-pages",
    "html": "Integrating Pages\n\nAs 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.\n\nTip: This guide is detailed. If you'd prefer a more succinct guide to integrating, visit Developer Quickstart, which is a cheatsheet version of this document.\n\nCreate an app if you don't have one\n\nWe highly recommend that you integrate Builder into an existing app; however, if you need to create an app, follow the steps for your framework in this section.\n\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nReact offers a number of ways to create an app with various frameworks.\n\nAt the command line, change directory with the cd command where my-app is the name of your app:\n\ncd my-app\n\nTip: On Windows, be sure to use quoting when you install dependencies that use the @ operator; for example, npm install \"@builder.io/react\".\n\nAdd Builder as a dependency\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nAt the command line, use npm to install the Builder SDK:\n\nnpm install @builder.io/react\n\nStart the development server:\n\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\nnpm run dev\nAdd a Builder component to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nPaste the following code into your JavaScript.\n\nA 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.\n\n\nimport { useEffect, useState } from \"react\";\nimport { BuilderComponent, builder, useIsPreviewing } from \"@builder.io/react\";\n\n// Put your API key here\nbuilder.init(YOUR_API_KEY);\n\n// set whether you're using the Visual Editor,\n// whether there are changes,\n// and render the content if found\nexport default function CatchAllRoute() {\n  const isPreviewingInBuilder = useIsPreviewing();\n  const [notFound, setNotFound] = useState(false);\n  const [content, setContent] = useState(null);\n\n  // get the page content from Builder\n   useEffect(() => {\n    async function fetchContent() {\n      const content = await builder\n        .get(\"page\", {\n          url: window.location.pathname\n        })\n        .promise();\n\n      setContent(content);\n      setNotFound(!content);\n\n      // if the page title is found, \n      // set the document title\n      if (content?.data.title) {\n       document.title = content.data.title\n      }\n    }\n    fetchContent();\n  }, [window.location.pathname]);\n  \n  // If no page is found, return \n  // a 404 page from your code.\n  // The following hypothetical \n  // <FourOhFour> is placeholder.\n  if (notFound && !isPreviewingInBuilder) {\n    return <FourOhFour/>\n  }\n\n  // return the page when found\n  return (\n    <>\n      {/* Render the Builder page */}\n      <BuilderComponent model=\"page\" content={content} />\n    </>\n  );\n}\n\nUsing your app with Builder\n\nBuilder 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.\n\nHead over to Builder.io to sign up for an account if you don't already have one. Come back when you're logged in.\n\nThis 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. This example uses Next.js but all frameworks use the same process:\n\nGetting your API Key\n\nTo connect your Builder.io space to your application, add the Public API key to your code.\n\nFind your Public API Key within Builder.io in one of two ways:\n\nPress Cmd/Ctrl+k in Builder to bring up the command palette and search for API Key. Clicking the Public API Key copies it to your clipboard.\nGo to Account Settings and copy your Public API Key.\n\nFor more detail about the Public API Key, see Using Builder API Keys.\n\nPaste the Public API Key into your app by replacing the YOUR_API_KEY placeholder in your code. This location varies depending on your framework and is covered in the earlier sections of this tutorial.\n\nThe following video shows copying the Public API Key and pasting it into a Next.js app.\n\nSetting the model preview URL\n\nTo 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.\n\nGo to Models and choose the Page model.\nSet the Preview URL to http://localhost:<your-port>, where <your-port> is the port your app is using. Be sure to include the http://.\nClick Save.\n\nThe following video shows these steps:\n\nCreating a Builder Page\n\nCreate a Builder Page to use with your integrated app.\n\nGo to Content.\nClick the +New button near the top right of the screen.\nCreate a new page in Builder and name it Test Page. Notice that Builder automatically generates the path as /test-page.\nWhen you are prompted to choose a starting template, choose Blank. The editor for your new page loads automatically.\nIn your new page, drag in a Text block.\nClick Edit and add something like, \"I did it!!\".\nClick the Publish button in the upper right of the browser.\n\nThe next video shows creating a page in a Builder-integrated app and dragging in a text block:\n\nTip: 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.\n\nDepending on the framework, the path and port can vary. Check your framework according to the below:\n\nFramework\tlocalhost URL\n\nAngular\n\n\t\n\nhttp://localhost:4200\n\n\n\n\nGatsby\n\n\t\n\nhttp://localhost:3000\n\n\n\n\nQwik\n\n\t\n\nhttp://localhost:5173\n\n\n\n\nRemix\n\n\t\n\nhttp://localhost:3000\n\nGo to http://localhost:<your-port>/test-page and check out your work. Well done!\n\nIf you're getting a 404 but aren't sure why, check these things:\n\nMake sure you've published your page in Builder by clicking the Publish button on the upper right corner.\nCheck the URL. If you name the page test2 for example, Builder adds a hyphen, so that the URL segment is test-2.\nMake sure that you've set the preview URL on the Page Model.\nBuilder Pages best practice\n\nWe 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.\n\nTo use Builder pages between your header and footer, follow the guidance below for your framework:\n\nNext\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nImport your header and footer along with the other JavaScript imports at the top of your page component; for example, page.js.\n\nAdd the header and footer components before and after BuilderComponent.\n\n+ import MyHeader from '../components/my-header'\n+ import MyFooter from '../components/my-footer'\n\n export default function Page({ page }) {\n   ...\n   return (\n     <>\n       <Head>\n         <title>{page?.data.title}</title>\n       </Head>\n\n+      <MyHeader />\n       <BuilderComponent model=\"page\" content={page} />\n+      <MyFooter />\n     </>\n   );\n }\n\n\n\nFor a community example with Builder and Next.js that includes ISR capabilities and SEO optimizations, see Kenzitron's Builder.IO & NextJs starter with ISR & SEO optimization on GitHub.\n\nThis guide demonstrated integrating page building into an app. For more demo apps in many frameworks, see Builder's GitHub repository for complete examples.\n\nWhat's next\nNext\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nWith 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.\n\nUse your custom components in Builder\n\nTo use your own components in the Visual Editor, including replacing built-in blocks, see Integrating Custom Components.\n\nStart using custom components\n\nDeploy your updated app to a preview environment\n\nGive others a way to try the Visual Editor integrated with your site.\n\nDeploy to a preview env"
  },
  {
    "title": "Developer Quickstart - Builder.io",
    "url": "https://www.builder.io/c/docs/quickstart",
    "html": "Developer Quickstart\n\nThis Quickstart shows how to integrate page building with Builder.io in a brief format. We recommend this as the best way to get started with the Builder platform.\n\nTip: This Quickstart moves at a fast pace to get you up and going as quickly as possible, so it assumes development proficiency and workflow familiarity. For more detailed, step-by-step instructions, see Integrating Pages.\n\nPrerequisites\n\nTo get the most out of this guide, you should have:\n\nA working app in the framework of your choice. Create an app if you don't already have one.\nA basic understanding of development including the command line, npm, and code for your framework.\nA Builder Space.\nStep 1: Add Builder as a dependency\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nAt the command line, use npm to install the Builder SDK:\n\nnpm install @builder.io/react\n\nStart the development server:\n\nnpm start\n\nTip: On Windows, be sure to use quoting when you install dependencies that use the @ operator; for example, npm install \"@builder.io/react\".\n\nStep 2: Add a Builder component to your app\nNext\nApp Router\nQwik\nReact\nRemix\nHydrogen\nNuxt\nVue\nSvelte\nGatsby\nAngular\nREST API\n\nPaste the following code into your JavaScript, making sure to replace YOUR_API_KEY with your Public API Key, which you can find in the Account section of Builder or by pressing Cmd/Ctrl+k and filtering for \"API\".\n\n\nimport { useEffect, useState } from \"react\";\nimport { BuilderComponent, builder, useIsPreviewing } from \"@builder.io/react\";\n\n// Put your API key here\nbuilder.init(YOUR_API_KEY);\n\n// set whether you're using the Visual Editor,\n// whether there are changes,\n// and render the content if found\nexport default function CatchAllRoute() {\n  const isPreviewingInBuilder = useIsPreviewing();\n  const [notFound, setNotFound] = useState(false);\n  const [content, setContent] = useState(null);\n\n  // get the page content from Builder\n   useEffect(() => {\n    async function fetchContent() {\n      const content = await builder\n        .get(\"page\", {\n          url: window.location.pathname\n        })\n        .promise();\n\n      setContent(content);\n      setNotFound(!content);\n\n      // if the page title is found, \n      // set the document title\n      if (content?.data.title) {\n       document.title = content.data.title\n      }\n    }\n    fetchContent();\n  }, [window.location.pathname]);\n  \n  // If no page is found, return \n  // a 404 page from your code.\n  // The following hypothetical \n  // <FourOhFour> is placeholder.\n  if (notFound && !isPreviewingInBuilder) {\n    return <FourOhFour/>\n  }\n\n  // return the page when found\n  return (\n    <>\n      {/* Render the Builder page */}\n      <BuilderComponent model=\"page\" content={content} />\n    </>\n  );\n}\n\nUsing your app in Builder's Visual Editor\nGo to the Models section in Builder and choose your Page model.\nSet the Preview URL to http://localhost:YOUR_PORT where YOUR_PORT is the port number for your app. Be sure to include the http://.\nClick Save.\nIn the Content section of Builder, create a new blank Page and name it something like Test Page.\nAdd some minimal content, such as a Text block with some copy such as \"I did it!\".\nClick the Publish button.\nGo to http://localhost:3000/test-page, where test-page is the name you gave your page, and check out your work. Well done!\n\nThe next video shows this process, including getting your API Key as described in the last section:\n\nIf you're getting a 404 but aren't sure why, check these things:\n\nMake sure you've published your page in Builder by clicking the Publish button on the upper right corner.\nCheck the URL. If you name the page test2 for example, Builder adds a hyphen, so that the URL segment is test-2.\n\nFor a community example with Builder and Next.js that includes ISR capabilities and SEO optimizations, see Kenzitron's Builder.IO & NextJs starter with ISR & SEO optimization on GitHub.\n\nWhat's next\n\nWith 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.\n\nUse your custom components in Builder\n\nTo use your own components in the Visual Editor, including replacing built-in blocks, see Integrating Custom Components.\n\nStart using custom components\n\nDeploy your updated app to a preview environment\n\nGive others a way to try the Visual Editor integrated with your site.\n\nDeploy to a preview env\n\nFor more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers?_host=www.builder.io",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!"
  },
  {
    "title": "Builder for Enterprise - Builder.io",
    "url": "https://www.builder.io/c/docs/enterprise-hub",
    "html": "Builder for Enterprise\n\nOn an Enterprise plan, you have access to top-notch Builder features and services. And with add-ons only available to Enterprise customers, you can leverage Builder to deeply refine experiences for your customers.\n\nGUIDES FOR ENTERPRISE FEATURES\n\nEnterprise customers have access to an array of features, which include:\n\nPremium Support SLA\n\nGuaranteed 99.9% uptime and support response times\n\nCustom Roles and Permissions\n\nGranularly determine user access and permissions\n\nEnvironments\n\nCreate environments such as QA and Prod\n\nWorkflows and Rules\n\nImprove collaboration and quality\n\nSINGLE-SIGN ON\n\nSSO with Okta\n\nConnect Okta to Builder for Single Sign-On\n\nSSO with Google Workspace\n\nConnect Google Workspace to Builder for Single Sign-On\n\nSSO with Azure\n\nConnect Azure to Builder for Single Sign-On\n\nPOWER FEATURES\n\nUsing Templates Across Spaces\n\nShare templates in all of your Spaces\n\nRequest to Publish\n\nUsers can request that content go live\n\nSmart Targeting\n\nCurate your targeting attributes\n\nWhite-labeling\n\nThoroughly customize Builder\n\nCreate a Private Plugins\n\nMeet your specific use cases with private plugins\n\nUsing Custom Dashboards\n\nMeet your specific use cases with private plugins\n\nCopy an Entire Space\n\nDuplicate a whole Space in your Organization\n\nView Organization Insights\n\nView most active users by Space\n\nCustomize dashboards programmatically\n\nUse your own SQL queries for displaying metrics\n\nEmbedded Apps\n\nDeeply customize the Builder user interface\n\nContributor Role\n\nGive users limited access to update content\n\nSome of these features are add-ons. If you would like to learn more about Builder's add-on Enterprise features, contact your Account Executive, email sales@builder.io, or reach out to us through our contact form."
  },
  {
    "title": "Builder.io docs - Builder.io",
    "url": "https://www.builder.io/c/docs/intro",
    "html": "Builder Knowledge Base\n\n⌘K\n\nGetting Started with Builder\n\nLearn your way around the Visual Editor while building a stunning landing page\n\nGo to the Developer Docs\n\nLearn how to integrate Builder with your code base and unlock your team's potential\n\nVisual Editor Tutorials\n\nFor tutorials and guides on creating Pages, Sections, and using data in Builder's Visual Editor, check out Start Building."
  },
  {
    "title": "Using Builder Devtools for Automated Integration - Builder.io",
    "url": "https://www.builder.io/c/docs/devtools",
    "html": "Using Builder Devtools for Automated Integration\n\nin beta\n\nYou can skip manual integration and let Builder's Devtools handle the details for you.\n\nBuilder Devtools automatically handles integration with Builder's Visual Headless CMS and provides an intuitive UI for registering components and managing content.\n\nCurrently, Builder Devtools supports integration with Next.js, and Qwik.\n\nNeed another framework? While we add more frameworks, refer to the Developer Quickstart to integrate with other frameworks.\n\nPrerequisites\n\nMake sure you have Node.js and npm (Node Package Manager) installed on your system.\n\nCreate an app if you don't already have one\n\nGenerate an app and cd into the new app's directory by running the following command at the command line, where my-next-app or my-qwik-app is the name you give your app:\n\nNext\nQwik\nnpx create-next-app my-next-app\ncd my-next-app\nInstall Builder Devtools\n\nThis command automatically sets up the integration with Builder, connects to your Builder account, and adds your API key.\n\nIn the root of your project, run the following command to install Builder Devtools:\n\nnpm init builder.io@latest\n\nWhen prompted, respond Yes to integrating with Builder.io:\n\nStart the development server\n\nAfter installing Builder Devtools, start your development server:\n\nnpm run dev\nAccess the Builder Devtools UI\n\nWith the development server running, access the Builder Devtools UI:\n\nOpen your web browser and navigate to your project's local development URL—usually http://localhost:3000/ for Next.js or http://localhost:5173/ for Qwik.\nClick the Let's get started button.\nChoose a Space to authorize for integration and click Authorize.\nClick the Go to your app button.\nOn the bottom right, click on the Builder logo to get to your components, settings, and adding a Builder Page.\n\nTip: If you're using Windows, you might need to restart your dev server.\n\nThe video below shows authorizing and connecting to a Builder Space.\n\nRegister components\n\nThe Devtools drawer displays all of your components, both registered and unregistered. From here, you can:\n\nRegister components: toggle components on to register them with Builder.\nView and edit registered components: Interact with your registered components directly from the Devtools UI. You can rename, register, and edit inputs.\nVisualize content: Display content that's in Builder and click on an overlay to jump into any Builder element directly in the Visual Editor.\n\nTo register your components with Builder:\n\nOpen the Devtools drawer by clicking on the Builder logo on the bottom right.\nClick Components to display all of the components, registered or not, in your code base.\nSelect a component.\nToggle on to register the component. The code to register the component is added automatically to your code.\n\nThe next video shows this process by registering a Counter component:\n\nThe next video shows registering a component and editing its name in Devtools. At the end of the video, notice that the Devtools edit that changes the component's name from Footer to MyFooter, updates in the code editor.\n\nTip: When registering components, Devtools can recognize most input types; however, more complex types require manual coding. If you want to add lists and objects, read about them in Input Types in Builder.\n\nShare your feedback\n\nDevtools is under active development, and we'd love to know what you think. Your feedback helps us meet the real world needs of Builder's community and we couldn't do it without you!\n\nWhat's next\n\nFor more detailed information on registering custom components in Builder, read Integrating Custom Components."
  },
  {
    "title": "Builder.io developer docs - Builder.io",
    "url": "https://www.builder.io/c/docs/developers",
    "html": "LET'S BUILD TOGETHER\n\nDeveloping with Builder\n\nLet's get building with our Visual Headless CMS!\n\nAutomated integration with our Devtools CLI\n\nINTEGRATION\n\nIntegrate page building\n\nIntegrate section building\n\nIntegrate structured data\n\nWhich should I use?\nBuilder Blueprints\n\nQuick reference for how to integrate common use cases with Builder\n\nLanding pages\nBlog Article\nHero Section\nNavigation Links\nAnnouncement Bar\nProduct Details\nProduct Editorial\nHomepage\nRequest a Blueprint\n\nDIVE DEEPER\n\nIntegrate Custom Components\n\nLearn about Content Models\n\nExtend Builder with Plugins\n\nEXPLORE THE BUILDER PLAYGROUND:\n\nExplore a Builder integration in your browser\n\nPOPULAR DEVELOPER DOCS\n\nHow Builder Works: Technical Overview\n\nAPI Documentation\n\nGet started with Builder.io and Next.js\n\nIntegrate Symbols\n\nWe ❤️ open source\n\nBuilder\n\nBuilder SDKs, plugins, examples, and more\n\nStars\nQwik\n\nResumable framework for building instant-on web apps with great time-to-interactive\n\nStars\nMitosis\n\nUniversal components compiler. Write components once, run everywhere.\n\nStars\nPartytown\n\nRelocate resource intensive 3rd - party scripts off the main thread and into a web worker.\n\nStars\nFigma / HTML\n\nConvert Figma designs to HTML, CSS, React, Vue and more!\n\nStars"
  },
  {
    "title": "Builder.io: Drag & Drop Headless CMS",
    "url": "https://www.builder.io/c/docs/developer",
    "html": ""
  }
]