Multi Cursor

3 cursors
const name = 'Ayşe';
const role = 'design';
const team = 'core';
About this piece

Multi Cursor

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.

Usage

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

import { Editor16 } from "@/components/beste/piece/editor16";

<Editor16
  prefix="const "
  lines={[
    "name = 'Ayşe';",
    "role = 'design';",
    "team = 'core';"
  ]}
/>

More Editor pieces

View all Editor
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.

Launch notes

The beta opens to the waitlist on Monday.

Support has the new macros ready.

Pricing page copy is locked.

Collab Cursors

Two named carets share a document: one hops between finished lines while the other types a new sentence at the bottom, over and over.

Ship production-ready components in a weekend.
27 chars·3 words

Selection Counter

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

user.
  • idstring
  • namestring
  • emailstring
  • isAdminboolean
  • save(): Promise<void>

IntelliSense

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

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