Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.
const message = `Hello`;const longer = `Shipping the biggest onboarding upgrade yet`;const wrapped = items.map((i) => i.name).join(', ') + '!'
Editor panel with a rose vertical column-limit ruler and numbered code lines behind it.
--primary: #f43f5e;--accent: #8b5cf6;--surface: #0ea5e9;
CSS lines with inline color swatch squares next to each hex value.
1function render(items) {2items.forEach(draw);3}Matching bracket on line 3
Three-line snippet with the matching opening and closing brackets highlighted in primary.
1// TODO migrate to server components2// FIXME handles null state poorly3// NOTE revisit once design lock lands
Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.
1const user = createUser(name: "Ayşe", role: "admin");nameinlay parameter hints
Function call with muted parameter-name chips inlaid before each argument.
import { greet } from './greet';const user = { name: 'Ayşe' };const msg = greet(user.name);console.log(msg);
Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.
<<<<<<< CurrentHEADconst greet = (name) =>`Hi, ${name}!`;=======const greet = (name: string) =>`Merhaba, ${name}!`;>>>>>>> Incomingfeat/onboarding
Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.
Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.
Inline :shortcode typing with an autocomplete dropdown showing emoji previews.
Preview card with the struck-through old name, the new name, and a list of affected files with ref counts.
Settings card with a segmented light / dark / system toggle and icon plus label per option.
Compact jump-to-line input with a typed value, a blinking caret, and the total line count.
Panel listing editor actions with their kbd shortcut combinations on the right.
12function renderChart(data) {37}
Expanded open line, a collapsed region button with chevron and line count, and the closing line.
Sentence with a rose wavy underline on a misspelling and a suggestions dropdown below.
const value = user.prfile.name;Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.
const users = load();for (const user of users) {12×render(user);}
Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.
const name = user.prfile.name;Property 'prfile' does not exist on type 'User'.Code line where the offending token gets a colored wavy underline and the diagnostic message renders inline beside it.
Call stack list with function names, source file and line, and an amber current-frame highlight.
1function·greet(name)·{2→return·`Hello,·${name}!`;3}
Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.
Build-result banner with an emerald success state showing duration and bundle size, or a rose error state with count.
No tutorials needed.
If you can order food online, you can build a website with Beste.
Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.
Start by adding your first block.
Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.
You have changes that are not yet published
Compact deploy card pairing a live URL row, domain verification badge, unpublished-change hint, and a recolorable publish button.