Builder Code Preview for Builder Content
Builder Code Preview for Builder Content enables non-developers to design, prototype, and preview work-in-progress components directly within the Builder Content CMS environment, without the code-deploy bottleneck.
Once finalized, custom components can be handed off to engineering for merging into the codebase. This keeps content teams unblocked while maintaining the same production standards needed for new components.
When to use Builder Code Preview
Use the Builder Code Preview when a content or marketing task requires a component that doesn't exist yet, or needs to behave differently than it currently does. For example:
- "Build me a new product wizard component."
- "Update this existing banner to include a fade-in animation."
- "Create a new mega menu with product categories and hover states."
- "Build a carousel that swipes differently on mobile."
Before using Builder Code Preview, confirm the following:
- Both Builder Code and Builder Content products are active on your Builder account.
- Publish is set up and configured. Content models, entries, and the component registry are ready. For more details, visit Get started with Builder Content.
- Builder Code is connected to your web app's repository. For more details, visit Get started with Builder Code.
No additional setup is needed. Builder Code comes pre-built with sub-agents that understand how to work with your Builder Content CMS.
Step 1: identify your component
Begin by reviewing your existing custom components and ensure the component you're looking for does not already exist. For more details on custom components, visit Register custom components.
Example Prompt
If your component does exist and you wish to make edits to it, identify the name of the component.
Step 2: prototype the component in Builder Code
Create a new branch within your Builder Code Project. Ask Builder Code to create a new component or update an existing one.
To more easily view the components Builder Code creates, tell Builder Code to build a preview page of the component or add it to an internal page.
In the video below, Builder Code builds a banner component with text and colors that can be edited in Builder Content. The component is added to an internal page specifically for Builder components.
Step 3: ask Builder Code to register your component in Builder Content
Once you are happy with your component, ask Builder Code to create or update the component as a custom component in Builder Content. Builder Code has pre-configured sub-agents that know how to interact with Builder Content.
Additionally, specify if certain properties should be configurable or connected to specific content models. The Builder Code sub-agent automatically understands what to do.
Example Prompt
Register this new component as a Builder Content custom component. Ensure that all text, including the call-to-action button, is editable. Also allow users to change the various colors of the banner.
I will transform your component into a custom component registered with Builder Content. The heading, subtext, and CTA label will be editable. The colors will also be editable, but will default to your branded colors.
Step 4: preview the component in Builder Content
To preview the component within your Builder Content Space:
- Switch from your Builder Code Space to your Builder Content Space.
- Navigate to a dedicated test entry.
- Click the Preview with a Builder Code branch button near the content entry's URL.
- Select the Builder Code Space with your component.
- Select the Builder Code Project with your component.
- Select the branch with your component.
After switching, view the Custom Components section within the toolbar. Your newly created component can be used on your dedicated test page.
Important: do not publish content entries that use previewed components until those components have been merged into your codebase.
Validate your content functions as expected within Builder Code. If needed, return to your Builder Code Space to adjust the component. Changes on the Project branch appear immediately within your Builder Content Space.
Step 5: tag a developer for review and deployment
When the component is ready, return to Builder Code and assign a developer to review the changes. The developer can review the code, make updates, and submit a PR for deployment when approved.
For more details, visit Peer reviews and Create a pull request.
Once the pull request is merged and deployed, switch the test entry's preview source back to the default production URL and confirm the component renders correctly. You can now use your custom component in any Builder Content entry.