Diff View

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

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

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

Import & use
import { Editor4 } from "@/components/beste/piece/editor4";

<Editor4
  filename="button.tsx"
  lines={[
    {
      "kind": "context",
      "line": 12,
      "content": "export function Button({ label }) {"
    },
    {
      "kind": "remove",
      "line": 13,
      "content": "  return <button>{label}</button>;"
    },
    {
      "kind": "add",
      "content": "  return <button className=\"btn\">{label}</button>;"
    },
    {
      "kind": "context",
      "line": 14,
      "content": "}"
    }
  ]}
/>

More Editor pieces

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

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

Multi Cursor

editor16

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

--primary:  #f43f5e;
--accent:  #8b5cf6;
--surface:  #0ea5e9;

Color Preview

editor26

CSS lines with inline color swatch squares next to each hex value.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

editor28

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

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

Snippet Placeholders

editor15

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

onboarding3/12
activation

Find & Replace

editor11

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.