---
title: "Custom view"
description: "How to create a custom view in TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/custom-view/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/custom-view/index.md"
version: "latest"
last_updated: "2026-03-31T06:30:06Z"
tokens: 1451
---
# Custom view

TinyMCE allows developers to create custom views and attach them to the main editor view. This feature enables the creation of additional UI components that can be toggled on or off. When toggled on, the custom view replaces the editor, providing a distinct visual space for specialized functionality.

> **Note:** This feature is only supported when TinyMCE is run in *classic* mode. It is not supported in *inline* mode. For more information on the differences between the editing modes, see [Classic editing mode](../use-tinymce-classic/).

## Editor View API

The `addView` API in the editor’s UI registry allows developers to register new view containers. These containers are initially hidden (off) and attached next to the main view. The visibility of these custom views can be toggled using the `ToggleView` command. The state of the custom view can be queried using the `queryCommandValue` method.

This is the syntax for the `addView` function: `editor.ui.registry.addView(name: String, obj: View.ViewSpec)`

### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `name` | `String` | The `name` parameter is a unique identifier for the new view. |
| `obj` | `View.ViewSpec` | The `obj` parameter is the view specification object. |

### View Specification Object

| Property | Type | Description |
| --- | --- | --- |
| `buttons` | `Array` | The `buttons` property specifies an array of buttons to be displayed in the top right corner of the view. |
| `onShow` | `Function` | The `onShow` property specifies a function to be called when the view is displayed. It receives an API object. |
| `onHide` | `Function` | The `onHide` property specifies a function to be called when the view is hidden. It receives an API object. |

### Toggling the Custom View

To toggle the custom view, you can use the `ToggleView` command. Here is an example of how to use it:

```js
// Assuming 'myCustomView' is the name of your custom view
editor.execCommand('ToggleView', false, 'myCustomView');
```

### Querying the State of the Custom View

To query the state of the custom view (whether it is currently visible or hidden), you can use the `queryCommandValue` method:

```js
// Assuming 'myCustomView' is the name of your custom view
editor.queryCommandValue('ToggleView') == 'myCustomView';
```

## Options

### `view_show`

This option allows the specified view to be displayed on editor initialization. It behaves similarly to [`sidebar_show`](../customsidebar/#sidebar_show) but applies to views and takes precedence when both are configured. Views and sidebars can both be set to show on init, with the sidebar shown once the view is closed.

The value must match the name of a registered view. Premium plugins that register views include:

- [Suggested Edits](../suggestededits/) (`suggestededits`)
- [Revision History](../revisionhistory/) (`revision`)
- [Enhanced Code Editor](../advcode/) (`code`)

Custom views registered via [`addView`](#) can also be specified.

> **Note:** This feature is only supported when TinyMCE is run in *classic* mode. It is not supported in *inline* mode. For more information on the differences between the editing modes, see [Classic editing mode](../use-tinymce-classic/).
**Type:** `String`

#### Example: using `view_show` with a premium plugin

```js
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  plugins: 'suggestededits',
  toolbar: 'suggestededits',
  view_show: 'suggestededits',
  // ... other Suggested Edits options (suggestededits_model, user_id, fetch_users)
});
```

#### Example: using `view_show` with a custom view

```js
tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  menubar: false,
  toolbar: 'view',
  view_show: 'view',
  setup: (editor) => {
    const toggleView = () => editor.execCommand('ToggleView', false, 'view');
    editor.ui.registry.addView('view', {
      onShow: (api) => {
        api.getContainer().innerHTML = '<p>You opened the view!</p>';
      },
      onHide: (api) => {
        api.getContainer().innerHTML = '';
      },
      buttons: [{
        type: 'button',
        text: 'Close',
        onAction: toggleView
      }]
    });
    editor.ui.registry.addButton('view', {
      text: 'Open view',
      onAction: toggleView
    });
  }
});
```

## Interactive example

This example shows how to integrate a custom view using the `addView` API.

**Example**

```js
tinymce.init({
  selector: "textarea#custom-view",
  toolbar: "showCodeView",
  height: 600,
  setup: (ed) => {
    ed.ui.registry.addView('code', {
      buttons: [
        {
          type: 'button',
          text: 'Cancel',
          buttonType: 'secondary',
          onAction: () => {
            ed.execCommand('ToggleView', false, 'code');
            console.log('close');
          }
        },
        {
          type: 'button',
          text: 'Save code',
          buttonType: 'primary',
          onAction: () => {
            const codeContent = document.querySelector('.my-textarea').value;
            ed.setContent(codeContent);
            ed.execCommand('ToggleView', false, 'code');
            console.log('save');
          }
        },
      ],
      onShow: (api) => {
        const editorContent = ed.getContent();
        const container = api.getContainer();
        container.innerHTML = `
          <div style="height: 100%">
            <textarea class="my-textarea" style="width: 100%; height: 100%; resize: none; padding: 0.5em"></textarea>
          </div>`;
        container.querySelector('.my-textarea').value = editorContent;
      },
      onHide: (api) => {
        console.log('Deactivate code', api.getContainer());
      }
    });

    ed.ui.registry.addButton('showCodeView', {
      icon: 'sourcecode',
      text: 'Show Code View',
      onAction: (_api) => {
        console.log('source code editor');
        ed.execCommand('ToggleView', false, 'code');
      }
    });
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```