The Events feature allows decoupled parts of the CMS to:

  1. Notify the rest of the system that something has happened, and
  2. React to things that happen elsewhere in the system.


interface Events {
  dispatch(event: Event): void
  subscribe(eventType: string, listener: Listener): Unsubscribe

interface Event {
  type: string
  // Any other data may be added to the event.
  [key: string]: any

type Listener = (event: Event) => void

type Unsubscribe = () => void


Dispatching Events{
  type: 'something-happened',

Subscribing to Events

The function can be used to start listening for certain events., event => {
  // ...

The EVENT_NAME is a string that matches a pattern for the event name.

Checkout the tests for specific examples of how the matching happens.

Tina can share the event bus!

Custom API handlers registered to Tina can share its event bus. See the Using External APIs documentation to learn more.

Log all Events'*', event => {

Log when a Form Plugin is added"plugins:add:form", (event) => {
  console.log(`Added a Form called "${}"`

Log all Form Events'plugins:*:form', event => {
  console.log(`Something happened to the form plugins`)

Log all Plugin Events'plugins', event => {
  console.log(`Something happened to the plugins`)

Note that the string pluginsis equivalent to plugins:* or plugins:*:*.

Existing Events


cms:enableThe CMS has been enabled.
cms:disableThe CMS has been disabled
sidebar:openedThe Sidebar has been opened
sidebar:closedThe Sidebar has been closed.
plugin:add:{__type}A Plugin of a given __type has been added.
plugin:remove:{__type}A Plugin of a given __type has been removed.
media:upload:startA media file upload has begun.
media:upload:successA media file was successfully uploaded.
media:upload:failureA media file upload failed.
media:list:startA call to list available media items has been made.
media:list:successThe call to list media items was successful.
media:list:failureThe call to list media items failed.
media:delete:startA media file is attempting to be deleted.
media:delete:successA media file was successfully deleted.
media:delete:failureThe attempt to delete a media file failed.
media:previewSrc:startA previewSrc is being generated for a media file.
media:previewSrc:successThe call to previewSrc successfully returned a url.
media:previewSrc:failureA previewSrc failed to be generated.


Event NameDecription
github:errorAn error has occurred when making requests to the GitHub API.
github:branch:checkoutThe current branch has been switched.
github:branch:createA new branch has been created.


Event NameDecription
git:commitA commit has been attempted.

Below is an example of how you might subscribe to the git:commit event in your App. The event passed to the callback function is a Fetch Response; you can parse the status of the commit from this to trigger various alerts or functions.


React.useEffect(() => {'git:commit', function handleCommitAlerts(event) {
    if (!event.response.ok) {
      cms.alerts.error("Something went wrong! Changes weren't saved")
    } else {'Content saved successfully!')
}, [])