hostTabs#
Type: false | object[]
Default: false
Adds a tab bar above the editor. The first tab is always the visual editor; extra tabs show read-only HTML panels (reports, previews, AI output, and so on).
Pass an array of tab definitions to enable the UI on start. Use false to disable.
const app = Redactor('#entry', {
hostTabs: [
{ key: 'summary', title: 'Summary', html: '<p>Initial summary</p>', permanent: true },
{ key: 'report', title: 'Report', html: '<p>...</p>', mode: 'report' }
]
});Tab fields
| Field | Type | Description |
|---|---|---|
key |
string |
Unique tab id (required). Cannot be editor. |
title |
string |
Tab label. Alias: label. |
html |
string |
Initial panel HTML. |
mode |
string |
Optional CSS hook: adds rx-mode-{mode} on the tabs root and data-tab-mode on the tab/panel. |
permanent |
boolean |
When true, the tab cannot be closed: no remove icon on the active tab, and removeTab(key) returns false. Default: false. |
You can also pass permanent when creating or updating a tab via app.hostTabs.setTab({ …, permanent: true }). Permanent tabs get data-tab-permanent="true" on the tab button and panel.