Module 01 of 06 · Page Builder

The drag-drop canvas that ships inside every AuriusCRM workspace.

60+ widgets. Six-device responsive preview. CSS-variable theme swap. JSON-first export so your page survives any framework migration. Built on BuilderJS — the same engine running the public playground at builder.emotsy.com.

60+ Widgets
6 Device sizes
9 Languages
0 Frameworks locked
60+ widgets, organised by intent

Drop a hero. Drop a form. Drop a YouTube embed. Done.

Every category covers the next thing you'd reach for — text and headings for narrative, media for proof, forms for capture, components for layout. No "build it yourself" required.

Need something custom? The widget SDK lets you ship your own widgets that drop into the palette next to the built-ins — same drag-drop UX, same JSON export.

12

Content

Heading · Paragraph · Blockquote · List · Definition list · Divider · Marked text · Eyebrow

8

Media

Image · Image link · Image grid · Hero image · Video · YouTube · Audio · Background

14

Layout

Hero · Cells · Container · Block · 1/2/3 column · Grid · Panel · Well · Jumbotron · Intro

10

Forms

Form · Form group · Input · Email · Number · Date · Checkbox · Radio · Select · Multiselect · Textarea

6

Buttons

Button · Submit · Cancel · Button group · Button toolbar · Icon button

7

Components

Navbar · Header · Footer · Social · User profile · Media object · Pricing table · Services list

3

Commerce

Product · Product list · Abandoned cart

Custom widgets

Ship your own components via the widget SDK. Render whatever, expose typed controls, drop into the palette.

Six-device responsive preview

Edit in any device. Render perfectly in all six.

The builder isn't desktop-first with a "mobile preview" bolted on. Every widget knows how it stacks at 320px and how it expands at 1920px. Edit in the size your audience actually uses.

Want to hide a section on mobile? One toggle. Want to swap a card-grid for a carousel on phone? Native. The responsive cell-stack rule kicks in at ≤600px so nothing breaks at the edges.

CSS-variable themes

Swap a brand without re-saving a single page.

Every widget renders through CSS variables — --theme-primary, --theme-bg, --theme-text, etc. Define a theme as a CSS file; switch themes by swapping the file. Your existing pages don't change shape, just colour.

Ship one product. Sell to ten brands. Each tenant gets their own theme; the pages stay portable.

Aurius (default)
--theme-primary: #0B8B85
Onyx
--theme-primary: #7F7F7F
Sunset
--theme-primary: #E5571A
Indigo
--theme-primary: #5B6ABF
JSON-first export

Your page is a JSON file. Forever.

No proprietary format. No "export to HTML and lose the structure". The page IS a JSON document. Save it to your DB, ship it to a CDN, render it client-side, render it server-side — all from the same canonical source.

When Next.js becomes Remix becomes whatever's next, you don't migrate pages. You point a new renderer at the same JSON. Pages survive framework churn.

webinar-landing.json — exported from AuriusCRM
{
  "version": "1.0",
  "theme": "aurius",
  "sections": [
    {
      "type": "hero",
      "props": {
        "title": "Webinar: ship without breaking",
        "subtitle": "Friday · 2pm UTC · 45 min",
        "cta": { "label": "Reserve →", "href": "#form" }
      }
    },
    {
      "type": "cells",
      "props": { "columns": 2, "gap": 24 },
      "children": [
        { "type": "feature", "props": { "icon": "clock", "title": "45 minutes" } },
        { "type": "feature", "props": { "icon": "globe",  "title": "Recording sent" } }
      ]
    },
    {
      "type": "form",
      "props": { "id": "form", "submit": "/api/lead" },
      "children": [
        { "type": "input",  "props": { "name": "email", "type": "email", "required": true } },
        { "type": "button", "props": { "label": "Reserve my seat" } }
      ]
    }
  ]
}
Embed anywhere

One script tag. Any framework. Any host.

Need the builder inside your own SaaS? Drop a single script tag, mount on any div, capture the JSON on save. Works the same in React, Vue, Astro, plain HTML — because the builder is framework-agnostic by design.

Next.js

<Script src="…/builder.js" />

<div id="builder" />

Vue / Nuxt

script setup · mount on ref

v-on:save="onSave"

Astro

client:only directive

island-mode safe

Laravel · Blade

@verbatim @include @endverbatim builder partial

CSRF token wired natively

Plain HTML

<script src="builder.js"></script>

no build step required

Headless / API-only

POST /v1/builder/render

→ JSON in · HTML out

Drop a hero. Drop a form. Ship the page.

The public playground at builder.emotsy.com is the fastest way to feel it. Open it in a new tab — drag widgets, swap themes, export JSON.