Ruler Guide

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

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

Import & use
import { Editor25 } from "@/components/beste/piece/editor25";

<Editor25
  limit={80}
  lines={[
    {
      "text": "const message = `Hello`;"
    },
    {
      "text": "const longer = `Shipping the biggest onboarding upgrade yet`;"
    },
    {
      "text": "const wrapped = items.map((i) => i.name).join(', ') + '!'"
    }
  ]}
/>

More Editor pieces

View all Editor
Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

editor12

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

Feature177 Content#feature177
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

12function renderChart(data) {
37}

Code Folding

editor38

Expanded open line, a collapsed region button with chevron and line count, and the closing line.

The implmentation ships on Friday.
  • implementation
  • implements
  • implemented

Spell Check

editor39

Sentence with a rose wavy underline on a misspelling and a suggestions dropdown below.

Launch Checklist

Ship with confidence by running through the five-point review.

  • Verify preview URL
  • Run smoke suite
  • Tag the release
pnpm release

Markdown Preview

editor10

Rendered markdown mini card with a heading, lede paragraph, bullet list, and inline code chip.

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

Color Preview

editor26

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