{"pageProps":{"slug":"/tinacms/guides","markdownFile":{"sha":"","fileRelativePath":"content/tinacms/guides/index.md","data":{"frontmatter":{"title":"TinaCMS Guides"},"excerpt":" 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…","markdownBody":"\nThe 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.\n\n## How To Use\n\nGuides should help you get familiar with a particular workflow or task. Use them to learn the basics, then refer back to the [documentation](/tinacms/docs) for support in applying general solutions for your distinct needs.\n\nSometimes the guides will be accompanied with a demo repository — these aren't meant to be starters, but rather a general reference or entry point.\n\nGet support in the [community forum](https://community.tinacms.org/) 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.\n\n> Before you start any guide, it is assumed that you have worked through the [Introductory Tutorial](/tinacms/docs/getting-started/introduction) to get familiar with Tina Basics.\n\n## Categories\n\nGuides 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.\n\n### General\n\n- [**Working with Inline Blocks**](/tinacms/guides/general/inline-blocks/overview) — Set up [inline editing](/tinacms/docs/ui/inline-editing) and [inline blocks](/tinacms/docs/ui/inline-editing/inline-blocks) in a [CRA demo](https://logan-anderson.github.io/cra-hosted-demo/).\n\n  > [Step 1: _Overview_](/tinacms/guides/general/inline-blocks/overview) - [ Step 2: _Inline Form & Fields_](/tinacms/guides/general/inline-blocks/inline-form-fields) - [ Step 3: _Convert Hero Component to a Block_](/tinacms/guides/general/inline-blocks/hero-to-block) - [Step 4: _Customize Blocks Controls_](/tinacms/guides/general/inline-blocks/customize-controls) - [Step 5: _Settings Modal Fields_](/tinacms/guides/general/inline-blocks/settings-modal) - [Step 6: _Add More Blocks_](/tinacms/guides/general/inline-blocks/add-more-blocks) - [Step 7: _Nested Blocks_](/tinacms/guides/general/inline-blocks/nested-blocks) - [Step 8: _Extend Styles_](/tinacms/guides/general/inline-blocks/extend-styles) - [Step 9: _Wrap Up_](/tinacms/guides/general/inline-blocks/wrap-up)\n\n### Next.js\n\n- [**Adding Tina**](/tinacms/guides/nextjs/adding-tina/overview) — Set up Tina without a backend in a [Next.js blog starter](https://github.com/vercel/next.js/tree/canary/examples/blog-starter).\n\n  > [Step 1: _Overview_](/tinacms/guides/nextjs/adding-tina/overview) - [Step 2: _Project Setup_](/tinacms/guides/nextjs/adding-tina/project-setup) - [Step 3: _Adding the Tina Provider_](/tinacms/guides/nextjs/adding-tina/adding-tina-provider) - [Step 4: _Creating Forms_](/tinacms/guides/nextjs/adding-tina/creating-forms) - [Step 5: _Next Steps_](/tinacms/guides/nextjs/adding-tina/next-steps)\n\n- [**Using a Git Backend**](/tinacms/guides/nextjs/git/getting-started) — Set up filesystem-based content management with Git & Next.js.\n\n  > [Step 1: _Getting Started_](/tinacms/guides/nextjs/git/getting-started) - [Step 2: _Adding a Backend_](/tinacms/guides/nextjs/git/adding-backend) - [Step 3: _Creating Git Forms_](/tinacms/guides/nextjs/git/creating-git-forms)\n\n- [**Using a GitHub Backend**](/tinacms/guides/nextjs/github/initial-setup) — Learn how to manage content in a Next.js site via the GitHub API with [`create-next-app`](https://nextjs.org/docs#setup). This guide is appropriate for public or private repositories and can also be used to implement [Open Authoring](/blog/introducing-visual-open-authoring).\n\n  > [Step 1: _Initial Setup_](/tinacms/guides/nextjs/github/initial-setup) - [Step 2: _Setup the GitHub OAuth App_](/tinacms/guides/nextjs/github/github-oauth-app) - [Step 3: _Adding API Functions_](/tinacms/guides/nextjs/github/api-functions) - [Step 4: _Create an Auth Redirect Page_](/tinacms/guides/nextjs/github/auth-redirect) - [Step 5: _Configure the Custom App File_](/tinacms/guides/nextjs/github/configure-custom-app) - [Step 6: _Loading Content From GitHub_](/tinacms/guides/nextjs/github/loading-github-content) - [Step 7: _Using GitHub Forms_](/tinacms/guides/nextjs/github/github-forms) - [Step 8: _Setup Toolbar Plugins_](/tinacms/guides/nextjs/github/toolbar-plugins) - [Step 9: _Add a Custom Document for Styles_](/tinacms/guides/nextjs/github/custom-doc-styled-components) - [Step 10: _Hosting With Vercel_](/tinacms/guides/nextjs/github/hosting-vercel)\n\n- [**Using a Strapi Backend**](/tinacms/guides/nextjs/tina-with-strapi/overview) — Set up Tina on a Next.js site using [Strapi](https://strapi.io/) as a content source.\n\n  > [Step 1: _Overview_](/tinacms/guides/nextjs/tina-with-strapi/overview) - [Step 2: _Setting up Strapi_](/tinacms/guides/nextjs/tina-with-strapi/strapi-setup) - [Step 3: _Front end Setup_](/tinacms/guides/nextjs/tina-with-strapi/front-end-setup) - [Step 4: _Querying Strapi_](/tinacms/guides/nextjs/tina-with-strapi/querying-strapi) - [Step 5: _Authenticating with Strapi_](/tinacms/guides/nextjs/tina-with-strapi/authenticating-with-strapi) - [Step 6: _Editing with Tina_](/tinacms/guides/nextjs/tina-with-strapi/editing-with-tina) - [Step 7: _Saving to Strapi_](/tinacms/guides/nextjs/tina-with-strapi/saving-to-strapi)\n\n### Gatsby\n\n- [**Adding Tina**](/tinacms/guides/gatsby/adding-tina/project-setup) — Set up Tina without a backend on the [`gatsby-starter-blog`](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/).\n\n  > [Step 1: _Project Setup_](/tinacms/guides/gatsby/adding-tina/project-setup) - [Step 2: _Creating Forms_](/tinacms/guides/gatsby/adding-tina/creating-forms) - [Step 3: _Next Steps_](/tinacms/guides/gatsby/adding-tina/next-steps)\n\n- [**Using a Git Backend**](/tinacms/guides/gatsby/git/installation) — Set up local filesystem-based content management with Git & Gatsby.\n\n  > [Step 1: _Installation_](/tinacms/guides/gatsby/git/installation) - [Step 2: _Creating Remark Forms_](/tinacms/guides/gatsby/git/create-remark-form) - [Step 3: _Creating JSON Forms_](/tinacms/guides/gatsby/git/create-json-form) - [Step 4: _Customizing Forms_](/tinacms/guides/gatsby/git/customize-form) - [Step 5: _Avoid Empty Fields Errors_](/tinacms/guides/gatsby/git/empty-field-errors) - [Step 6: _Creating New Files_](/tinacms/guides/gatsby/git/create-new-files) - [Step 7: _New File Configuration_](/tinacms/guides/gatsby/git/configuration) - [Step 8: _Deleting Files_](/tinacms/guides/gatsby/git/deleting-files) - [Step 9: _Next Steps_](/tinacms/guides/gatsby/git/next-steps)\n\n> Reference the [Next.js](/tinacms/docs/integrations/nextjs) or [Gatsby](/tinacms/docs/integrations/gatsby) Integration pages to see all of the blogs, packages, and guides specific to each framework.\n"}},"tocItems":"  - [How To Use](#how-to-use)\n  - [Categories](#categories)\n    - [General](#general)\n    - [Next.js](#nextjs)\n    - [Gatsby](#gatsby)\n","navItems":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/tinacms/docs/getting-started/introduction","slug":"/tinacms/docs/getting-started/introduction","title":"Introduction"},{"id":"/tinacms/docs/getting-started/cms-set-up","slug":"/tinacms/docs/getting-started/cms-set-up","title":"Set Up the CMS"},{"id":"/tinacms/docs/getting-started/edit-content","slug":"/tinacms/docs/getting-started/edit-content","title":"Edit Content"},{"id":"/tinacms/docs/getting-started/backends","slug":"/tinacms/docs/getting-started/backends","title":"Backends"},{"id":"/tinacms/docs/getting-started/faq","slug":"/tinacms/docs/getting-started/faq","title":"FAQ"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/tinacms/docs/cms","slug":"/tinacms/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/tinacms/docs/ui","title":"Sidebar & Toolbar","slug":"/tinacms/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/tinacms/docs/ui/inline-editing","items":[{"id":"/tinacms/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/tinacms/docs/ui/inline-editing/inline-text"},{"id":"/tinacms/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/tinacms/docs/ui/inline-editing/inline-textarea"},{"id":"/tinacms/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/tinacms/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/tinacms/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/tinacms/docs/ui/inline-editing/inline-image"},{"id":"/tinacms/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/tinacms/docs/ui/inline-editing/inline-group"},{"id":"/tinacms/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/tinacms/docs/ui/inline-editing/inline-blocks"}]},{"id":"/tinacms/docs/ui/alerts","title":"Alerts","slug":"/tinacms/docs/ui/alerts"},{"id":"/tinacms/docs/ui/styles","title":"Custom Styles","slug":"/tinacms/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/tinacms/docs/plugins"},{"title":"Forms","id":"forms","slug":"/tinacms/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/tinacms/docs/plugins/fields","items":[{"id":"/tinacms/docs/plugins/fields/text","slug":"/tinacms/docs/plugins/fields/text","title":"Text"},{"id":"/tinacms/docs/plugins/fields/textarea","slug":"/tinacms/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/tinacms/docs/plugins/fields/number","slug":"/tinacms/docs/plugins/fields/number","title":"Number"},{"id":"/tinacms/docs/plugins/fields/image","slug":"/tinacms/docs/plugins/fields/image","title":"Image"},{"id":"/tinacms/docs/plugins/fields/color","slug":"/tinacms/docs/plugins/fields/color","title":"Color"},{"id":"/tinacms/docs/plugins/fields/toggle","slug":"/tinacms/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/tinacms/docs/plugins/fields/radio-group","slug":"/tinacms/docs/plugins/fields/radio-group","title":"Radio Group"},{"id":"/tinacms/docs/plugins/fields/select","slug":"/tinacms/docs/plugins/fields/select","title":"Select"},{"id":"/tinacms/docs/plugins/fields/tags","slug":"/tinacms/docs/plugins/fields/tags","title":"Tags"},{"id":"/tinacms/docs/plugins/fields/list","slug":"/tinacms/docs/plugins/fields/list","title":"List"},{"id":"/tinacms/docs/plugins/fields/group","slug":"/tinacms/docs/plugins/fields/group","title":"Group"},{"id":"/tinacms/docs/plugins/fields/group-list","slug":"/tinacms/docs/plugins/fields/group-list","title":"Group List"},{"id":"/tinacms/docs/plugins/fields/blocks","slug":"/tinacms/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/tinacms/docs/plugins/fields/date","slug":"/tinacms/docs/plugins/fields/date","title":"Date & Time"},{"id":"/tinacms/docs/plugins/fields/markdown","slug":"/tinacms/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/tinacms/docs/plugins/fields/html","slug":"/tinacms/docs/plugins/fields/html","title":"HTML"},{"id":"/tinacms/docs/plugins/fields/custom-fields","slug":"/tinacms/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/tinacms/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/tinacms/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/tinacms/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/tinacms/docs/events","slug":"/tinacms/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/tinacms/docs/media","slug":"/tinacms/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/tinacms/docs/api","slug":"/tinacms/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/tinacms/docs/integrations/nextjs","slug":"/tinacms/docs/integrations/nextjs","title":"Next.js"},{"id":"/tinacms/docs/integrations/gatsby","slug":"/tinacms/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Guides","id":"guides","items":[{"id":"/tinacms/guides","slug":"/tinacms/guides","title":"Overview"},{"id":"/tinacms/guides#general","href":"/tinacms/guides#general","title":"General","items":[{"id":"/tinacms/guides/general/inline-blocks/overview","slug":"/tinacms/guides/general/inline-blocks/overview","title":"Inline Blocks"}]},{"id":"/tinacms/guides#nextjs","href":"/tinacms/guides#nextjs","title":"Next.js","items":[{"id":"/tinacms/guides/nextjs/adding-tina/overview","slug":"/tinacms/guides/nextjs/adding-tina/overview","title":"Adding Tina"},{"id":"/tinacms/guides/nextjs/git/getting-started","slug":"/tinacms/guides/nextjs/git/getting-started","title":"Git Backend"},{"id":"/tinacms/guides/nextjs/github/initial-setup","slug":"/tinacms/guides/nextjs/github/initial-setup","title":"GitHub Backend"},{"id":"/tinacms/guides/nextjs/tina-with-strapi/overview","slug":"/tinacms/guides/nextjs/tina-with-strapi/overview","title":"Strapi Backend"}]},{"id":"/tinacms/guides#gatsby","href":"/tinacms/guides#gatsby","title":"Gatsby","items":[{"id":"/tinacms/guides/gatsby/adding-tina/project-setup","slug":"/tinacms/guides/gatsby/adding-tina/project-setup","title":"Adding Tina"},{"id":"/tinacms/guides/gatsby/git/installation","slug":"/tinacms/guides/gatsby/git/installation","title":"Git Backend"}]}]},{"title":"Release Notes","id":"releases","items":[{"id":"/tinacms/docs/releases","href":"/tinacms/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages","slug":"/packages","title":"All Packages"},{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}]},"__N_SSG":true}