Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Editor12 } from "@/components/beste/piece/editor12";

<Editor12
  items={[
    {
      "label": "Dashboard",
      "kind": "class",
      "depth": 0
    },
    {
      "label": "constructor",
      "kind": "method",
      "depth": 1
    },
    {
      "label": "state",
      "kind": "prop",
      "depth": 1
    },
    {
      "label": "render",
      "kind": "method",
      "depth": 1,
      "active": true
    },
    {
      "label": "computeStats",
      "kind": "function",
      "depth": 0
    }
  ]}
/>

More Editor pieces

View all Editor
Feature177 Content#feature177
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

editor25

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

Your page looks empty

Start by adding your first block.

Empty Page

editor47

Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    βŒƒ+`
  • Format document
    βŒ₯+⇧+F

Keymap List

editor37

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

1functionΒ·greet(name)Β·{
2β†’returnΒ·`Hello,Β·${name}!`;
3}

Whitespace Markers

editor44

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

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

Snippet Placeholders

editor15

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