Breakpoint Gutter

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

40const users = load();
41for (const user of users) {12×
42  render(user);
43}

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

Import & use

import { Editor41 } from "@/components/beste/piece/editor41";

<Editor41
  lines={[
    {
      "line": 40,
      "code": "const users = load();"
    },
    {
      "line": 41,
      "code": "for (const user of users) {",
      "breakpoint": true,
      "hits": 12
    },
    {
      "line": 42,
      "code": "  render(user);",
      "current": true
    },
    {
      "line": 43,
      "code": "}"
    }
  ]}
/>

More Editor pieces

View all Editor

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.

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.

return greet(name);

Ayşe

Collab Cursor

editor13

Code line with a teammate's blinking caret tinted by tone and a name tag floating above 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.

Ship production-ready components in a weekend.

27 chars·3 words

Selection Counter

editor19

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

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.