Spell Check

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

The implmentation ships on Friday.
  • implementation
  • implements
  • implemented

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

Import & use
import { Editor39 } from "@/components/beste/piece/editor39";

<Editor39
  prefix="The "
  typo="implmentation"
  suffix=" ships on Friday."
  suggestions={[
    {
      "label": "implementation",
      "active": true
    },
    {
      "label": "implements"
    },
    {
      "label": "implemented"
    }
  ]}
/>

More Editor pieces

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

col guide80
const message = `Hello`;
const longer = `Shipping the biggest onboarding upgrade yet`;
const wrapped = items.map((i) => i.name).join(', ') + '!'

Ruler Guide

editor25

Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.

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.

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.

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

Regex Input

editor21

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

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.