The CMS object in Tina is a container for attaching and accessing plugins, APIs, and the event bus. On its own, the CMS does very little; however, since it's the central integration point for everything that Tina does, it's extremely important!

Accessing the CMS Object

The CMS object can be retrieved from context via the useCMS hook (from anywhere within the Tina provider). Reference the available core properties to work with.

import * as React from 'react'
import { useCMS } from 'tinacms'

// <SomeComponent /> is assumed to be nested inside of the <TinaProvider> context
export default function SomeComponent() {
  const cms = useCMS()

Disabling / Enabling the CMS

The CMS can be enabled or disabled via methods or configuration on the CMS object. Disabling the CMS prevents the editing UI from rendering and forms from registering.

import * as React from 'react'
import { useCMS } from 'tinacms'

// <ExitButton /> is assumed to be nested inside of the <TinaProvider> context
export default function ExitButton() {
  const cms = useCMS()

  return (
    <button onClick={() => cms.toggle()}>
      {cms.enabled ? `Exit Tina` : `Edit with Tina`}

CMS Configuration

When instantiating the TinaCMS object, you can pass in a configuration object. This allows you to configure some options for the sidebar, toolbar, and also allows you to configure plugins and APIs declaratively.

interface TinaCMSConfig {
  enabled?: boolean
  plugins?: Plugin[]
  apis?: { [key: string]: any }
  sidebar?: SidebarConfig | boolean
  toolbar?: ToolbarConfig | boolean
  media?: {
    store: MediaStore
  mediaOptions?: {
    pageSize?: number

interface SidebarConfig {
  position?: SidebarPosition
  placeholder?: React.FC
  buttons?: {
    save: string
    reset: string

interface ToolbarConfig {
  buttons?: {
    save: string
    reset: string

enabledControls whether the CMS is enabled or disabled. Defaults to false
pluginsArray of plugins to be added to the CMS object.
apisObject containing APIs to be registered to the CMS
sidebarEnables and configures behavior of the sidebar
toolbarConfigures behavior of the toolbar
mediaConfigures media.
pageSizeSets how many media objects are displayed at a time in the media manager.


There are a number of core properties that can be helpful in working with the CMS.

TinaCMS Interface

interface TinaCMS {
  enabled: boolean
  disabled: boolean
  registerApi(name: string, api: any): void
  enable(): void
  disable(): void
  toggle(): void
enabledReturns the enabled state. When true, content can be edited.
disabledReturns the disabled state. When true, content cannot be edited.
registerApiRegisters a new external API with the CMS.
enableEnables the CMS so content can be edited.
disableDisables the CMS so content can no longer be edited.
toggleToggles the enabled/disabled state of the CMS .

Use the useCMS hook to access the CMS and execute these methods as needed.

Last Edited: November 10, 2021