TODO Comment

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

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

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

Import & use

import { Editor28 } from "@/components/beste/piece/editor28";

<Editor28
  comments={[
    {
      "tag": "TODO",
      "text": "migrate to server components"
    },
    {
      "tag": "FIXME",
      "text": "handles null state poorly"
    },
    {
      "tag": "NOTE",
      "text": "revisit once design lock lands"
    }
  ]}
/>

More Editor pieces

View all Editor

AI Suggestion

const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

editor8

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

10import { greet } from './greet';
11 
12const user = { name: 'Ayşe' };
13const msg = greet(user.name);
14console.log(msg);
15

Git Gutter

editor30

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

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

Color Preview

editor26

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

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

Diff View

editor4

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

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