Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

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

Import & use
import { Editor30 } from "@/components/beste/piece/editor30";

<Editor30
  lines={[
    {
      "line": 10,
      "code": "import { greet } from './greet';",
      "kind": "unchanged"
    },
    {
      "line": 11,
      "code": "",
      "kind": "unchanged"
    },
    {
      "line": 12,
      "code": "const user = { name: 'Ayşe' };",
      "kind": "added"
    },
    {
      "line": 13,
      "code": "const msg = greet(user.name);",
      "kind": "modified"
    },
    {
      "line": 14,
      "code": "console.log(msg);",
      "kind": "unchanged"
    },
    {
      "line": 15,
      "code": "",
      "kind": "removed"
    }
  ]}
/>

More Editor pieces

View all Editor
const users = load();
for (const user of users) {12×
  render(user);
}

Breakpoint Gutter

editor41

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.

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.

const greet = (name: string) =>Ayşe·3d ago·a1b2c3d
  `Merhaba, ${name}!`;Merve·today·9f0e4c2
 Ayşe·3d ago·a1b2c3d

Git Blame

editor20

Code lines with inline blame showing author, relative time, and short commit hash to the right.

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.

const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.

Error Lens

editor42

Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

editor40

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.