Skip to content
FrameworkJavaScript

Tab block: one tab of a tabs block

A single tab inside a tabs block. It is not user-insertable on its own. The parent tabs block creates and manages its tabs.

The tab saves its title and an optional emoji icon, both as plain text. An empty icon is not saved. Child blocks are nested inside the tab via contentIds. A tab cannot hold another tabs block.

An empty tab shows "Empty tab. Click or drop blocks inside." Clicking it adds a paragraph to the tab.

Import

TypeScript
import { TabTool } from '@bloklabs/core/tools';

Save Data

TypeScript
interface TabData {
  title: string; // Plain text label shown in the tab strip
  icon?: string; // Optional emoji shown before the title
}
// Child blocks are referenced via the block's saved `content` array
// (the in-memory `contentIds`), not stored here.
JSON
{
  "id": "tab1",
  "type": "tab",
  "data": {
    "title": "Overview",
    "icon": "📘"
  },
  "content": ["block1", "block2"]
}

Usage Example

TypeScript
// Tab is not inserted directly — it is created by the TabsTool.
import { TabsTool, TabTool } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    tabs: { class: TabsTool },
    tab: { class: TabTool },
  },
});