TinaCMS

https://tina.io/docs
Admin
TinaCMS is a headless CMS that enables content management and live visual editing for static sites,...
Tokens:147,560
Snippets:2,179
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install development environment dependencies

Source: https://tina.io/docs/vibe-coding

Prompt to guide an AI assistant in checking and installing Node.js, Git, and pnpm.

```text
1. Check whether Node.js, Git & pnpm are already installed


2. If Node.js is missing, detect my OS and install Node.js LTS:
   a. macOS / Linux: install via nvm
   b. Windows: install via Chocolatey
      
3. Enable pnpm via corepack
   
4. If Git is missing, install it.


5. Confirm everything by running `node -v`, `pnpm -v`, and `git --version`.
```

--------------------------------

### Console output example

Source: https://tina.io/docs/graphql/cli

Example output showing the successful startup of the Filesystem GraphQL server.

```text
> yarn dev


Started Filesystem GraphQL server on port: 4001
Visit the playground at http://localhost:3000/admin/index.html#/graphql
Generating Tina config
...
```

--------------------------------

### Install and Run Migration Script

Source: https://tina.io/docs/guides/content-auditing-github-actions

Commands to install dependencies and execute the content migration process.

```bash
pnpm install
pnpm run migrate-content
```

--------------------------------

### Install Netlify Function Dependencies

Source: https://tina.io/docs/r/backend-media-handler

Install necessary packages for running the media handler on Netlify.

```bash
yarn add serverless-http express @tinacms/auth next-tinacms-<YOUR_MEDIA_STORE_NAME>
```

--------------------------------

### Example CLI output

Source: https://tina.io/docs/frameworks/next/pages-router

Confirmation messages displayed after running the initialization command.

```text
 Adding file at content/posts/hello-world.md... ✅
 Adding file at pages/demo/blog/[filename].tsx... ✅
```

--------------------------------

### Initialization Output

Source: https://tina.io/docs/frameworks/next/app-router

Example output showing files created during the initialization process.

```text
Adding file at content/posts/hello-world.md... ✅
Adding file at pages/demo/blog/[filename].tsx... ✅
```

--------------------------------

### Install and Manage Nginx

Source: https://tina.io/docs/tinacloud/deployment-options/alibaba-cloud

Commands to install Nginx and manage its service state on the server.

```bash
yum install nginx
```

```bash
systemctl start nginx    # Start the Nginx service
systemctl enable nginx   # Configure Nginx to start automatically on system boot
systemctl status nginx   # Check the status of the Nginx service
```

--------------------------------

### Configure Local Environment

Source: https://tina.io/docs/self-hosted/starters/nextjs-vercel

Command to initialize the local .env file from the example template.

```bash
cp .env.example .env
```

--------------------------------

### Install date formatting library

Source: https://tina.io/docs/guides/converting-gatsby-to-tina

Install the dateformat package to handle date formatting in the visual editor.

```bash
yarn add dateformat
```

--------------------------------

### Install provider-specific dependencies

Source: https://tina.io/docs/self-hosted/manual-setup

Install the necessary packages for the chosen Git provider, database adapter, and authentication provider.

```bash
yarn add tinacms-gitprovider-github tinacms-authjs upstash-redis-level @upstash/redis
```

--------------------------------

### Install Dependencies

Source: https://tina.io/docs/self-hosted/starters/nextjs-vercel

Command to install project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### Install next-tinacms-dos

Source: https://tina.io/docs/r/digital-ocean-spaces

Commands to install the required package via Yarn or NPM.

```bash
yarn add next-tinacms-dos
```

```bash
npm install next-tinacms-dos
```

--------------------------------

### Install Mermaid package

Source: https://tina.io/docs/reference/rich-text-usage/mermaid

Install the required Mermaid dependency via pnpm.

```bash
pnpm install mermaid
```

--------------------------------

### Install TinaCMS Auth

Source: https://tina.io/docs/r/backend-media-handler

Install the required authentication package for managing media handler access.

```bash
yarn add @tinacms/auth
```

--------------------------------

### Start the development server

Source: https://tina.io/docs/frameworks/astro

Commands to navigate to the project directory and launch the Astro development server.

```bash
cd your-project-name      # the folder you just created
pnpm dev
```

--------------------------------

### Run development server

Source: https://tina.io/docs/guides/separate-content-repo

Standard command to start the development server from the generator repository.

