Save Indicator

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

button.tsxSaved 3s ago

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

Import & use
import { Editor23 } from "@/components/beste/piece/editor23";

<Editor23
  filename="button.tsx"
  dirty={false}
  savedAt="Saved 3s ago"
/>

More Editor pieces

View all Editor
index.tsx
button.tsx
card.tsx
theme.css

Editor Tab Bar

editor6

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

user.
  • idstring
  • namestring
  • emailstring
  • isAdminboolean
  • save(): Promise<void>

IntelliSense

editor2

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

Ship production-ready components in a weekend.
27 chars·3 words

Selection Counter

editor19

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

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.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

editor40

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

editor30

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.