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.

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.

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.

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.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

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