Visual data bindings with React

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

React allows you to add the data-cms-bind attribute on any DOM element. It is recommended that these are added recursively into each object. If you are using an older version of React, you may need to forward this on differently. Please refer to the React documentation.

class Heading extends React.Component {
  render() {
    return (
      <h1 data-cms-bind="title">{this.props.title}</h1>
    );
  }
}

It is recommended that you pass the parent binding as a prop. This way your component can be reused in any stack. For the base case a empty string should be used as the binding. If you have an array component and a component for each array, it is recommended to skip the array binding to reduce the number of editor clicks.