Regex Input

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

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

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

Import & use

import { Editor21 } from "@/components/beste/piece/editor21";

<Editor21
  pattern="\b\w+@\w+\.com\b"
  flags="gi"
  matches={12}
/>

More Editor pieces

onboarding3/12

activation

editor11

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

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

editor44

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

button.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

editor4

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

The implmentation ships on Friday.

editor39

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

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

editor26

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

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

editor27

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