Emoji Picker

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

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

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

Import & use
import { Editor33 } from "@/components/beste/piece/editor33";

<Editor33
  query=":fi"
  items={[
    {
      "shortcode": ":fire:",
      "emoji": "๐Ÿ”ฅ",
      "active": true
    },
    {
      "shortcode": ":finish_line:",
      "emoji": "๐Ÿ"
    },
    {
      "shortcode": ":first_place:",
      "emoji": "๐Ÿฅ‡"
    },
    {
      "shortcode": ":fish:",
      "emoji": "๐ŸŸ"
    }
  ]}
/>

More Editor pieces

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

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.

Launch Checklist

Ship with confidence by running through the five-point review.

  • Verify preview URL
  • Run smoke suite
  • Tag the release
pnpm release

Markdown Preview

editor10

Rendered markdown mini card with a heading, lede paragraph, bullet list, and inline code chip.

const msg = greet("Beste");
function greet(name: string): string

Returns a localized greeting for the given name.

@/lib/greet.ts

Hover Popover

editor7

Wavy-underlined symbol above a type-hover card showing signature, one-line description, and source path.

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.

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

Color Preview

editor26

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