Pieces/Editor(49)

Editor pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Launch notes

The beta opens to the waitlist on Monday.

Support has the new macros ready.

Pricing page copy is locked.

Collab Cursors

Two named carets share a document: one hops between finished lines while the other types a new sentence at the bottom, over and over.

Website URLs
https://beste.co
Domain verified
Unpublished Changes

You have changes that are not yet published

Publish Panel

Compact deploy card pairing a live URL row, domain verification badge, unpublished-change hint, and a recolorable publish button.

Your page looks empty

Start by adding your first block.

Empty Page

Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.

Feature177 Content#feature177
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

Build finished
2.4s·128 KB gzip

Build Output

Build-result banner with an emerald success state showing duration and bundle size, or a rose error state with count.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

Call stack
  • renderListlist.tsx:42
  • Dashboarddashboard.tsx:14
  • Appapp.tsx:8

Debugger Panel

Call stack list with function names, source file and line, and an amber current-frame highlight.

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

Error Lens

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

const users = load();
for (const user of users) {12×
  render(user);
}

Breakpoint Gutter

Gutter with rose breakpoint dots, an amber-highlighted current line, and a hit-count chip.

const value = user.prfile.name;
  • Rename to 'profile'Preferred
  • Add missing property 'prfile'
  • Disable rule for this line

Quick Fix

Code line with a lightbulb quick-fix tile and a dropdown of fix options. Preferred fix gets an amber tag.

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

Spell Check

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

12function renderChart(data) {
37}

Code Folding

Expanded open line, a collapsed region button with chevron and line count, and the closing line.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F

Keymap List

Panel listing editor actions with their kbd shortcut combinations on the right.

Go to line142
of 386

Goto Line

Compact jump-to-line input with a typed value, a blinking caret, and the total line count.

Theme

Theme Switcher

Settings card with a segmented light / dark / system toggle and icon plus label per option.

greetsayHello7 refs
  • greet.ts1
  • app.tsx4
  • welcome.tsx2

Rename Refactor

Preview card with the struck-through old name, the new name, and a list of affected files with ref counts.

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

Emoji Picker

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

Zen Modemanifesto.md
Exit⌘+K+Z

Zen Mode

Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.

<<<<<<< CurrentHEAD
const greet = (name) =>  `Hi, ${name}!`;
=======
const greet = (name: string) =>  `Merhaba, ${name}!`;
>>>>>>> Incomingfeat/onboarding

Merge Conflict

Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

1const user = createUser(name: "Ayşe", role: "admin");
nameinlay parameter hints

Inlay Hints

Function call with muted parameter-name chips inlaid before each argument.

1// TODO migrate to server components
2// FIXME handles null state poorly
3// NOTE revisit once design lock lands

TODO Comment

Italic comment lines with colored TODO, FIXME, NOTE, or HACK tags.

1function render(items) {
2  items.forEach(draw);
3}
Matching bracket on line 3

Bracket Match

Three-line snippet with the matching opening and closing brackets highlighted in primary.

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

Color Preview

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

Markdown version