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:

1. Branch from develop.
2. Run php smoke-test.php — it must report 62 passed.
3. Add an entry to packages/lupael/elementa/CHANGELOG.md under the unreleased section.
4. 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.