EmVB 0.3.0

EmVB 0.3.0 is a large feature release: live data, personalization decided on the server, a command palette, version history, design tokens, an accessibility co-pilot and scroll motion. Published pages are still plain HTML and CSS.

npm i @perkyzz/emvb@0.3.0

Works with EmDash CMS 1.0 to 1.2 (built and tested on 1.2.0) on Node (SQLite) and Cloudflare Workers (D1). Peer ranges are unchanged.

Before you update

• Schema 13. Pages and the design document move from schema 12 to 13. Older pages upgrade automatically when they load, but once a page is saved with 0.3.0, EmVB 0.2.x refuses to open it. Update every site that shares a database together.

What's new

• Live data binding. Bind a heading, text, button, link, image, icon or menu item to a post field, a site setting or a URL parameter (?plan=pro). The typed value stays as the fallback, and the canvas shows live values while you edit.
• Collection Loops and an Empty state. List any collection (team, projects…) as a list, grid or cards with a limit and an order, and design what visitors see when it's empty.
• Page N of M for Pagination, with your own wording.
• Page weight meter. HTML, CSS, JavaScript and image weight against a budget, with warnings and the heaviest sections.
• Zero-JS badges on the few elements that add a script.
• A/B tests at the edge. Make variant B of any element; the server picks an arm per visitor and keeps it in a cookie. No flicker, no script.
• Visitor-aware elements. Show or hide by country, device, first or returning visit, and time of day in a chosen time zone, decided on the server.
• Command palette. Ctrl/Cmd+K inserts elements and section recipes, jumps to layers, applies classes and runs actions.
• Version timeline. Compare any saved version side by side and restore one section or the whole page.
• Design tokens and fluid sizes. Type and spacing scales as ordinary variables, optionally fluid with CSS clamp().
• Accessibility co-pilot. A live score with one-click fixes for alt text, heading order, contrast, link names and more.
• Where styles come from. The Style tab shows which tag default, class or element style applies and what it overrides.
• Scroll motion. Pure-CSS scroll-driven animations with presets, per screen size.
• Section recipes. Hero, Features, Call to action, Testimonial, Stats and FAQ, built from your Site styles.
• Shareable playground links. Share a page (and optionally your Site styles) as an emvb.dev/playground link; nothing is uploaded.

Security

• Links and images bound to a URL parameter only accept same-site URLs unless you tick Allow outside sites, which warns about phishing.
• Bound values are capped, stripped of control characters, escaped and checked like typed values.
• Pages with an A/B test or a visitor rule are sent as private, no-store with Vary: Cookie, skip Astro's route cache, and use first-party HttpOnly cookies.

Also

• The Node demo's dev server runs on Node (thanks @masonjames).
• emvb.dev has a changelog page.

Full changelog: CHANGELOG.md · Website and playground: https://emvb.dev

EmVB 0.2.1

EmVB 0.2.1 adds support for EmDash CMS 1.2.

It's built and tested on EmDash 1.2.0, with the unit tests and the end-to-end suite on both the Node and Cloudflare demos. The emdash peer range is still ^1.0.0, so sites on EmDash 1.0 and 1.1 can update too. There are no schema changes, and 0.2.0 pages open as they are.

npm i @perkyzz/emvb@0.2.1

What's fixed

Nothing in EmDash 1.2 broke EmVB. Checking against it did turn up a few bugs that affected every EmDash 1.x version:

• Theme Builder: when two parts match a page equally, the one you saved most recently wins again. Before, the day of the week it was saved on decided.
• Post Date now shows the post's EmDash publish date. It was empty on real posts.
• Post Author now shows the post's EmDash byline. It was empty unless the post had its own author field.
• Odd URLs: a category, tag or post address with a broken percent-escape (like /tag/50%) no longer causes a server error in a theme-aware layout.
• Box shadow: the Position menu says "Outset" or "Inset" instead of the stored keyword.

Demos

Both demo sites run on EmDash 1.2.0. They link posts by entry.data.slug, as EmDash 1.2 recommends for multilingual sites, and their seeds put widget options under props.

Full changelog: CHANGELOG.md · Website and playground: https://emvb.dev

EmVB 0.2.0

EmVB 0.2.0 is out: an icon library, icon styling with your own SVGs, new layout and theme elements, and a playground where you can try the editor in your browser without installing anything: https://emvb.dev/playground/

Install or upgrade: npm i @perkyzz/emvb@0.2.0

Upgrading: layouts and the design document move to schema 12 (0.1.0 used schema 9). Older documents upgrade automatically when they load. Once a page is saved with 0.2.0, EmVB 0.1.0 refuses it as "saved by a newer EmVB", so update every site that shares a database together.