```bash
pnpm dev   # or npm run dev / yarn dev
```

--------------------------------

### Install PM2 Process Manager

Source: https://tina.io/docs/tinacloud/deployment-options/alibaba-cloud

Install PM2 globally to manage Node.js application processes in production.

```bash
pnpm install -g pm2
```

--------------------------------

### Launch Development Server

Source: https://tina.io/docs/introduction/tina-init

Start your application with the TinaCMS development environment enabled.

```bash
yarn dev
```

--------------------------------

### Monorepo project structure example

Source: https://tina.io/docs/faq

Directory structure demonstrating how TinaCMS can be configured within a monorepo.

```text
    /projects/site-a
    /projects/site-b
    /projects/site-c
```

--------------------------------

### Initialize TinaCMS

Source: https://tina.io/docs/beginner-tutorials/install-tinacms

Run this command in your project directory to start the TinaCMS initialization process.

```bash
npx @tinacms/cli@latest init
```

--------------------------------

### Markdown source example for conversion

Source: https://tina.io/docs/guides/converting-md-to-mdx

Example of legacy Markdown containing custom containers and shortcodes before migration.

```markdown
::: email-template  
| | |
| -------- | --- |
| To: | XXX |
| Cc: | YYY |
| Bcc: | ZZZ |
| Subject: | {{ EMAIL SUBJECT }} |  
::: email-content
### Hi XXX,
{{ EMAIL CONTENT }}
:::  
:::  
::: good  
Figure: Good example - Nice email template  
::: 





::: good
![Figure: Well-structured diagram](diagram.png)
:::

`youtube: https://www.youtube.com/watch?v=dQw4w9WgXcQ`
**Watch this classic hit**
```

--------------------------------

### Run Development Server

Source: https://tina.io/docs/guides/content-outside-app-folder

Start the TinaCMS development server from your application directory.

```bash
cd packages/website
npx tinacms dev -c "next dev"
```

--------------------------------

### Run Development Server

Source: https://tina.io/docs/cli-overview

Starts the TinaCMS development environment with a custom command.

```bash
tinacms dev -c "<Yor Dev Command>"
```

--------------------------------

### Example Front Matter Template Usage

Source: https://tina.io/docs/forestry/common-errors

Demonstrates the expected structure for template keys in front matter.

```yaml
- template: call-to-action
#   ...
# this assumes your block has templateKey: 'template' set on your blocks field.
- template: feature
#   ...
```

--------------------------------

### Initialize a NextJS project

Source: https://tina.io/docs/beginner-tutorials/nextjs-app

Run this command in your terminal to start the NextJS project creation process.

```bash
npx create-next-app@latest
```

--------------------------------

### Migration Script Output Example

Source: https://tina.io/docs/guides/content-auditing-github-actions

Expected console output after successfully migrating content files.

```text
updated: content/posts/future-of-remote-work-2025.mdx 
updated: content/posts/learning-about-components.mdx 
updated: content/posts/june/learning-about-tinacloud.mdx 
updated: content/posts/artificial-intelligence-explained.mdx
```

--------------------------------

### Basic MDX Example

Source: https://tina.io/docs/editing/markdown

Demonstrates an MDX file which supports standard markdown alongside JSX components.

```markdown
---
title: This is my title
---


## Knock Knock!


Who's there?


<PunchLine text="orange your glad I didn't say banana?" />
```

--------------------------------

### Example Source JSON

Source: https://tina.io/docs/reference/toolkit/fields/group

Sample JSON structure representing nested contact information.

```json
{
  "contact": {
    "email": "hello@tinacms.org",
    "twitter_handle": "tinacms",
    "github_handle": "tinacms"
  }
}
```

--------------------------------

### Basic Markdown Example

Source: https://tina.io/docs/editing/markdown

Demonstrates the structure of a standard .md file including frontmatter and markdown body.

```markdown
---
title: This is my title
---


## Knock Knock!


Who's there?
```

--------------------------------

### CLI output for locale testing

Source: https://tina.io/docs/guides/nextjs-internationalization

Example console output when visiting different locale-specific routes.

```text
locale en-US
```

```text
locale fr
```

--------------------------------

### Start TinaCMS Development Server

Source: https://tina.io/docs/frameworks/jekyll

Launch the TinaCMS development environment alongside the Jekyll server.

```bash
npx tinacms dev -c "jekyll serve"
```

--------------------------------

### List Field with Text Input

Source: https://tina.io/docs/reference/toolkit/fields/list

Example configuration for a list of strings using the text component.

```yaml
---
lunch_menu:
  - Hotdog
  - Tacos
  - Falafel
  - Sliders
