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 start registering?"

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

• 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.

• 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 behaviour.
• Component schema: prop types: Reference for every prop type Studio accepts 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 tokens: Swap Studio's neutral defaults for your design system's colours, spacing, and typography.
• Figma to Studio (copy/paste): Paste a Figma frame directly into the canvas as a one-off composition.
• Figma to Studio (generate components): Turn a Figma frame into committable React component source with registrations wired up.
• Breakpoints: Configure the responsive viewports authors design against.

• 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.

• Testing your components: A workflow for verifying palette, form, and binding behaviour per component.
• Publishing the component library: Patterns for sharing one registry across multiple Studio-powered projects.

• Docs home
• Studio setup: Stand up the project before you start registering components.