Code Components

Code Components contain your own JavaScript and CSS and they can be managed in the Canvas UI. They can be reused and incorporate dynamic elements such as page data, custom input data, and third-party API responses.

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

There are two ways to work with Code Components:

• Use the in-browser code editor to create and edit Code Components directly in Canvas.
• Use a local codebase when you want to work with your own editor, source control, shared local code, static assets, or package dependencies.

In-browser code editor

The in-browser code editor is built into Canvas. Use it when you want to create or update a Code Component without setting up a local project. It edits the component’s JavaScript and CSS in the UI and works with imports that are already available to that component.

This workflow is best for changes contained within the component file and its CSS. Use a local codebase when you need to add new source files, static assets, or package dependencies.

Local codebase

A local codebase lets you manage Code Components outside the Canvas UI. Use this workflow when you need local source control, shared files, static assets, SVGs, or package dependencies.

See Local codebase to start a project and push Code Components to Canvas.