Overview

Product Tour

Using a starter

Adding Tina to existing NextJS site

Getting Started

Using the Tina editor

The JavaScript toolkit for building content management interfaces

Content Modeling

Data Fetching

Contextual Editing

Running the Local GraphQL API

Getting a Single Document

Filtering

Sorting

Paginating

Performance

Limitations

Querying a Collection

Updating a Document

Adding a Document

Querying the API

Autogenerated GraphQL Client

Read Only Tokens

Markdown

Rich Text with MDX

Block-based editing

Active Field Indicator

Editing

Validation

Custom field components

Custom List Rendering

Format and parse input

Customizing a form

Manually editing and accessing Tina's edit state

Extending a field plugin

Creating a custom field component

Advanced field customization

Customizing Tina's UI

Extending Tina

Powerful Git-based content management for teams

Registration

Projects

Users

Tina Cloud Dashboard

Connecting the site

API Versioning

Branching

Data Layer

Adding Internationalization to Tina

Non-React-based SSG support

string

number

datetime

boolean

image

reference

object

rich-text

Content Types

".tina" folder

@tinacms/cli

next-tinacms-cloudinary

The CMS

Forms

Text

Text Area

Number

Image

Color

Toggle

Radio Group

Select

List

Group

Group List

Blocks

Date & Time

HTML

Field Plugins

@tinacms/toolkit

Editing with Tina


Tina is very flexible & extendable, so there are lots of different supported ways to edit content with Tina.

The simplest use-case is with a Markdown file, with front matter and a body.

```md
---
title: 'My first post'
date: '2021-01-01T00:00:00.000Z'
// ...
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultricies urna ut ex varius, sed fringilla nibh posuere. Vestibulum a pulvinar eros, vel varius orci. Sed convallis purus sed tellus pellentesque ornare quis non velit. Quisque eget nibh nec nisl volutpat aliquet. Donec pharetra turpis vitae diam aliquam rutrum. Sed porta elit ut mi vehicula suscipit. Ut in pulvinar nunc.
```

![markdown-editing](https://res.cloudinary.com/forestry-demo/image/upload/v1645712826/tina-io/docs/markdown.gif)

But, sometimes you may want to give your editors more of a template to work with. Tina also supports blocks-based editing, so that you can enable your editors to build out full pages using your pre-defined blocks

![blocks-based-editing](https://res.cloudinary.com/forestry-demo/image/upload/v1645712511/tina-io/docs/your-blocks.gif)

Continue reading to learn more about different ways to edit content with Tina.


Docs

Editing with Tina

Markdown