Color Preview

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

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

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

Import & use
import { Editor26 } from "@/components/beste/piece/editor26";

<Editor26
  colors={[
    {
      "key": "--primary",
      "value": "#f43f5e"
    },
    {
      "key": "--accent",
      "value": "#8b5cf6"
    },
    {
      "key": "--surface",
      "value": "#0ea5e9"
    }
  ]}
/>

More Editor pieces

View all Editor

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.

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.

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.

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.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

editor4

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

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.