Editing with Code Using the Code Tab
Work directly in HTML, CSS, and JS, or paste in a layout you already built, using the Composer's Code tab.
Use the Code tab to work directly in code, or to bring in a layout you already built. It gives you direct access to the section's HTML, CSS, and JS in one place, pick this tab when you'd rather write or paste code than click through visual controls.
The Code tab only appears once the Editor tab is switched to Developer. Switch to Design and it disappears from the top navigation.
What you can do
- Edit the code directly. Adjust the HTML, CSS, or JS for the section.
- Paste in a layout. Designed something with coding tools? Paste it in and it renders right away.
- Keep editing visually. Anything you write here stays fully editable back in the Editor tab.
- Clean up as you go. Each panel (HTML, CSS, JS) has its own Format button to auto-indent your code, and a Copy button to copy it out.
Screenshot: the Code tab showing the section's HTML, CSS, and JS with a live preview.
How to make a change
- Open the section's code. See its HTML, CSS, and JS together in one view.
- Edit directly, or paste in a layout. Adjust the code by hand, or paste in something you already built, it renders right away.
- Check the live preview. See your changes reflected instantly as you type.
- Keep refining visually. Anything you write here stays fully editable back in the Editor tab.
Standard, Page, Site, and Globals
Everything above is the Standard scope, this section's own HTML/CSS/JS. The Code tab has 4 scope tabs in total:
| Scope | What it is | When it loads |
|---|---|---|
| Standard | CSS and JS that belong to this section | Every page this widget appears on |
| Page | Code injected into <head> or before </body> on the page containing this widget | Only on that specific page |
| Site | Code injected into <head> or before </body> on every page | Everywhere, site-wide |
| Globals | The site-wide Global Style manager, variables, classes, and buttons | Everywhere, site-wide |
Most Composer widgets use Standard scope for everything. Page scope is useful for a tracking pixel or a stylesheet needed only on that page. Site scope is useful for loading a font or analytics script once across the whole site. See Global Style Overview for the Globals scope in depth.
Loading a Third-Party Library
Add a library's URL under the Assets panel's Custom URL tab, choosing JS, CSS, or Font, with load-order and injection-location controls. The Assets panel also has a Catalog tab of popular libraries, but browsing it just opens each library's own website in a new tab, it doesn't load anything into your page by itself, only Custom URL actually injects a resource.
Use Cases
- Bringing in a section built elsewhere, paste HTML and CSS from an AI tool, a template library, or a Figma export. See Paste and Import Code.
- Writing structural changes by hand, add, remove, or restructure elements the way you would in a normal code editor.
- Adding Twig expressions, forms, or custom JavaScript, anything beyond what the Editor tab's visual controls cover.
- Loading a tracking pixel or a stylesheet needed on just one page, Page scope injects it there without affecting the rest of the site.
- Loading a font or analytics script once, site-wide, Site scope injects it into every page instead of repeating it per widget.
- Pulling in a third-party library, add it once through the Assets panel's Custom URL tab, rather than hand-editing every widget that needs it.