Tabs

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/devscribe-team/webeditor/llms.txt

Use this file to discover all available pages before exploring further.

​

Overview

• Showing code examples in multiple languages
• Platform-specific instructions (iOS, Android, Web)
• Alternative approaches or methods
• Configuration options for different environments
• API request/response examples

​

Insertion

1. Type / to open the command menu
2. Search for “tabs”
3. Select the Tabs option

<tabs />

​

Attributes

​

Node specification

export const tabsNodeSpec: NodeSpec = {
  group: "block",
  content: "block+",
  attrs: {
    tabNames: { default: ["Tab 1"] },
    activeTab: { default: 0 },
    tabContents: { default: {} as Record<number, unknown> },
  },
  defining: true,
  selectable: true,
};

​

Usage examples

​

Multi-language code examples

<tabs>
  {/* JavaScript tab */}
  const editor = new Editor({
    element: '#editor'
  });
</tabs>

​

Platform-specific instructions

<tabs>
  {/* Content for first tab */}
  Install on macOS:
  brew install webeditor
</tabs>

1. Rename first tab to “macOS”
2. Click the + button to add “Windows” and “Linux” tabs
3. Add platform-specific content to each

​

API endpoint variations

<tabs>
  {/* Tab 1: REST API */}
  curl -X POST https://api.example.com/v1/users \
    -H "Content-Type: application/json" \
    -d '{"name": "John Doe"}'
  
  {/* Tab 2: GraphQL (add via + button) */}
  mutation CreateUser {
    createUser(input: {name: "John Doe"}) {
      id
      name
    }
  }
</tabs>

​

Request and response examples

<tabs>
  {/* Tab 1: Request */}
  {
    "username": "john",
    "email": "john@example.com"
  }
  
  {/* Tab 2: Response (add via + button) */}
  {
    "id": "usr_123",
    "username": "john",
    "email": "john@example.com",
    "created_at": "2024-01-15T10:30:00Z"
  }
</tabs>

​

Working with tabs in the editor

​

Add a new tab

• Gets a default name like “Tab 2”, “Tab 3”, etc.
• Starts with empty content (a blank paragraph)
• Automatically becomes the active tab

​

Rename a tab

1. Click the tab name to open the edit modal
2. Enter the new name
3. Click “Save” or press Enter

​

Switch between tabs

​

Delete a tab

• If deleting the active tab, the previous tab becomes active
• If deleting tab 0, tab 1 becomes the new active tab
• All remaining tabs are renumbered

​

TypeScript types

interface TabsAttrs {
  tabNames: string[];                  // Array of tab names
  activeTab: number;                   // Index of active tab (0-based)
  tabContents: Record<number, unknown>; // Stored content for each tab
}

// Tab operations
function switchTab(newIdx: number): void;
function updateTabName(tabIndex: number, newName: string): void;
function addNewTab(): void;
function deleteTab(tabIndex: number): void;

​

Content persistence

1. Automatic saving: When you switch tabs, current content is saved
2. Content restoration: Switching back to a tab restores its exact content
3. Per-tab storage: Each tab maintains independent content
4. New tab defaults: New tabs start with an empty paragraph

​

Styling details

• Border along the bottom
• Rounded top corners
• Hover effects on tab buttons

• Highlighted with secondary background
• Foreground text color
• More prominent appearance

• Muted text color
• Hover effect reveals secondary background
• Smooth transition animations

• Padding around content
• Card background color
• Supports all markdown elements

​

Best practices

1. Use descriptive tab names: Make it clear what each tab contains
2. Keep tab count reasonable: 2-5 tabs is ideal; more becomes hard to navigate
3. Maintain consistency: Similar structure across tabs helps users understand differences
4. Order logically: Put most common or recommended option first
5. Use for related content: Tabs should show variations of the same concept

​

Common patterns

​

Code examples by language

​

Installation methods

​

Framework variations

​

Environment configuration

​

Platform guides

​

Import from code blocks

<tabs>
  <pre><code language="javascript" title="JavaScript">
    // JavaScript code
  </code></pre>
  <pre><code language="python" title="Python">
    # Python code
  </code></pre>
</tabs>

• Two tabs named “JavaScript” and “Python”
• Content converted to code snippets
• Proper syntax highlighting

​

Keyboard navigation

• Tab: Move between tab buttons and content
• Enter/Space: Activate focused tab button
• Edit modal open:
  • Enter: Save and close
  • Escape: Cancel and close

​

Accessibility features

• Semantic HTML structure
• ARIA labels for tab controls
• Keyboard navigation support
• Focus indicators on active elements
• Clear visual distinction between active and inactive tabs
• Sufficient color contrast

​

Content support

• Paragraphs and headings
• Lists (ordered and unordered)
• Code blocks and code snippets
• Images
• Tables
• Other components (Fields, Frames, Steps, etc.)
• Nested markdown content