Inline Editing

How content editors can make changes in context directly in the preview.

Inline editing is the ultimate editing tool because it removes the need for content editors to understand the structure of the content. Instead, they simply find the content they wish to change on the page, click on it, and make the change.

Edit Content Inline
Edit Content Inline

Inline editing is made possible through a process we call annotating components. This involves adding one or more data attributes to help Stackbit map a value in your CMS to an element in the DOM of your site.

Annotations work by first specifying the object ID to help Stackbit find the origin of the content, and then the field name.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
export const MyComponent = (props) => {
  return (
    <div data-sb-object-id={props.id}>
      <h1 data-sb-field-path="heading">{props.heading}</h1>
      ...
    </div>
  )
}

Stackbit uses the DOM tree to build a daisy-chained annotation declaration for each element with a data-sb-field-path attribute that has no DOM children with that attribute.

As a result, there are numerous methods for flexing annotations to suit your inline editing needs, including the ability to define the ID and field path in a single variable.

Learn more in the annotations reference