Bracket Match

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

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

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

Import & use

import { Editor27 } from "@/components/beste/piece/editor27";

<Editor27 />

More Editor pieces

onboarding3/12

activation

editor11

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.

12function renderChart(data) {
37}

editor38

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

Ship production-ready components in a weekend.

27 chars·3 words

editor19

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

for (let $1:i = 0; $1 < $2:arr.length; $1++) {}

Tab throughTab

editor15

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

/\b\w+@\w+\.com\b/gi

editor21

Regex input with slashes, violet flags, and a tabular match-count pill on the right.

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

editor26

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