Skip to main content

Your components in Studio

Studio builds every layout from React components, most of them yours. Registering a component makes it available to drag, configure and bind in Studio, and the code stays yours. Read it before you register anything, or if you're worried Studio will take over code your team owns.

The example is the team blog, whose developers registered an Avatar component that renders one author photo.

They stay your components​

Avatar stays in your repo, in your language and framework, under your tests and your review process. Studio places it and passes it props. It doesn't own, copy, rewrite or generate it.

On the canvas, Avatar runs inside your own site, so authors see the real component, with your styles and behavior, not an imitation of it. When the component changes, you release your app as you always do, and every layout that uses it picks up the change.

What is registration​

Registering is the step that makes a component available in Studio. A developer calls registerComponent from the Studio SDK once, with the component and a description of its props. For Avatar, that's a photo and a size.

Registering gives Studio four things:

  • A tile in the Components tab. Anyone building a layout can drag Avatar onto the canvas. Developers can put tiles in named groups and give them thumbnails.
  • A settings form. It's built from the props, so whoever places Avatar can set its values in the panel on the right.
  • Bindable props. Each prop can take its value from content instead of a typed value. How that works is in How components get content.
  • A row in Layers. Layers is the outline of everything on the canvas, and Avatar appears there wherever it's used.

A registered component is also what sections are built from. A section can hold Avatar alongside Studio's own components. The blog's Author card section holds it next to a Byline, inside a Stack.

What stays yours​

  • Your styling. Your components keep their own CSS. Studio's Design tab adds styles to a placed component using the design tokens and breakpoints you register. By default it also accepts values typed by hand, and you can limit it to your tokens only. The Design tab appears on freeform templates, and on every composition once Enable Freeform Feature is on for the project.
  • Your data fetching. If Avatar fetches its own data inside the component, that keeps working. Studio can't see that data or bind to it.
  • Your build. Your app is built and released the way it is today. The Studio SDK is a package your code imports, and your code decides which components to register.

Studio's components and yours​

The Components tab holds two kinds of component.

  • Studio's own. Studio ships 19 components in five groups: Basic, Container, Media, Smart Containers and HTML Elements. They cover text, buttons, links, images, video, embeds, layout containers, raw HTML and style sheets, plus the Smart Containers group: Repeater, Condition Block and Section Slot. Section Slot only appears while you're building a section, so a template's Components tab shows 18.
  • The ones you register. They appear in a group called Registered Components, or in the groups your developers name.

Before building a component, check whether Studio already ships it. The full list is in Built-in components.

Where to go next​

Report a problem with this page