Custom code in the Builder visual editor
State and Actions
Builder allows you to bind state values to Builder blocks as well as adding custom actions when the user interacts with your content. If you want to learn how to add state bindings or action handlers, check out our State and Action Guide.
When adding custom code in a state binding, note that you should not return a value. Instead, should use one of the following examples:
Data Binding: one line expressions
If you have a simple, one line expression you can write it without a return statement in the code editor:
Data Binding: complex code blocks
If you have a more complicated code logic, you'll need to make sure you export a default value:
You can access Builder state in both state bindings as well as action handlers. State bindings will almost always be bound to Builder, but you can also modify the state value in the binding. For example:
Action handlers: using the Event object
Action handlers have an additional object you can access,
event. This value is the HTML event emitted by the event you selected. You can use the event to access the target that emitted the event, or you can call methods like
This applies to the entire content entry, and not a particular layer. Let's say you wanted to add a some custom styling to all builder text blocks for a particular page, you could add a rule like this to the Custom CSS panel:
Caution: as with any code you would add to your site, be cautious and thoughtful of the impact your custom code might have on performance and security. For example, Iif you are adding custom event listeners, make sure you passive events.
Server rendering and Async Requests
You can run client side and/or server side using
Builder.isServer. You also have access to
fetch() on the client and server. For server side data you can export a default promise and it'll wait on that promise to resolve with any data before replying:
In the example above, the data will be saved on state and accessible in the server and client UIs as data bindings, etc. View our Advanced Data Guide for more information about fetching data and using it in Builder.
Accessing location data
You may have a situation where you want to access data form the url. While you can easily access
window.location in the browser, this doesn't really work if you're running in Node.js. To make easier for developers to deal with url data on all platforms, we've added a
state.location object that you can access in custom code:
3rd party libraries