Collab Cursors

About this piece

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

Usage

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

import { Editor49 } from "@/components/beste/piece/editor49";

<Editor49
  documentTitle="Launch notes"
  lines={[
    "The beta opens to the waitlist on Monday.",
    "Support has the new macros ready.",
    "Pricing page copy is locked."
  ]}
  draft="Adding one line about the migration guide."
  editors={[
    "Joni Mitchell",
    "Thom Yorke"
  ]}
/>

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.

3 cursors

const name = 'Ayşe';
const role = 'design';
const team = 'core';

Multi Cursor

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

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

Whitespace Markers

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

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.

col guide80

1const message = `Hello`;
2const longer = `Shipping the biggest onboarding upgrade yet`;
3const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

const msg = greet("Beste");

function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.