Pieces/Editor(56)

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

Integrations
Google Analytics
Google Tag Manager
Meta Pixel
PostHog

Integrations List

Connected services listed one per row, each turning active in turn down the right-hand edge, so the whole set can be read at a glance once it settles.

Feature#feature283
Padding96 px
Container7xl
BackgroundBackground
Card bordersPer block

Section Settings Sidebar

Everything that shapes a section but is kept off the page itself, with a soft highlight travelling down the rows to show each one is a live control.

Post SettingsDraft
Author
Publish Date
Read Time

Post Settings Drawer

The fields that turn a page into a post, filling themselves in one row at a time and finishing on the tags, with the draft state held at the top throughout.

hero-photograph.jpgHero media
EntranceBlur in
Scroll effectParallax
StrengthStrong

Image Motion Settings

One image's own motion settings, with the thumbnail beside them performing what the rows describe: blurring into place, then drifting as though the page were scrolling past it.

Appearance

Images

Image entrance
Scroll effect

Motion

Section animation
Animation speed

Appearance Motion Panel

Site-wide appearance settings grouped the way a builder sidebar groups them, each value arriving from the right as its row lands.

Design Set Specimen

A design language shown as a specimen. The eyebrow, heading, traits and button settle in one after another, and four characters change how all four of them are drawn.

hero181

Portrait Hero

Tall photograph beside a heading, a short paragraph and a checked benefit list.

Section Picker Card

One card from a block picker. Its preview loads behind a sweeping skeleton while the section id, title and description sit ready underneath, the way a picker fills a grid.

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.

Markdown version