Components in Stackbit are not a new species: if you have experience with writing modern React components, you already know most of what you need for writing one.

Beyond that, there are a few added capabilities to learn for making your components visual editor-friendly.

The themes provided with Stackbit all come with built-in components, and you're free to extend or replace them, in part or in full. For practical guides to adding and extending components, see the How To Guides.

Driven by Content

Components are driven by the arguments they receive, which always include the content object to render. That object has properties defined by a specific model. Content objects may have multiple levels of nested sub-objects, or link to other related objects.

A model can define not only content fields such as title or body text, but also fields for controlling the visual layout of the component. Basically, everything that is not hard-coded in the component is determined by the content object's properties, which follow the model.

Many components are built to handle a specific content type, and delegate the rendering of any nested sub-objects in the content object to other components (more on that later, no worries). However, there is not necessarily a 1:1 relationship between components and models: some components may render content including its nested objects, while others accept content objects of mutliple types.

What to Know

This guide is split into several topics you should learn in order to develop effective components. This means components that behave in expected ways when used in the visual editor, that are flexible and future-proof - and ideally are even fun to use (gasp!).

  1. The high-level buckets into which our components are divided, in line with Atomic Design.
  2. How to nest components within other components, and how to use model groups for effectively specifying that relationship.
  3. How to provide styling options to content editors.
  4. What are content presets and how they're useful.
  5. How to register new components or override built-in ones.

Next up: Thinking in Atomic Design.