---
```

```javascript
const formOptions = {
  fields: [
    {
      label: 'Lunch Options',
      name: 'frontmatter.lunch_menu',
      component: 'list',
      defaultItem: 'Turkey & Swiss',
      field: {
        component: 'text',
      },
    },
  ],
}
```

--------------------------------

### MDX output example

Source: https://tina.io/docs/guides/converting-md-to-mdx

The resulting MDX code after processing the legacy Markdown through the migration script.

```jsx
<emailEmbed
  from=""
  to="XXX"
  cc="YYY"
  bcc="ZZZ"
  subject="&#123;&#123; EMAIL SUBJECT &#125;&#125;"
  body={<>
    ## Hi XXX,
&#123;&#123; EMAIL CONTENT &#125;&#125;
  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: "Good example - Nice email template",
    shouldDisplay: true
  }}
/>




<imageEmbed
  alt="Image"
  size="large"
  showBorder={true}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Well-structured diagram',
    shouldDisplay: true
  }}
  src="diagram.png"
/>


<youtubeEmbed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" description="Watch this classic hit" />
```

--------------------------------

### List Field with Select Input

Source: https://tina.io/docs/reference/toolkit/fields/list

Example configuration for a list of selectable options using the select component.

```json
{
  "beatles_albums": [
    "The Beatles(White Album)",
    "Let It Be",
    "Abbey Road",
    "Sgt. Pepper's Lonely Hearts Club Band"
  ]
}
```

```javascript
const formOptions = {
  fields: [
    {
      label: 'Top 5 Beatles Albums',
      name: 'beatles_albums',
      component: 'list',
      defaultItem: 'Abbey Road',
      field: {
        component: 'select',
        options: [
          'Let It Be',
          'Abbey Road',
          'Yellow Submarine',
          'The Beatles(White Album)',
          'Magical Mystery Tour',
          "Sgt. Pepper's Lonely Hearts Club Band",
          'Revolver',
          'Yesterday...and Today',
          'Rubber Soul',
          'Help!',
          "A Hard Day's Night",
        ],
      },
    },
  ],
}
```

--------------------------------

### Install Clerk dependencies

Source: https://tina.io/docs/reference/self-hosted/auth-provider/clerk-auth

Install the required Clerk and TinaCMS-Clerk packages.

```bash
yarn add @clerk/clerk-js @clerk/backend tinacms-clerk
```

--------------------------------

### Install Auth.js Dependencies

Source: https://tina.io/docs/reference/self-hosted/auth-provider/authjs

Install the necessary packages for Auth.js integration with TinaCMS.

```bash
yarn add next-auth tinacms-authjs
```

--------------------------------

### Start development server

Source: https://tina.io/docs/graphql/cli

Commands to launch the local development environment including the GraphQL Content API.

```bash
npm run dev
```

```bash
yarn dev
```

--------------------------------

### Start the development server

Source: https://tina.io/docs/beginner-tutorials/nextjs-app

Execute this command within the project directory to launch the local development environment.

```bash
npm run dev
```

--------------------------------

### Install Cloudinary Dependencies

Source: https://tina.io/docs/r/cloudinary

Install the necessary packages for Cloudinary integration with TinaCMS.

```bash
yarn add next-tinacms-cloudinary @tinacms/auth
```

--------------------------------

### Install next-tinacms-s3 package

Source: https://tina.io/docs/r/aws-s3-bucket

Commands to install the required package using Yarn or NPM.

```bash
yarn add next-tinacms-s3
```

```bash
npm install next-tinacms-s3
```

--------------------------------

### Initialize TinaCloud Backend

Source: https://tina.io/docs/r/Production-with-TinaCloud

Run this command to connect your local site to the TinaCloud backend and populate your environment variables.

```bash
npx @tinacms/cli init backend
```

--------------------------------

### Install TinaCMS dependencies

Source: https://tina.io/docs/self-hosted/manual-setup

Install the core TinaCMS packages and the CLI tool as a development dependency.

```bash
yarn add tinacms @tinacms/datalayer
```

```bash
yarn add --dev @tinacms/cli
```

--------------------------------

### Clone the sample Gatsby project

Source: https://tina.io/docs/guides/converting-gatsby-to-tina

Initializes the project by cloning the starter repository and navigating into the directory.

```bash
git clone https://github.com/tinacms/gatsby-mdx-example-blog
cd gatsby-mdx-example-blog
```

--------------------------------

### Prepare Deployment Directory and Project

Source: https://tina.io/docs/tinacloud/deployment-options/alibaba-cloud

Commands to create the deployment directory and initialize a new TinaCMS project.

```bash
mkdir -p /www/tinademo
cd /www/tinademo
```

```bash
npx create-tina-app@latest
```

--------------------------------

### Example: Select an Author

Source: https://tina.io/docs/reference/toolkit/fields/select

An example of using a select field with an array of strings to choose an author.

```APIDOC
{
  "component": "select",
  "name": "frontmatter.authors",
  "label": "Author",
  "description": "Select an author for this post",
  "options": ["Arundhati Roy", "Ruth Ozeki", "Zadie Smith"]
}
```

--------------------------------

### Run the development server

Source: https://tina.io/docs/introduction/using-starter

Execute this command within your project directory to start the local development environment using pnpm.

```bash
pnpm run dev
```

--------------------------------

### Install Specific TinaCMS Versions

Source: https://tina.io/docs/guides/upgrade-to-latest-version

Specify exact versions for both the tinacms package and the @tinacms/cli when performing an installation.

```bash
npm install tinacms@2.8.0 @tinacms/cli@1.10.0
```

--------------------------------

### Markdown and Parsed AST Example

Source: https://tina.io/docs/reference/types/rendering-markdown

Example of raw markdown content and its corresponding parsed AST structure.

```markdown
This is how TinaCMS turns your markdown into structured data!


