Usage – Developers

We recommend reading the previous page on usage for editors before moving onto this one. This page is focused on the local development experience.

The TinaCMS editor has two modes:

1. Local Development Mode: When running your site locally for development
2. Production Mode: When using the deployed version of your site

In local development mode, changes are saved directly to files in your local repository.

In production mode (with TinaCloud), changes are committed directly to your Git repository.

Local Mode

The TinaCMS editor is available at the /admin route of your site (for example, http://localhost:3000/admin).

Run the below command from the terminal in your project directory to boot up the application.

This will run the TinaCMS local server as well as the NextJS front-end.

The editing UI is the same as in production, but you can safely test any model or content changes that are out of the ordinary.

⚠️ The tina-lock.json File

The tina-lock.json must be checked into source control and pushed to your repo.

It contains a compiled schema used to resolve content documents, and should be updated after any local content or schema changes.

Run pnpm dev locally to trigger an update to this file.

Testing Production Mode

You can also test a production instance of your application, hooked up to TinaCloud.

This may be useful in a pinch to pick up hard-to-find issues.

1. Update your local .env file with:
   1. TINA_TOKEN from TinaCloud
   2. NEXT_PUBLIC_TINA_CLIENT_ID from TinaCloud
   3. NEXT_PUBLIC_TINA_BRANCH if using branch based editing
   4. NEXT_PUBLIC_SITE_URL to localhost:3000
2. Run the build and start scripts.

Next Steps

Once you're familiar with the basic editing interface, you might want to:

1. Customize your content schema
2. Create custom field components
3. Configure advanced validation

For more details on the editing experience, check out the official TinaCMS documentation.