Code components overview

A code component is a block you write yourself for what the block catalog cannot express: an orbiting gallery, a comparison slider, a calculator, a 3D scene, a chart. You can write it in the code component editor, or ask an assistant to build it.

How it works

One contract.A definition describes the block: its name, root element, props, default style and SEO fallback.

Props are the whole editing surface.Whatever people should change (texts, images, colours, counts, speeds) must be a prop. Props appear in the inspector in the order you declare them.

The Style tab styles the root.Spacing, size, background, border, radius and shadow come from the standard style controls; you do not rebuild them as props.

Your code draws the inside.In plain JavaScript (behavior_jspluscss) or React (component.jsx).

Sandboxed.Every component runs in its own frame, in the editor exactly as on the published page.

Leaf or box

By default a component is a leaf: it has no children. Set "acceptsChildren": true to make it a box that holds normal blocks (headings, text, buttons) while your code paints behind them, which suits shader backgrounds and particle effects.

Versions

Every save that changes the contract, JavaScript or CSS is kept as a version. You can read an older version and restore it; a restore becomes a new version, so it can be undone the same way. A change applies to every site in the organization that uses the component.

In Studio videos

With "timeline": true the same component can also be a layer in Studio video projects. It then draws into a canvas or SVG from the current time instead of running its own animation loop.

Next

Definition and props

Behavior JavaScript and CSS

React components and SEO

Approved libraries

Data access and the sandbox