Builder's two tools, Fusion and Publish, work together seamlessly. With Fusion for Publish, design, prototype, and preview work-in-progress custom components within the Publish CMS environment.
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.
Before using Fusion Preview, confirm the following:
- Both Fusion and Publish 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 Publish.
- Fusion is connected to your web app's repository. For more details, visit Get started with Projects.
No additional setup is needed. Fusion comes pre-built with sub-agents that understand how to work with your Publish CMS.
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.
Create a new branch within your Fusion Project. Ask Fusion to create a new component or update an existing one.
To more easily view the components Fusion creates, tell Fusion to build a preview page of the component or add it to an internal page.
In the video below, Fusion is asked to build a banner component with text and colors that can be edited in Publish. The component is added to an internal page specifically for Builder components.
Once you are happy with your component, ask Fusion to create or update the component as a custom component in Publish. Fusion has pre-configured sub-agents that know how to interact with Publish.
Additionally, specify if certain properties should be configurable or connected to specific content models. The Fusion sub-agent automatically understands what to do.
Example Prompt
Register this new component as a Publish 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 Publish. The heading, subtext, and CTA label will be editable. The colors will also be editable, but will default to your branded colors.
To preview the component within your Publish Space:
- Switch from your Fusion Space to your Publish Space.
- Navigate to a dedicated test entry.
- Click the Preview with a Fusion branch button near the content entry's URL.
- Select the Fusion Space with your component.
- Select the Fusion 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 Publish. If needed, return to your Fusion Space to adjust the component. Changes on the Project branch appear immediately within your Publish Space.
When the component is ready, return to Fusion 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 Publish content entry.