> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-nick-sd-2070-add-content-controls-namespace-to-doc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Events

Events let you respond to editor lifecycle and content changes.

## Lifecycle

### `onBeforeCreate`

Called before the editor view is created.

<CodeGroup>
  ```javascript Usage theme={null}
  onBeforeCreate: ({ editor }) => {
    // Set up external services
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onBeforeCreate: ({ editor }) => {
      // Set up external services
    },
  });
  ```
</CodeGroup>

### `onCreate`

Called when editor is fully initialized and ready.

<CodeGroup>
  ```javascript Usage theme={null}
  onCreate: ({ editor }) => {
    editor.focus();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onCreate: ({ editor }) => {
      editor.focus();
    },
  });
  ```
</CodeGroup>

### `onDestroy`

Called when editor is being destroyed. Clean up resources here.

<CodeGroup>
  ```javascript Usage theme={null}
  onDestroy: () => {
    clearInterval(autoSaveTimer);
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onDestroy: () => {
      clearInterval(autoSaveTimer);
    },
  });
  ```
</CodeGroup>

### `onFirstRender`

Called after the first render completes.

<CodeGroup>
  ```javascript Usage theme={null}
  onFirstRender: () => {
    hideLoadingSpinner();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onFirstRender: () => {
      hideLoadingSpinner();
    },
  });
  ```
</CodeGroup>

## Content

### `onUpdate`

Called when document content changes.

<CodeGroup>
  ```javascript Usage theme={null}
  onUpdate: ({ editor, transaction }) => {
    if (transaction.docChanged) {
      saveToBackend(editor.getJSON());
    }
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onUpdate: ({ editor, transaction }) => {
      if (transaction.docChanged) {
        saveToBackend(editor.getJSON());
      }
    },
  });
  ```
</CodeGroup>

### `onContentError`

Called when content processing fails.

<CodeGroup>
  ```javascript Usage theme={null}
  onContentError: ({ error, editor, documentId }) => {
    console.error('Document error:', error);
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onContentError: ({ error, editor, documentId }) => {
      console.error('Document error:', error);
    },
  });
  ```
</CodeGroup>

## Selection

### `onSelectionUpdate`

Called when selection changes (cursor movement).

<CodeGroup>
  ```javascript Usage theme={null}
  onSelectionUpdate: ({ editor }) => {
    toolbar.bold = editor.isActive('bold');
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onSelectionUpdate: ({ editor }) => {
      toolbar.bold = editor.isActive('bold');
    },
  });
  ```
</CodeGroup>

### `onFocus`

Called when editor gains focus.

<CodeGroup>
  ```javascript Usage theme={null}
  onFocus: ({ editor, event }) => {
    showFormattingToolbar();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onFocus: ({ editor, event }) => {
      showFormattingToolbar();
    },
  });
  ```
</CodeGroup>

### `onBlur`

Called when editor loses focus.

<CodeGroup>
  ```javascript Usage theme={null}
  onBlur: ({ editor, event }) => {
    saveCurrentState();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onBlur: ({ editor, event }) => {
      saveCurrentState();
    },
  });
  ```
</CodeGroup>

## Features

### `onCommentsUpdate`

<CodeGroup>
  ```javascript Usage theme={null}
  onCommentsUpdate: ({ editor }) => {
    updateCommentsSidebar();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onCommentsUpdate: ({ editor }) => {
      updateCommentsSidebar();
    },
  });
  ```
</CodeGroup>

### `onCommentsLoaded`

<CodeGroup>
  ```javascript Usage theme={null}
  onCommentsLoaded: ({ editor, comments }) => {
    console.log(`Loaded ${comments.length} comments`);
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onCommentsLoaded: ({ editor, comments }) => {
      console.log(`Loaded ${comments.length} comments`);
    },
  });
  ```
</CodeGroup>

### `onTrackedChangesUpdate`

<CodeGroup>
  ```javascript Usage theme={null}
  onTrackedChangesUpdate: ({ editor }) => {
    updateReviewPanel();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onTrackedChangesUpdate: ({ editor }) => {
      updateReviewPanel();
    },
  });
  ```
</CodeGroup>

### `onCollaborationReady`

<CodeGroup>
  ```javascript Usage theme={null}
  onCollaborationReady: ({ editor, ydoc }) => {
    showCollaboratorsCursors();
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';

  const editor = await Editor.open(yourFile, {
    element: document.querySelector('#editor'),
    onCollaborationReady: ({ editor, ydoc }) => {
      showCollaboratorsCursors();
    },
  });
  ```
</CodeGroup>