Snippet Placeholders

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

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

Tab throughTab

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

Import & use

import { Editor15 } from "@/components/beste/piece/editor15";

<Editor15
  prefix="for (let "
  placeholders={[
    {
      "index": 1,
      "label": "i",
      "active": true
    },
    {
      "index": 2,
      "label": "arr"
    }
  ]}
  middle=" = 0; $1 < "
  suffix=".length; $1++) {}"
/>

More Editor pieces

View all Editor

index.tsx

button.tsx

card.tsx

theme.css

Editor Tab Bar

editor6

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

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.

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.

return greet(name);

Ayşe

Collab Cursor

editor13

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

Dashboardrender()if (isReady)

    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

editor18

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.

Outline

Dashboard
constructor
state
render
computeStats

Outline Panel

editor12

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