There are multiple use cases for code components. They basically give you an escape hatch to add anything to your canvas with JavaScript.

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.

• The style is written in JavaScript so instead of dash case (background-color) it needs to be written in camel case (backgroundColor).

Advanced React Component

If you are familiar with React you know what to do. For more advanced information you can visit our developer portal.

Best Practices

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:

https://gist.github.com/koenbok/7bf294773e59535d2a5c4fec193398c8