Code Folding

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

12function renderChart(data) {
37}

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

Import & use

import { Editor38 } from "@/components/beste/piece/editor38";

<Editor38
  openLine="function renderChart(data) {"
  closeLine="}"
  collapsed={24}
/>

More Editor pieces

View all Editor

col guide80

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

Ruler Guide

editor25

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

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.

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.

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.

1function render(items) {
2  items.forEach(draw);
3}
Matching bracket on line 3

Bracket Match

editor27

Three-line snippet with the matching opening and closing brackets highlighted in primary.

function greet(name: string)

Code Lens

editor22

Action row above a function signature showing references, implementations, and inline commands.