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.
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.
A Livewire app mid-morph
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.
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.
- Install PortBay and add your Livewire project
- Turn the visual editor on
- Open Edit in browser
- 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 portbayTurn 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 AccessOpen 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.testChange 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.
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.
{{-- resources/views/pages/about.blade.php --}}@extends('layouts.app') @section('title', 'About us') {{-- Page settings write here --}} @section('content') <header class="masthead"> <h1 class="hero">We build boats</h1> {{-- Static Blade markup. Nothing re-renders it, so a selection here is as stable as on any other Laravel page. --}} </header> <livewire:boat-filter /> {{-- Inside this component's own view, every server round trip sends fresh HTML that Livewire morphs into the live DOM. Your selection can be dropped when that happens. --}}@endsection {{-- resources/views/livewire/boat-filter.blade.php --}}<div> <input wire:model.live="query" class="field" /> <ul class="results"> @foreach ($boats as $boat) <li class="row">{{ $boat->name }}</li> {{-- class="row" edits: it is literally in this file. The name does not: it came from the database. --}} @endforeach </ul></div>
The pieces underneath
Visual editor
Click an element on your running site in your own browser and edit its text, classes and styles straight into the source file, across 21 stacks.
Explore →Local databases
Six engines, one wizard: isolated data dirs, dedicated ports, supervision, and connection vars injected into linked projects on start.
Explore →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.

Give your projects and your agents a real local home.
Download for macOSFree & open source · macOS 11+ on Apple Silicon · Pro from $10/mo