Code Folding

12function renderChart(data) {
37}
About this piece

Code Folding

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

Usage

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

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

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

More Editor pieces

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

Ruler Guide

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

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

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

function greet(name: string)

Code Lens

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

AI Suggestion
const greet = (name: string) => `Hello, ${name}!`;

Inline Suggestion

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.