The config file

When you provide a file at tina/config.{ts,tsx,js,jsx} that exports a defineConfig function, Tina will automatically generate TinaCMS as a static asset. Note that it must be the default export of this file.

Definition

Example

const branch =
  process.env.NEXT_PUBLIC_TINA_BRANCH ||
  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||
  process.env.HEAD ||
  'main'

export default defineConfig({
  branch,
  token: '<Your Read Only Token>' // generated on app.tina.io
  clientId: '<Your Client ID>', // generated on app.tina.io
  build: {
    publicFolder: 'public', // The public asset folder for your framework
    outputFolder: 'admin'  // within the public folder
  }
  // See https://tina.io/docs/reference/schema/ for more information
  schema: {
    collections: [
      //..Array of collections
    ],
  }
})

In this example, the TinaCMS admin will be viewable at <my-site-url>/admin/index.html. For more information check out the content modeling section

Enabling visual editing

We're in the early stages of adding visual editing support in static mode, check back for more details soon!

For NextJS sites, the visual-editing guide is still applicable for static mode, with 2 key differences:

• The useTina hook should be imported from tinacms/dist/react.
• Visual mode is only enabled when you visit your site through the Tina CMS iframe. For the example config above, this would be at <my-site-url>/admin/index.html#/preview.

Last Edited: September 29, 2022