PHPackages community-sdks/unlayer-livewire - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. community-sdks/unlayer-livewire ActiveLibrary[Utility & Helpers](/categories/utility) community-sdks/unlayer-livewire =============================== Livewire wrapper for the unofficial Unlayer Alpine.js SDK. v1.0.4(1mo ago)1132MITPHPPHP ^8.2 Since May 1Pushed 1mo agoCompare [ Source](https://github.com/community-sdks/unlayer-livewire)[ Packagist](https://packagist.org/packages/community-sdks/unlayer-livewire)[ RSS](/packages/community-sdks-unlayer-livewire/feed)WikiDiscussions main Synced 1w ago READMEChangelog (5)Dependencies (4)Versions (6)Used By (2) Unofficial Unlayer Livewire SDK =============================== [](#unofficial-unlayer-livewire-sdk) Livewire wrapper for [`@community-sdks/unlayer-alpinejs`](https://www.npmjs.com/package/@community-sdks/unlayer-alpinejs), which wraps [`@community-sdks/unlayer-ts`](https://www.npmjs.com/package/@community-sdks/unlayer-ts). This package gives Laravel apps a Livewire component for the Unlayer editor while keeping the editor lifecycle in the TypeScript SDK and Alpine adapter. Version Compatibility --------------------- [](#version-compatibility) - `@community-sdks/unlayer-livewire` uses `@community-sdks/unlayer-alpinejs` and `@community-sdks/unlayer-ts` internally. - Keep the published browser asset in sync by running the package install command again after upgrading the package. Getting Started --------------- [](#getting-started) Install the PHP package: ``` composer require community-sdks/unlayer-livewire ``` Install the browser asset: ``` php artisan unlayer-livewire:install ``` This publishes the compiled browser file to: ``` public/unlayer-livewire.js ``` After upgrading the package or rebuilding the browser asset locally, publish the new file again: ``` php artisan vendor:publish --tag=unlayer-livewire-assets --force ``` If you want to customize upload storage, publish the config file too: ``` php artisan unlayer-livewire:install --config ``` To overwrite previously published files: ``` php artisan unlayer-livewire:install --force ``` You can also publish assets or config manually: ``` php artisan vendor:publish --tag=unlayer-livewire-assets --force php artisan vendor:publish --tag=unlayer-livewire-config ``` Basic Usage ----------- [](#basic-usage) Use the Livewire component anywhere in a Blade view: ``` ``` `state` is an array with this shape: ``` [ 'html' => '', 'design' => [], ] ``` Cast your model column to an array: ``` protected function casts(): array { return [ 'content' => 'array', ]; } ``` Examples -------- [](#examples) Laravel-ready example snippets are included in this repository: ``` examples/routes/web.php.stub examples/views/basic.blade.php examples/views/templates.blade.php ``` Copy the example routes into your app's `routes/web.php`, then copy the example views into `resources/views/unlayer-livewire-examples/`. The basic example renders the editor with an empty state. The template example enables the built-in picker UI and the same-origin Laravel template proxy. Stock Templates --------------- [](#stock-templates) Template search and loading comes from the underlying TypeScript SDK and works through the Alpine adapter. Unlayer's public stock template search endpoint does not allow browser CORS requests, so this package includes Laravel proxy routes: ``` GET /unlayer-livewire/templates GET /unlayer-livewire/templates/{template} ``` These are same-origin relative URLs. For example, `/unlayer-livewire/templates` becomes `https://your-app.test/unlayer-livewire/templates`. If you replace the built-in template client with a backend on another domain, use full URLs and make sure that backend allows CORS for your frontend domain. The browser calls these same-origin routes, and Laravel calls Unlayer from the backend. You can pass default filters and enable the built-in editor tab: ``` ``` You can customize the route prefix and middleware in `config/unlayer-livewire.php`: ``` 'routes' => [ 'prefix' => 'unlayer-livewire', 'middleware' => ['web'], ], ``` The template trigger is shown in a small toolbar above the editor. The picker opens over the editor itself, without a page backdrop. Behind the proxy, `/unlayer-livewire/templates` calls: ``` POST https://unlayer.com/templates/search Content-Type: application/json ``` The Livewire `template-search` values map to Unlayer's request body: ``` search -> filter.name type -> filter.type premium -> filter.premium, "true" when true, "" when false limit -> perPage offset -> page, calculated as floor(offset / limit) + 1 collection -> filter.collection sort -> filter.sortBy ``` Example upstream body: ``` { "page": 1, "perPage": 20, "filter": { "premium": "", "collection": "", "name": "newsletter", "sortBy": "recent", "type": "email" } } ``` Template thumbnails use `https://api.unlayer.com/v2/stock-templates/{slug}/thumbnail?width=500`. `/unlayer-livewire/templates/{template}` loads the design through: ``` POST https://studio.unlayer.com/api/v1/graphql ``` Using `StockTemplate(slug: $slug) { StockTemplatePages { design } }`. The Alpine component exposes: ``` mount() isReady() getState() setState(state) loadDesign(design) exportState() searchTemplates(options) refreshTemplates() loadTemplate(slug) chooseTemplate(templateOrSlug) openTemplates() closeTemplates() setTemplateSearch(search) ``` When `templatePicker` is enabled, the built-in picker UI from `@community-sdks/unlayer-ts` is mounted inside the editor surface. The Livewire wrapper delegates to the updated Alpine adapter for opening, closing, and refreshing that picker. Livewire Methods ---------------- [](#livewire-methods) The PHP Livewire component exposes: ``` setState(array $state): void loadDesign(array $design): void clear(): void exported(array $state): void resolveUploadedImage(string $temporaryFilename): string ``` Uploads ------- [](#uploads) Image uploads use Livewire's JavaScript upload API. The editor uploads a file to the component property `imageUpload`, then calls `resolveUploadedImage()` to store it and return the public URL. Configure storage in `config/unlayer-livewire.php`: ``` return [ 'upload' => [ 'disk' => 'public', 'path' => 'unlayer-livewire', 'visibility' => 'public', ], ]; ``` Make sure your public disk is linked: ``` php artisan storage:link ``` Development ----------- [](#development) Build the browser adapter: ``` npm install npm run build ``` Republish the built asset into a Laravel app: ``` php artisan vendor:publish --tag=unlayer-livewire-assets --force ``` Run TypeScript checks: ``` npm run typecheck ``` Format PHP: ``` vendor/bin/pint ``` License ------- [](#license) MIT ### Health Score 41 — FairBetter than 87% of packages Maintenance92 Actively maintained with recent releases Popularity8 Limited adoption so far Community6 Small or concentrated contributor base Maturity50 Maturing project, gaining track record How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 5 Last Release 38d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/211412089?v=4)[ZPM Labs](/maintainers/zpmlabs)[@ZPMLabs](https://github.com/ZPMLabs) ### Code Quality Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/community-sdks-unlayer-livewire/health.svg) ``` [![Health](https://phpackages.com/badges/community-sdks-unlayer-livewire/health.svg)](https://phpackages.com/packages/community-sdks-unlayer-livewire) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3325.1M337](/packages/psalm-plugin-laravel)[spatie/laravel-export Create a static site bundle from a Laravel app 670139.5k6](/packages/spatie-laravel-export)[venturedrake/laravel-crm A free open source CRM built as a package for laravel projects 39910.0k](/packages/venturedrake-laravel-crm)[zidbih/laravel-deadlock Make temporary Laravel workarounds expire and fail CI when ignored. 954.0k](/packages/zidbih-laravel-deadlock)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)