TinaCMS Editing Terminology

As TinaCMS continues to evolve, it's important to use clear and consistent language when describing its editing experience. We often reference a set of terms that explain how visual editing works and how editors interact with content. The following definitions outline these terms and show how they fit together:

Admin Sidebar

The sidebar that lists collections (not to be confused with the TinaCMS Editor).

Visual Editing

The overall two-pane editing experience, with the Editor on the left and a live Site Preview on the right.

TinaCMS Editor

The left-hand pane where content is edited using structured fields and inputs.

Site Preview

The right-hand pane that displays a live view of the website as content is edited.

Editable Regions

Elements in the Site Preview with a blue outline 🟦 are editable. Clicking any outlined element will automatically focus its corresponding field in the sidebar for immediate editing.

Fields

Fields define the structure of the content served to your site. These are defined in your config or within a separate Template.

const someTemplate: Template = {
  name: 'someTemplate',
  label: 'Some Template',
  fields: [
    { name: 'title', label: 'Title', type: 'string' }
   ]}

Rich Text Embed

Within rich-text fields, we have the option to embed custom components as a template. This allows you to enrich markdown-backed content with React components.

const someCollection: Collection = {
  name: 'someCollection',
  label: 'Some Collection',
  path: 'content/someCollection',
  format: 'mdx',
  fields: [
    {
    name: 'richBody',
    label: 'Rich Body',
    type: 'rich-text',
    templates: [
      someTemplate
      ]}
     ]
    }

Blocks

Blocks are a way to model flexible page-builder styled content. They are an ordered array of different components (sections), such as a hero, features, content, etc.

Editorial Workflow

The editorial workflow allows users to easily make changes in TinaCMS within a Git-based environment. It gives users the ability to:

• Create branches in the TinaCMS Editor
• Make Git commits from their own site
• Create pull-requests in the TinaCMS Editor