Git Blame

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

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

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

Import & use
import { Editor20 } from "@/components/beste/piece/editor20";

<Editor20
  lines={[
    {
      "line": 40,
      "author": "Ayşe",
      "time": "3d ago",
      "hash": "a1b2c3d",
      "code": "const greet = (name: string) =>"
    },
    {
      "line": 41,
      "author": "Merve",
      "time": "today",
      "hash": "9f0e4c2",
      "code": "  `Merhaba, ${name}!`;"
    },
    {
      "line": 42,
      "author": "Ayşe",
      "time": "3d ago",
      "hash": "a1b2c3d",
      "code": ""
    }
  ]}
/>

More Editor pieces

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

Git Gutter

editor30

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

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 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.

Dashboardrender()if (isReady)
    // hidden lines…
    const ready = useReady();
    if (!ready) return null;

Sticky Header

editor18

Scope breadcrumb pinned above a code snippet, showing the current class, method, and block.

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 total = items.reduce(sum, i) => sum + i.price);
Expected 2 arguments, but got 1.ts(2554)

Problem Marker

editor14

Code line with a rose wavy underline on the offending token above an alert card with message and source code.