Custom Code

Important: Adding custom code is experimental and can break things or mix badly with the native builder features. Be sure to test thoroughly in the live preview. Depending on what type of code you apply, code preview in the builder might not be 100% the same behavior as in the live website and vice versa.

Overview

Custom Code lets you attach CSS and JavaScript directly to any element in your project. This is useful for effects, animations, and behaviors that go beyond what the built-in tools offer.

You can access Custom Code from the right toolbar when an element is selected. Click the + button in the Code section to enable it, then click Edit to open the code editor.

How it works

Each element can have two types of custom code:

• CSS — Styles scoped to the element using the & selector
• JavaScript — Code that runs when the element appears on the page

Both CSS and JS support the @controls system, which lets you define UI controls (sliders, color pickers, toggles, etc.) that appear directly in the toolbar. This makes your code configurable without editing it manually each time.

Code preview

The Play button in the toolbar lets you preview your custom code directly in the builder. Press Stop to end the preview.

Note that the preview may not be identical to the live site. Some behaviors, especially those depending on page load order or other elements, may differ.

Next steps

• Custom CSS — Styling with the & selector, pseudo-classes, and media queries
• Custom JavaScript — Interactivity with the element variable
• Controls — Adding UI controls to your custom code