Breakpoint Gutter

const users = load();
for (const user of users) {12×
  render(user);
}
About this piece

Breakpoint Gutter

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

Usage

The import and the props worth knowing about, in one place.

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": "}"
    }
  ]}
  bordered={false}
/>

More Editor pieces

View all Editor
const user = { name: 'Nils' };
const msg = greet(user.name);
console.log(msg);
 
const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line
Ship production-ready components in a weekend.
27 chars·3 words
return greet(name);
Hania
const name = 'Hania';
const role = 'design';
const team = 'core';
const greet = (name: string) => `Hello, ${name}!`;