IntelliSense

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

user.

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

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

Import & use

import { Editor2 } from "@/components/beste/piece/editor2";

<Editor2
  prefix="user."
  items={[
    {
      "label": "id",
      "kind": "variable",
      "detail": "string"
    },
    {
      "label": "name",
      "kind": "variable",
      "detail": "string",
      "active": true
    },
    {
      "label": "email",
      "kind": "variable",
      "detail": "string"
    },
    {
      "label": "isAdmin",
      "kind": "variable",
      "detail": "boolean"
    },
    {
      "label": "save",
      "kind": "function",
      "detail": "(): Promise<void>"
    }
  ]}
/>

More Editor pieces

View all Editor

:fi

:fire:
:finish_line:
:first_place:
:fish:

Emoji Picker

editor33

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

3 cursors

const name = 'Ayşe';
const role = 'design';
const team = 'core';

Multi Cursor

editor16

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.

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.

AI Suggestion

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

Inline Suggestion

editor8

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

button.tsxSaved 3s ago

Save Indicator

editor23

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

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.