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.
First, connect your application to both Fusion and Publish. Then, use the power of Fusion's AI generation to create and Register custom components. Use these custom components within Publish to build dynamic Pages, without the use of code.
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.
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.
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.