Naming Conventions for Collections

There are two primary reasons for following naming conventions in your TinaCMS project:

  • Improved hot reloads: Rebuilding your schema is an expensive process and keeping your schemas in separate files prevents rebuilds making code changes
  • Improved code scanning: It's easy to find the schema configuration for a React component when it has the same file name as the component

Naming Conventions

naming convention

Purpose

.schema.tsx

Used for collections and code shared between collections

.template.tsx

Used for template definitions used for block-based rendering

React components

The typical convention is to add the schema for a given React component to an accompanying file of the same name with the suffix schema.tsx. This ensures your index is only rebuilt when changes are made to your data model and not to the component.

src
app
components
events-list.schema.tsx
events-list.tsx

Shared Fields

Code shared between multiple collections, including field definitions and lists of field definitions are also typically stored in files ending in .schema.tsx. In the Example below assume we are sharing the title field between the hero-image and image-text-block. Component.

src
app
components
blocks
hero-image.schema.tsx
hero-image.tsx
image-text-block.schema.tsx
image-text-block.tsx
tina
collections
shared-fields
title.schema.tsx

Naming conventions for blocks

If you're re-using the template for a block component between multiple collections it's good practice to separate that template into a file ending in .template.tsx.

templates are passed into existing collections using a block-based editing

In the example below, assume we are using the image-carousel block template in the our block renderer. The image-carousel template can be shared between the home and about collections.

src
app
components
blocks
blocks-renderer.tsx
image-carousel.template.tsx
image-carousel.tsx
tina
collections
about.tsx
home.tsx
Last Edited: April 15, 2025