Download the PHP package community-sdks/unlayer-livewire without Composer

Unofficial Unlayer Livewire SDK

Livewire wrapper for @community-sdks/unlayer-alpinejs, which wraps @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

• @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

Install the PHP package:

Install the browser asset:

This publishes the compiled browser file to:

After upgrading the package or rebuilding the browser asset locally, publish the new file again:

If you want to customize upload storage, publish the config file too:

To overwrite previously published files:

You can also publish assets or config manually:

Basic Usage

Use the Livewire component anywhere in a Blade view:

state is an array with this shape:

Cast your model column to an array:

Examples

Laravel-ready example snippets are included in this repository:

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

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:

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:

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:

The Livewire template-search values map to Unlayer's request body:

Example upstream body:

Template thumbnails use https://api.unlayer.com/v2/stock-templates/{slug}/thumbnail?width=500.

/unlayer-livewire/templates/{template} loads the design through:

Using StockTemplate(slug: $slug) { StockTemplatePages { design } }.

The Alpine component exposes:

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

The PHP Livewire component exposes:

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:

Make sure your public disk is linked:

Development

Build the browser adapter:

Republish the built asset into a Laravel app:

Run TypeScript checks:

Format PHP:

License

MIT