• Icon library: the Icon element opens a searchable picker over four bundled sets: Lucide, Font Awesome Free, Tabler and Remix (4.8.0). It has a set and style sidebar, word search in any order and a keyboard-friendly grid. Sets load only in the editor, when the picker opens; pages store just the chosen SVG. License notices ship in the package.
• Icon styling and Upload SVG: the Style tab starts with an Icon section: colour, rotate, flip, scale, stroke width, drop shadow, spin or pulse, and transitions. All of it works per state (Hover, Focus, Active) and per device, with plain CSS. Multi-colour SVGs keep their own colours unless you turn on Force single color. Shape presets add a circle, rounded or square background. Upload SVG adds your own icons under My uploads; uploads are sanitized, deduplicated and listed in All icons too.
• Try it in your browser: emvb.dev/playground runs the real editor in the browser against an in-browser stand-in for EmDash, with starter content, Visitor view, Export and Reset. Nothing to install.
• Project site: emvb.dev is the new home for EmVB, with screenshots, guides and the playground.
• New elements and editor features:
  • Elements: a layout Section element; a Menu element with dropdowns and a wide panel; floating elements and a Float theme part for bars and corners; Pagination for paged archives.
  • Editing: grid columns per device; one linked control for padding, margin, border and radius; multi-stop gradients; font weights 100–900; links on Headings and Icons; Save local styles as class; editor-only names for elements in Layers; Revert to published; search in the Visual pages and Theme Builder lists.
  • Page settings and preview: site text direction (LTR, RTL, auto); SEO settings for canonical URL, hide from search engines and a social image; a scaled 1280 px Desktop canvas and device-sized Preview.
• Fixes, grouped:
  • Accessibility: one H1 and no skipped heading levels on starter content; page landmarks; 4.5:1 contrast on controls; full keyboard use of Layers, menus, tabs, popups and dialogs. While the editor is open, the admin behind it is inert, so Tab stays in the editor.
  • Forms: fields take the form's input type (email, phone, URL, number, date), required state and limits, so the forms script checks them before sending and shows messages next to each field. Duplicate field names get a warning. Ids stay unique when a form appears twice.
  • Saving and publishing: a page changed in another tab or window raises a conflict instead of being overwritten. A page moved to Trash, a signed-out session and a dropped connection each get their own clear message. Undo never leaves edits looking saved.
  • Public output: long words such as pasted URLs wrap on phones instead of widening the page. Pages print robots, canonical and Open Graph tags. Empty Tabs and Lists render nothing stray. Images keep their natural size and alt text. Archive pages have numbered URLs and correct titles.
  • Theme Builder and popups: condition labels match the editor. Popups trap focus correctly, lock page scroll while open, open once per visit and are named by their first heading.
  • Names, classes and import: class and variable names stay unique on rename, New and Duplicate. Import renames names a file repeats and lists the renames. Pasting a style onto another element type no longer carries icon-only settings.

Full changelog: https://github.com/PerkyZZ999/EmVB/blob/main/CHANGELOG.md

EmVB 0.1.0

The first release, published on npm as @perkyzz/emvb: a visual page builder for EmDash CMS 1.0.x on Node (SQLite) and Cloudflare Workers (D1).

• Package: install with npm i @perkyzz/emvb and register emvb() in astro.config. It ships TypeScript source (no build step) and needs EmDash ^1.0.0, Astro ^7 and React ^19.

• Editor: a full-screen editor inside the EmDash admin. Drag, drop and nest elements, edit text on the canvas, copy and paste, undo and redo, and preview desktop, tablet and mobile.

• Elements: containers with flexbox or CSS Grid, headings, text, buttons, images, video, icons, tabs, accordions, popups and forms (through the EmDash forms plugin).

• Styling: Hover, Focus and Active states with transitions, per-device styles and hide on device, backgrounds with gradients and overlays, entrance animations, custom attributes and text decoration.

• Site styles: colour, font, size and spacing variables; classes in a clear priority order; tag defaults; changes staged until Publish styles; import and export as JSON.

• Theme Builder: headers, footers, Error 404, Search Results, Single Page, Single Post, Archive, Loop Item and popups, with display conditions and dynamic data.

• Public pages: plain HTML and CSS. The only EmVB scripts are the optional popups and tabs scripts, which load only on pages that use them.

• Storage: layouts and the design document are validated on save and versioned at schema 9. Older documents upgrade automatically.

Install: npm i @perkyzz/emvb (https://www.npmjs.com/package/@perkyzz/emvb).