Snippet Placeholders

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

Snippet Placeholders

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

Usage

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

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

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

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

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

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

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

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

Code Window

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