README

Elementa — a modular, drag-and-drop frontend builder for Laravel.
Build pages like Elementor. Extend like a Laravel package.

Quick start · Features · Getting started · User guide · Plugins · API · FAQ

✨ Why Elementa?

Elementa lets non-technical users build production pages with a visual, drag-and-drop editor, while giving developers a clean, plugin-friendly Laravel package they can extend in PHP. It's not a fork of WordPress or a hosted SaaS — it's a regular Composer package you install into your Laravel app and own end-to-end.

You get…	What it means
🎨 Drag-and-drop Vue 3 editor	10 core widgets, inspector, undo/redo, animated reorder, live iframe preview, responsive viewports
🧩 Plugin API	Third-party widgets, themes, and templates auto-discovered from any Composer package
👥 Real-time collaboration	Presence, monotonic version + 409-on-stale, optional Pusher / Reverb broadcasting
🛒 Marketplace + licensing	HMAC-signed license keys, pluggable payment gateways (Stripe, Null, your own)
🔒 Roles + approval workflow	`designer` / `editor` / `reviewer` / `admin` + `draft → in_review → approved → published`
📊 Analytics dashboards	Top pages / widgets / per-day buckets · JSON + CSV export
🌍 Multi-language	`pb_translations`, `LocalizedRenderer`, `?locale=` switching, hreflang, RTL detection
♿ WCAG 2.1 AA certification	`WcagReporter` + heuristics auditor + structural checks (landmarks, lang, viewport zoom)
⚡ Performance	Page cache, queue-based revalidation, CDN rewriting, lazy-loaded images

🚀 Quick start

1. Require the package

composer require lupael/elementa

2. Publish & migrate

php artisan vendor:publish --provider="Lupael\Elementa\ElementaServiceProvider"
php artisan migrate

3. Seed starter templates (optional)

php artisan elementa:seed-templates

4. Open the editor

http://your-app.test/page-builder/editor

Drag a section onto the canvas, drop in a heading + button, hit Publish. Done.

Don't have a Laravel app handy? Check out the demo/ directory — it shows how to consume Elementa as a path repo for local development.

🎭 Feature tour

Visual editor with inspector

The editor is a single Vue 3 SPA mounted in a Blade view (no build step required — Vue loads from a CDN by default). Drag widgets from the left palette, edit their settings in the right inspector, and watch your changes reflected live with smooth animated reordering.

Six production-ready starter templates

Landing pages, blog posts, corporate sites, e-commerce product showcases, personal portfolios, and SaaS pricing — all installable via php artisan elementa:seed-templates.

Real-time collaboration

Multiple editors on the same page see each other's presence indicators, live cursors, and document patches. Optimistic concurrency means stale patches are rejected with HTTP 409 and a rebase hint — no merge conflicts.

Marketplace + HMAC-signed licenses

A built-in marketplace for premium templates, themes, widgets, and plugins. Pluggable payment gateways (NullGateway, StripeGateway, or your own via GatewayInterface). Per-user license keys are HMAC-signed and verifiable offline.

Analytics dashboards

Track which pages, widgets, and templates actually get used. Export raw or aggregated data as CSV. Build your own dashboards by hitting /api/page-builder/analytics/*.

🏛 Architecture at a glance

Every layer is replaceable — swap the renderer, register your own widgets, plug in a different broadcaster, point assets at any CDN. See the architecture guide for the full picture.

📚 Documentation

Guide	For	What's in it
Getting started	Everyone	5-minute install + first page
User guide	Editors / designers	Build pages, apply themes, manage media
How-to tutorials	Editors / designers	Step-by-step recipes (themes, i18n, a11y)
Plugin development	PHP developers	`PluginInterface`, registration, marketplace
Developer guide	PHP developers	Custom widgets, controllers, events
Architecture	PHP developers	Layers, services, data model
API reference	Integrators	REST endpoints, facade methods, events
Collaboration	DevOps / PHP	Pusher / Reverb setup, presence channels
Marketplace	Plugin authors	Submit items, gateways, licensing
Analytics	DevOps / PHP	Event tracking, dashboards, CSV export
FAQ	Everyone	Common issues, troubleshooting

🗺 Roadmap

Elementa follows semantic versioning. All seven planned milestones from v0.1.0 (scaffold) through v1.0.0 (Elementor-class polish + WCAG 2.1 AA certification) are already shipped and available as GitHub Releases.

Version	Theme	Status
`v0.1.0`	Scaffold	✅ Released
`v0.2.0`	Advanced editor features	✅ Released
`v0.3.0`	Plugin API + Collaborative editing	✅ Released
`v0.4.0`	Marketplace + Advanced roles	✅ Released
`v0.5.0`	Analytics + Performance scaling	✅ Released
`v1.0.0`	Polish + WCAG 2.1 AA + Audit trail	✅ Released
`v1.0.2`	Namespace alignment + docs suite	✅ Latest
`v1.1.0`	Documentation suite & visuals	🔜 Next
`v1.2.0+`	Plugin marketplace ecosystem	Planned

See packages/lupael/elementa/CHANGELOG.md for the full history.

🧪 Testing

Elementa ships two complementary test layers — both run with zero setup beyond php:

# 1. End-to-end smoke test (no Laravel, no PHPUnit, no composer install)
php smoke-test.php
# → Result: 62 passed, 0 failed.

# 2. PHPUnit unit tests
cd packages/lupael/elementa
php phpunit.phar          # or vendor/bin/phpunit after `composer install`
# → OK (4 tests, 8 assertions)

The GitHub Actions CI workflow runs both layers across the PHP 8.1 / 8.2 / 8.3 matrix on every push.

🤝 Contributing

We follow a main (releases) + develop (ongoing work) branch strategy. Before opening a PR:

Branch from develop.
Run php smoke-test.php — it must report 62 passed.
Add an entry to packages/lupael/elementa/CHANGELOG.md under the unreleased section.
Bump composer.json version if your change ships a release.

Full rules: see CONTRIBUTING.md.

🛡 Security

Found a security issue? Please email the maintainer listed in MAINTAINERS.md instead of opening a public issue. We aim to acknowledge within 48 hours.

📜 License

Elementa is open-source software released under the MIT license.

Built with ☕ and a lot of CSS variables by @lupael and contributors.

lupael / elementa

Maintainers

Package info

Statistics

Security