Here is an image: ![](/github-mark.svg)
```

```json
{
  "type": "root",
  "children": [
    {
      "type": "p",
      "children": [
        {
          "type": "text",
          "text": "This is how TinaCMS turns your markdown into structured data!"
        }
      ]
    },
    {
      "type": "p",
      "children": [
        {
          "type": "text",
          "text": "Here is an image: "
        },
        {
          "type": "img",
          "url": "/github-mark.svg",
        }
      ]
    },
  ]
}
```

--------------------------------

### Initialize TinaCMS Backend

Source: https://tina.io/docs/r/self-hosting-nextjs

Run this command in the terminal to set up TinaCMS and the required backend components for self-hosting.

```bash
npx @tinacms/cli@latest init backend
```

--------------------------------

### Run local development server

Source: https://tina.io/docs/reference/self-hosted/auth-provider/authjs

Execute this command in your terminal to start the development server with the production authentication flow enabled.

```bash
yarn dev:prod
```

--------------------------------

### JSON Data Structure Example

Source: https://tina.io/docs/reference/toolkit/fields/group-list

An example of a JSON data structure containing a list of author objects.

```json
{
  "author": [
    {
      "name": "Alice Walker",
      "id": "alice-walker",
      "best-novel": "The Color Purple"
    },
    {
      "name": "Margaret Atwood",
      "id": "margaret-atwood",
      "best-novel": "Oyrx and Crake"
    },
    {
      "name": "Isabel Allende",
      "id": "isabel-allende",
      "best-novel": "Daughter of Fortune"
    }
  ]
}
```

--------------------------------

### Example of a Vague Bug Report

Source: https://tina.io/docs/contributing/bug-reports

An example of an unhelpful bug report that lacks sufficient detail for investigation.

```text
The image insert is broken, it just crashes.
```

--------------------------------

### Fuzzy search typo examples

Source: https://tina.io/docs/r/content-search

Common examples of typos and transpositions that are automatically handled by the default fuzzy search configuration.

```text
// Single character errors
"Raect"       → matches "React"
"TypeScrpt"   → matches "TypeScript"
"Javscript"   → matches "JavaScript"


// Transposed letters
"teh"         → matches "the"
"freind"      → matches "friend"


