Skip to content
PortBay

Livewire views, edited in the browser — and the honest catch

Livewire morphs the DOM every time a component re-renders, which degrades live selection in any browser-attached editor. PortBay says so instead of pretending otherwise — and the write-back into your .blade.php files is unaffected. Pro, early access, opt-in.

The short answer

Can I use a visual editor on a Laravel Livewire app?

Livewire re-renders a component by sending new HTML over the wire and morphing it into the existing DOM, which is what makes any browser-attached editor behave differently there: a selection or an inline edit can reset mid-session when the component next updates. PortBay handles that by being explicit rather than by pretending — edit-mode selection is degraded under Livewire, and the working pattern is to change something and Save rather than to live-tweak. What is unaffected is the writing. Static markup in your Blade templates edits normally: text, classes and attributes are located in your .blade.php files and rewritten there, and page title and description write into that view's own section. Structural edits are refused rather than guessed. Every one of those lanes is tested against a real Livewire fixture rather than assumed. Pro, early access, opt-in.

Verified against the product, 2026-09-05.

In the app

A Livewire app mid-morph

acme-shop · Board6 cards3 agents online
Pending2
infra
Rate-limit the API
P1
Dark mode polish
P2
Todo2
auth
Add OAuth login
P0Claude Code0/3oauth-login
Auto-dispatching
implement OAuth on app.test
db
Migrate to Postgres
P1
In Progress1
Fix flaky checkout test
P0
Done2
Set up Mailpit inbox
P2
Seed demo data
P2
1/5 · AssignA card lands in Todo and @claude is mentioned

PortBay runs your Livewire app at its own .test URL with trusted HTTPS, starts PHP-FPM, and dispatches board cards into it. The visual editor edits that same running app in your real browser — one live page, not a multi-frame design canvas.

Walkthrough

From click to .blade.php on Livewire

Four steps, and one habit. The habit is step four and it is the difference between this working well and feeling broken.

  1. Install PortBay and add your Livewire project
  2. Turn the visual editor on
  3. Open Edit in browser
  4. Change one thing, then Save — don't live-tweak

Install PortBay and add your Livewire project

Homebrew installs the app and the bundled portbay CLI. PortBay identifies the Laravel family from composer.json plus artisan, then reads composer.json for livewire/livewire specifically, serves the app at its own .test hostname over trusted HTTPS, and starts PHP-FPM for you.

brew tap portbay-app/portbay && brew install --cask portbay

Turn the visual editor on

It ships to Pro under early access and is off by default. Sign in to Pro, then flip the Early Access toggle. The open-source build does not include the editor at all — it is not compiled in.

Settings › Account › Early Access

Open Edit in browser

The project's Visual editing section has one button. It opens your normal browser at your normal .test URL with the edit bar docked at the top — your real routes, your real database, your real session, and your Livewire components behaving exactly as they do now. The bar boots in Preview mode, where it does nothing and the page is fully interactive.

https://myapp.test

Change one thing, then Save — don't live-tweak

This is the Livewire-specific part. Because a component re-render replaces the DOM nodes you had selected, a long fiddling session can lose its selection halfway through. Make a change and commit it with Save, rather than nudging a value repeatedly and expecting the selection to survive a round trip to the server. The written result is the same; the session is what is fragile, not the file.

Without PortBay

What wire: morphing does to an edit session

This is a property of Livewire's rendering model, not a PortBay bug, and it affects every tool that attaches to the DOM of a running page. Knowing which parts of the page are volatile makes the editor predictable.

The write-back itself does not care: an edit to class="row" lands in boat-filter.blade.php whether the component re-rendered twice or not. It is the live selection that is degraded, and that is the honest scope of the caveat.

Questions

Asked before downloading

Live selection and inline editing during a session. Livewire re-renders a component by sending new HTML from the server and morphing it into the existing DOM, so the nodes an editor was holding onto can be replaced underneath it and a selection or an in-progress inline edit resets. The recommended pattern is to make a change and Save rather than to nudge a value repeatedly across several server round trips.

Yes, and that is the part worth separating out. All four write lanes — text, attribute, class and page settings — write on Livewire, proven against a real Livewire fixture project in PortBay's cross-stack test, which edits resources/views/pages/about.blade.php and reads the changed bytes back off disk. The caveat is about the live editing session, not about whether your file changes.

PortBay identifies the Laravel family from a composer.json plus an artisan file, then reads composer.json for livewire/livewire in either require or require-dev. Order matters: inertiajs/inertia-laravel is checked first, so a project carrying both is treated as Inertia, which sits on a better-supported lane. A Laravel project with neither is plain Laravel.

Not on this lane, and it would be easy to imply otherwise. The stamper's capability upgrade is wired to plain Laravel projects specifically, not to the Livewire variant, so a Livewire project edits by locating your markup in your .blade.php files rather than by following a source coordinate. In practice that means text, class and attribute edits write, structural edits are refused rather than guessed, and style edits go to a PortBay override sheet instead of into your templates.

Into the Blade view for that route — the section the layout yields, in the same file you were just editing markup in. PortBay resolves the route through routes/web.php to the view it renders rather than guessing which of your templates serves the URL. The layout has to declare the containers for this to land anywhere useful, which is the ordinary Laravel layout shape rather than something PortBay asks you to add.

No, and for the same reason it is not on any server-rendered stack: the words came from your data, not from the template, so there is nothing in the file to rewrite. What does edit is everything around them — the classes, the attributes, and the literal text you wrote. A class on the element inside a foreach edits normally, because that class is in your file exactly once.

No. It is a PortBay Pro feature, still in early access behind an opt-in toggle in Settings, and it is not compiled into the open-source build. It refuses to run while the project is shared over a public tunnel, and the edit bar works only on local .test hosts. Running Livewire on a real .test domain with trusted HTTPS, with PHP-FPM and a database managed for you, is in the free app.

PortBay mascot — a friendly blue tugboat

Give your projects and your agents a real local home.

Download for macOS

Free & open source · macOS 11+ on Apple Silicon · Pro from $10/mo