Editor Tab Bar

index.tsx
button.tsx
card.tsx
theme.css
About this piece

Editor Tab Bar

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

Usage

The import and the props worth knowing about, in one place.

import { Editor6 } from "@/components/beste/piece/editor6";

<Editor6
  tabs={[
    {
      "filename": "index.tsx"
    },
    {
      "filename": "button.tsx",
      "active": true,
      "dirty": true
    },
    {
      "filename": "card.tsx"
    },
    {
      "filename": "theme.css"
    }
  ]}
/>

More Editor pieces

View all Editor
for (let $1:i = 0; $1 < $2:arr.length; $1++) {}
Tab throughTab

Snippet Placeholders

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F

Keymap List

Panel listing editor actions with their kbd shortcut combinations on the right.

button.tsxSaved 3s ago

Save Indicator

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

File Tree

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

Feature#feature283
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block

Section Settings Sidebar

Everything that shapes a section but is kept off the page itself, with a soft highlight travelling down the rows to show each one is a live control.