Code components

Code components contain your own JavaScript and CSS. They can be reused and incorporate dynamic elements such as page data, custom input data, and 3rd party API responses.

Components are rendered using Preact with the React compatibility layer enabled.

Adding a new component

New code components can be added from the Library panel. Click the + icon at the top left of the screen and then + Add new. Once the component has been given a name, the code editor will appear.

The code editor will contain a simple starter component as an example.

const Component = ({ text = 'Component' }) => {
  return <div className="text-3xl">{text}</div>;
};

export default Component;

The name of the component can be anything, but the code must provide a default export.

Once the component has been edited, it can be saved and added to the library by clicking the Add to components button.

Importing other code components

You can import other components you have created in your code by prefixing them with @/components.

import Heading from '@/components/my_heading';

You can also do this through the UI by clicking the “Import components” button in the top right of the editor.