Tina is a toolkit for building visual editing into your site. This tutorial will walk you through Tina's fundamental building blocks by setting up editing on a basic create-react-app demo. To get the most from Tina, you should have a good working knowledge of JavaScript and React.

Why create-react-app?

Tina's UI is built with React. Using Tina in a plain React App is the simplest way to get familiar with Tina without relying on helper packages or meta-frameworks. Understanding the core concepts introduced in this tutorial will set you up for success later down the line.

If this is your first time working with Tina, we suggest going through this short tutorial.

Overview

These are the general steps we will cover.

1. Installing tinacms
2. Creating a CMS instance and adding the TinaProvider
3. Configuring the CMS object
4. Enabling the CMS
5. Creating and registering a form plugin
6. Loading content from an external API
7. Saving content changes
8. Adding alerts

Clone the demo

To get started, clone the demo, install its dependencies, and start the dev server.

git clone git@github.com:tinacms/tina-intro-tutorial.git my-tina-app
cd my-tina-app
yarn install
yarn start

If at any point you feel lost or confused during this tutorial, checkout the Tina Community Forum to get answers, help, and llama-humor.

Last Edited: November 26, 2020