Using Code Components
Code components allow you to add some basic html to the canvas or create fully interactive React components.
Creating a Component
To create a new code component go to Assets → Code and click the plus button.
Basic HTML Component
If you're looking to add some basic html (and you have html and css skills) you might notice that the contents of the file looks familiar but a bit different to what you are used to. That's because the html and css is written in jsx. It is very close but there are a few things to take into account. Let's look at the simplest component you could write in html and css.
• The "export default function" and "return" stuff just defines the component that is named "Example".
• Everything after return is just valid html. You can use all the tags and properties you know and love.
Advanced React Component
If you are familiar with React you know what to do. For more advanced information you can visit our developer portal.
Manipulating the DOM and Server Side Rendering (SSR)
Many integrations will want to directly manipulate the DOM. They typically need a target element that they can insert something into. You can often just set a ref on the element and use that. But sometimes the library expects a unique query selector. You can use the id of the node to create a stable element selector: