Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

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

Import & use
import { Editor1 } from "@/components/beste/piece/editor1";

<Editor1
  filename="greet.ts"
  lines={[
    {
      "tokens": [
        {
          "text": "export",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "function",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "greet",
          "kind": "fn"
        },
        {
          "text": "(name: string) {"
        }
      ]
    },
    {
      "tokens": [
        {
          "text": "  "
        },
        {
          "text": "return",
          "kind": "keyword"
        },
        {
          "text": " "
        },
        {
          "text": "`Hello, ${name}!`",
          "kind": "string"
        },
        {
          "text": ";"
        }
      ]
    },
    {
      "tokens": [
        {
          "text": "}"
        }
      ]
    },
    {
      "tokens": []
    },
    {
      "tokens": [
        {
          "text": "// Ship it",
          "kind": "comment"
        }
      ]
    }
  ]}
/>

More Editor pieces

View all Editor
Theme

Theme Switcher

editor35

Settings card with a segmented light / dark / system toggle and icon plus label per option.

File Tree

editor5

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

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.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

editor28

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

format
  • Format DocumentEditor
  • Format SelectionEditor
  • Reveal in File ExplorerFile

Command Palette

editor9

Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.

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.