Studio Docs

Bring Your Own Components

Register your existing React components so Studio uses them as the visual building blocks for authors.

Read these two first (the concept + the checklist):

  1. Design a component library that composes, not sprawls: the what to register pattern (atoms + layouts, DS-portable, 4-question framework). Answers “what should the shape of my library be?”
  2. How to shape components for Studio: five rules: the how each individual component must be shaped checklist (one prop per CT field, no hardcoded children, wrappers use slots, etc.). Answers “what breaks if I skip this and just start registering?”

The first is the strategy. The second is the tactical rulebook. Both take ~10 minutes together and save the rewrites.

On This Chapter

Start here

  • Chapter overview: How Studio’s registration model works and why you bring your own components instead of using the defaults.
  • How to shape components for Studio (five rules): Tactical checklist for shaping React components that bind cleanly to Studio. One prop per CT field · never hardcode child components in a wrapper’s .map() · wrappers use slots · structural name-matching · Sections are the reusable unit.

Registration path: start here

  • Registering components: The three register APIs (registerComponent, registerComponents, registerLazyComponent) and when to use each.
  • Optimizing load (lazy registration): Ship schemas eagerly and defer heavy component code until it’s needed. Read this alongside registering. The choice of API affects load behavior.
  • Component schema: prop types: Reference for every prop type Studio understands and how each renders in the right-panel form.
  • Design props: Mark a CSS-property prop as breakpoint-aware: authors set a value per breakpoint in the Settings tab, your component receives a generated class.
  • Bring Your Own State (BYOS): Shared state variables authors can bind, plugging in Redux/Zustand or web storage via getState/setState, and letting authors wire buttons to your functions with action props.
  • Default data: Give dropped components sensible defaults so they render visibly before any binding.

Design system integration

Rich content and tooling

  • JSON RTE (custom element rendering): Teach the SDK how to render custom elements stored in Contentstack’s JSON Rich Text fields.
  • Studio CLI: Scriptable component registration, Figma sync, and token import from the terminal.

Scaling and quality

See Also