Builder's Chrome extension gives you shortcuts to:
- edit your published Builder content entries
- make quick fixes on the fly
- ensure you're on the right content entry
- copy a layout entirely, along with links, graphics, and responsiveness
To edit content entries with the Builder.io Chrome extension:
- Install the Builder.io Chrome extension.
- Open the Builder extension in Chrome.
- Check the checkbox if you want to outline content entries by default.
- Click the Edit button for the Page or Section you want to edit to launch Builder (make sure you're logged into your Space).
- Make edits and publish updates.
The video below shows using the Builder.io Chrome extension to access a Builder doc:
We recommend that you pin the extension for quick access:
- Click the Extensions button to the right of the address bar.
- Click the pin button next to Builder.io in the extensions list.
The screenshot below shows where to pin the extension.
With the copy layout feature of the Builder.io Chrome extension, you can select live Builder content and paste it into the Visual Editor:
- Click the Builder.io extension.
- In the extension panel, click the Copy Layout button.
- Click the content Section or Page you'd like to copy. The extension copies the selection.
- Go into the Builder Visual Editor and paste with
Cmd + v(Mac) orCtrl + v(PC).
The next video shows copying a Section, pasting it into the Visual Editor, and checking for responsiveness:
for developers
You can use the Chrome extension to fix issues related to previewing content within Visual Editor if your website restricts iframe usage.
The Visual Editor previews your work within the context of your website, provided by the editing URL, to show you a live view of how your edits will look before publishing. However, if the website pointed to by the editing URL doesn't permit the browser from embedding the site within an iframe, Visual Editor can't render the preview.
The Chrome extension solves this by rewriting server response headers that restrict iframe embedding while using the Visual Editor. The extension rewrites the following headers:
X-Frame-Options- The
frame-ancestorsdirective ofContent-Security-Policy
Headers are only rewritten while browsing https://builder.io.
For more information, including alternative solutions, see Editing and previewing directly on your site.
