Inline Suggestion

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

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

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

Import & use
import { Editor8 } from "@/components/beste/piece/editor8";

<Editor8
  prefix="const greet = (name: string) => `Hello, "
  ghost="${name}!`;"
/>

More Editor pieces

View all Editor
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.

:fi
  • :fire:
  • :finish_line:
  • :first_place:
  • :fish:

Emoji Picker

editor33

Inline :shortcode typing with an autocomplete dropdown showing emoji previews.

return greet(name);
Ayşe

Collab Cursor

editor13

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

const total = items.reduce(sum, i) => sum + i.price);
Expected 2 arguments, but got 1.ts(2554)

Problem Marker

editor14

Code line with a rose wavy underline on the offending token above an alert card with message and source code.

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.

const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.

Error Lens

editor42

Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.