This guide will show you how to set up inline editing and inline blocks based on a simple create-react-app demo.

By the end of this guide, you should have a good understanding of how to set-up and work with inline editing and inline blocks. While this guide doesn't cover every single field or potential usecase, it should give you enough of a base to create Inline Editing experiences in your own projects.

Play around in the hosted final state.

The video above gives some reference as to what inline blocks look like in Tina. The demo we are going to set up will be more simple than what is shown in the video, but it should give you some inspiration around what's possible!

Set-up the demo repo

To get started, you'll need to clone the repo, install the dependencies. The master branch is set-up to be your initial starting point.

At this point, it is set up with a TinaCMS instance and renders a simple Hero component with hard-coded data. All of the styles and images are configured as well, so when you add blocks they'll look nice 💅.

git clone git@github.com:tinacms/inline-blocks-demo.git
cd inline-blocks-demo
yarn install
yarn start # Navigate to localhost:3000

Note that the demo isn't meant to be a 'starter'. It is for educational purposes to help you get familiar with the inline editing API.

There is a final-state branch that you can checkout if you get stuck or need a reference at any point.

Last Edited: August 17, 2020