The guides featured here will show you how to accomplish specific tasks with Tina. Guides are set up as step-by-step opportunities for learning. They are intended to introduce you to certain APIs, configurations, or workflows and provide rudimentary examples as a reference.
Guides should help you get familiar with a particular workflow or task. Use them to learn the basics, then refer back to the documentation for support in applying general solutions for your distinct needs.
Sometimes the guides will be accompanied with a demo repository — these aren't meant to be starters, but rather a general reference or entry point.
Get support in the community forum at any point. If you see typos or outdated information, feel free to click the 'Edit This Site' button in the footer and open a PR to correct it.
Before you start any guide, it is assumed that you have worked through the Introductory Tutorial to get familiar with Tina Basics.
Guides are organized by various categories. Those in the General category use plain React (or create-react-app); the information can generally be applied to any React framework (although the implementation may look different). Guides in the Next.js and Gatsby categories contain information specific to individual framework integration.
Working with Inline Blocks — Set up inline editing and inline blocks in a CRA demo.
Step 1: Overview - Step 2: Inline Form & Fields - Step 3: Convert Hero Component to a Block - Step 4: Customize Blocks Controls - Step 5: Settings Modal Fields - Step 6: Add More Blocks - Step 7: Nested Blocks - Step 8: Extend Styles - Step 9: Wrap Up
Adding Tina — Set up Tina without a backend in a Next.js blog starter.
Step 1: Overview - Step 2: Project Setup - Step 3: Adding the Tina Provider - Step 4: Creating Forms - Step 5: Next Steps
Using a Git Backend — Set up filesystem-based content management with Git & Next.js.
Step 1: Getting Started - Step 2: Adding a Backend - Step 3: Creating Git Forms
Using a GitHub Backend — Learn how to manage content in a Next.js site via the GitHub API with create-next-app. This guide is appropriate for public or private repositories and can also be used to implement Open Authoring.
Step 1: Initial Setup - Step 2: Setup the GitHub OAuth App - Step 3: Adding API Functions - Step 4: Create an Auth Redirect Page - Step 5: Configure the Custom App File - Step 6: Loading Content From GitHub - Step 7: Using GitHub Forms - Step 8: Setup Toolbar Plugins - Step 9: Add a Custom Document for Styles - Step 10: Hosting With Vercel
Using a Strapi Backend — Set up Tina on a Next.js site using Strapi as a content source.
Step 1: Overview - Step 2: Setting up Strapi - Step 3: Front end Setup - Step 4: Querying Strapi - Step 5: Authenticating with Strapi - Step 6: Editing with Tina - Step 7: Saving to Strapi
Adding Tina — Set up Tina without a backend on the gatsby-starter-blog.
Step 1: Project Setup - Step 2: Creating Forms - Step 3: Next Steps
Using a Git Backend — Set up local filesystem-based content management with Git & Gatsby.
Step 1: Installation - Step 2: Creating Remark Forms - Step 3: Creating JSON Forms - Step 4: Customizing Forms - Step 5: Avoid Empty Fields Errors - Step 6: Creating New Files - Step 7: New File Configuration - Step 8: Deleting Files - Step 9: Next Steps
Reference the Next.js or Gatsby Integration pages to see all of the blogs, packages, and guides specific to each framework.