// Multi-word queries with typos
"Raect tutrial"           → matches "React tutorial"
"TypeScrpt developmnt"    → matches "TypeScript development"
```

--------------------------------

### Launch development server for existing site

Source: https://tina.io/docs/frameworks/astro

Start the development server after initializing TinaCMS in an existing project.

```bash
pnpm dev
```

--------------------------------

### Color Field Definition Example

Source: https://tina.io/docs/reference/toolkit/fields/color

Example implementation of a color field within a form definition, using the sketch widget with a custom color palette.

```javascript
const BlogPostForm = {
  fields: [
    {
      type: 'string',
      name: 'rawFrontmatter.background_color',
      label: 'Background Color',
      description: 'Edit the page background color here',
      ui: {
        component: 'color',
        colorFormat: 'hex',
        colors: ['#EC4815', '#241748', '#B4F4E0', '#E6FAF8'],
        widget: 'sketch',
        width: '240px'
      },
    },
    // ...
  ],
}
```

--------------------------------

### Initialize TinaCMS

Source: https://tina.io/docs/cli-overview

Sets up TinaCMS dependencies and configuration in an existing project.

```bash
npx @tinacms/cli init
```

--------------------------------

### Switching to databaseClient

Source: https://tina.io/docs/r/self-hosted-querying-data

Diff showing the import change required to switch from the standard client to the databaseClient.

```diff
- import { client } from '../[pathToTina]/tina/__generated__/client'
+ import { client } from '../[pathToTina]/tina/__generated__/databaseClient'
// ...
```

--------------------------------

### Set up Next.js API Route

Source: https://tina.io/docs/r/digital-ocean-spaces

Create a catch-all API route to handle media interactions and authorization.

```typescript
// pages/api/dos/[...media].ts


import {
  mediaHandlerConfig,
  createMediaHandler,
} from 'next-tinacms-dos/dist/handlers'


import { isAuthorized } from '@tinacms/auth'


export const config = mediaHandlerConfig


export default createMediaHandler({
  config: {
    endpoint: process.env.SPACES_ENDPOINT,
    credentials: {
      accessKeyId: process.env.SPACES_KEY || '',
      secretAccessKey: process.env.SPACES_SECRET_KEY || '',
    },
    region: 'us-east-1',
  },
  bucket: process.env.SPACES_NAME || '',
  authorized: async (req, _res) => {
    if (process.env.NODE_ENV === 'development') {
      return true
    }
    try {
      const user = await isAuthorized(req)


      return user && user.verified
    } catch (e) {
      console.error(e)
      return false
    }
  },
})
```

--------------------------------

### Initialize Content Directory

Source: https://tina.io/docs/guides/content-outside-app-folder

Commands to create the required tina folder within your content directory.

```bash
mkdir -p content/tina
```

```bash
touch content/tina/.gitkeep
```

--------------------------------

### Example of custom component usage

Source: https://tina.io/docs/guides/converting-gatsby-to-tina

Usage of the custom RichBlockQuote component in markdown content.

```markdown
<RichBlockQuote>
  ### TinaCMS Rocks!


Go check out the starter template on [tina.io](https://tina.io/docs/introduction/using-starter/)
</RichBlockQuote>
```

--------------------------------

### Build Project for Production

Source: https://tina.io/docs/cli-overview

Commands for compiling schemas and generating clients for various build scenarios.

```bash
tinacms build && next build
```

```bash
tinacms build && <Your SSG build command>
```

```bash
tinacms build --local -c "next build"
```

```bash
tinacms build --content=local -c "next build"
```

--------------------------------

### Front matter content structure

Source: https://tina.io/docs/forestry/common-errors

Example of content structure referencing block templates.

```yaml
sections:
  - template: call-to-action
```

--------------------------------

### Clone Repository

Source: https://tina.io/docs/self-hosted/starters/nextjs-vercel

Command to clone the forked starter repository to a local machine.

```bash
git clone <YourGitUrl>
```

--------------------------------

### View Metadata Structure

Source: https://tina.io/docs/contextual-editing/tinafield

Example of the _content_source metadata injected by TinaCMS for editable fields.

```json
{
  "type": "root",
    "children": [
      {
        "type": "DateTime",
        "format": "MMM yyyy",
        "stringTest": "...",
        "_content_source": { // metadata
          "queryId": "6rix9",
          "path": [
            "post",
            "body",
            "children",
            0
          ]
        }
      }
    ]
}
```

--------------------------------

### Define Custom Template Identifiers

Source: https://tina.io/docs/reference/types/object

Example of how templates are stored in the document using the _template key.

```yaml
---
farm:
  - name: Tina
    _template: llama
  - name: Napoleon
    _template: farmer
---
```
Tokens:
Raw