PHPackages mariohamann/statamic-visual-editor - 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. mariohamann/statamic-visual-editor ActiveLibrary[Utility & Helpers](/categories/utility) mariohamann/statamic-visual-editor ================================== v0.1.8(1mo ago)04PHP Since Mar 18Pushed 1mo agoCompare [ Source](https://github.com/mariohamann/statamic-visual-editor)[ Packagist](https://packagist.org/packages/mariohamann/statamic-visual-editor)[ RSS](/packages/mariohamann-statamic-visual-editor/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (2)Versions (10)Used By (0) Statamic Visual Editor ====================== [](#statamic-visual-editor) Drop a tag on each component and editors always know exactly what they're editing — no matter how deeply nested. - **Two-way sync** — click or hover in the Live Preview or Control Panel and the other side highlights instantly - **Auto-expand** — click in the Live Preview and the matching set opens and scrolls into view in the Control Panel - **Zero production footprint** — annotations and scripts are stripped outside of Live Preview Important **This is the installable package repository** — it is auto-synced from the [development repository](https://github.com/mariohamann/statamic-visual-editor-dev), which contains a full demo including tests. Please open issues and PRs there, not here. Demo ---- [](#demo) CleanShot.2026-03-19.at.14.15.58.mp4 Requirements ------------ [](#requirements) - Statamic 6 - PHP 8.4+ Installation ------------ [](#installation) ``` composer require mariohamann/statamic-visual-editor ``` Publish assets (required on every addon update): ``` php artisan vendor:publish --provider="MarioHamann\StatamicVisualEditor\ServiceProvider" --force ``` A settings page is available at **CP → Tools → Visual Editor** to enable or disable the addon. --- Laravel Boost Support --------------------- [](#laravel-boost-support) This addon includes **three dedicated AI agent skills** to help you annotate templates with Visual Editor tags: 1. **`visual-editor-research`** — Audits your project to find where annotations should be added, scanning blueprints, fieldsets, and templates to map sets to partials. 2. **`visual-editor-antlers`** — Provides implementation guidance for adding tags to Antlers templates, with examples and parameter reference. 3. **`visual-editor-blade`** — Provides implementation guidance for adding tags to Blade templates, including component patterns and blueprint resolution. When you install/update the addon in a Laravel Boost-enabled project (`php artisan boost:update`), these skills are automatically made available to your IDE's AI agent. The addon also extends the project's `AGENTS.md` with core concepts and activation triggers. For details, see the [Boost documentation](https://laravel.com/docs/13.x/boost.md). --- Concepts -------- [](#concepts) The addon provides a single tag — `{{ visual_edit }}` — that you place on HTML elements in your templates. During Live Preview it outputs data attributes that power bidirectional click-and-hover sync between the preview and the CP. Outside Live Preview it outputs nothing. There are two targeting modes: ModeWhat it targetsHow it works**Set targeting**Replicator, Bard & Grid itemsLinks each rendered item to its CP set via an auto-generated UUID**Field targeting**Fixed blueprint fields (title, SEO, etc.)Links any element to a CP field by its handleBoth modes are fully bidirectional: clicking or hovering in the preview highlights the CP field, and vice versa. --- Set targeting ------------- [](#set-targeting) Targets individual Replicator, Bard, or Grid items. The addon automatically adds a hidden `_visual_id` field to every set in your blueprints and stamps a stable UUID during preview and on save — **no blueprint changes required**. ### Antlers [](#antlers) Add `{{ visual_edit }}` to the outermost element of each set partial. The tag reads `_visual_id` and `type` from the current context automatically: ``` {{# Replicator / Bard set partial #}} {{ text }} ``` ``` {{# Grid rows #}} {{ links }} {{ label }} {{ /links }} ``` ### Blade [](#blade) Use `Statamic::tag('visual_edit')` with `->context($item->all())` to pass the set/row data. The tag reads `_visual_id` and `type` from the context, just like in Antlers: ``` {{-- Replicator / Bard set --}} context($set->all())->fetch() !!}> {!! $set->text !!} ``` ``` {{-- Grid rows --}} @foreach ($rows as $row) context($row->all())->fetch() !!}> {!! (string) ($row->rule ?? '') !!} @endforeach ``` > **Important:** Always use `{!! !!}` (unescaped output), not `{{ }}`. The tag returns raw HTML attributes. --- Field targeting --------------- [](#field-targeting) Targets fixed blueprint fields — titles, SEO metadata, or any field that isn't inside a Replicator/Bard/Grid. The CP jumps directly to the field when clicked, switching tabs automatically if needed. ### Antlers [](#antlers-1) ``` {{# Top-level field #}} {{ hero_title }} {{# Nested field inside a group (dot notation) #}} {{ page_info:author }} ``` The tooltip label is resolved from the field's Display Name in the current entry's blueprint automatically. ### Blade [](#blade-1) ``` {{-- Recommended: pass the blueprint handle (works without an entry object) --}} blueprint('collections.pages')->field('hero_title')->fetch() !!}> {{-- Alternative: pass the entry for blueprint resolution --}} context(['page' => $entry])->field('hero_title')->fetch() !!}> {{-- Minimal: no label resolution (CP navigation still works; label is cosmetic) --}} field('hero_title')->fetch() !!}> ``` The `blueprint` parameter accepts a namespaced handle: `collections.{handle}`, `globals.{handle}`. > **Tip:** In Blade components you often don't have the entry object — use `->blueprint()` instead of threading `$entry` through props. ### Dot notation [](#dot-notation) Use dots to target nested fields inside groups: `page_info.author`. Avoid top-level field handles containing underscores that could collide with group subfield paths — both `page_info.author` and `page_info_author` resolve to the same CP element ID. --- Additional features ------------------- [](#additional-features) ### Pair tag [](#pair-tag) When there's no single outermost element to annotate, use the pair tag to wrap content in a ``: ``` {{ visual_edit }} {{ hero_title }} {{ hero_text }} {{ /visual_edit }} ``` ### Outline inside [](#outline-inside) For dense layouts where a 2 px outbound outline overlaps neighbouring elements, draw the outline inside instead: ``` ``` ``` context($set->all())->params(['outline-inside' => true])->fetch() !!}> ``` --- Parameter reference ------------------- [](#parameter-reference) All parameters work in both Antlers and Blade (via the fluent API). ParameterDefaultDescription*(none)*—Auto-targets the current set by its UUID`field`—Targets a fixed field by handle (dot notation for nested groups)`blueprint`—Resolve field labels from a specific blueprint (e.g. `collections.pages`). In Antlers the entry's blueprint is used automatically.`outline-inside``false`Draws the outline inside the element border`id`—Override: target a specific set by a known UUID### Antlers ↔ Blade mapping [](#antlers--blade-mapping) AntlersBlade`{{ visual_edit }}``Statamic::tag('visual_edit')->context($set->all())->fetch()``{{ visual_edit field="title" }}``Statamic::tag('visual_edit')->field('title')->fetch()``{{ visual_edit field="title" blueprint="collections.pages" }}``Statamic::tag('visual_edit')->blueprint('collections.pages')->field('title')->fetch()``{{ visual_edit outline-inside="true" }}``Statamic::tag('visual_edit')->context($set->all())->params(['outline-inside' => true])->fetch()`--- Developer reference ------------------- [](#developer-reference) ### How it works [](#how-it-works) 1. **Blueprint injection** — `InjectVisualIdIntoBlueprint` adds a hidden `_visual_id` field (type `auto_uuid`) to every Replicator, Bard, and Grid set when a blueprint is loaded. 2. **Ephemeral UUID generation** — When the CP form loads, `AutoUuidFieldtype::preProcess()` generates a fresh UUID in-memory for any set that doesn't already have one. UUIDs are never persisted — `StripVisualIds` removes any `_visual_id` values from the data before saving. 3. **Template annotation** — `{{ visual_edit }}` outputs `data-sid="{uuid}"` (set targeting) or `data-sid-field="{path}"` (field targeting) plus optional label/type attributes. 4. **Bridge script** — `InjectBridgeScript` middleware injects `bridge.js` into the Live Preview iframe. It handles click/hover events and communicates with the CP via `postMessage`. 5. **CP script** — `addon.js` (loaded via Vite) listens for messages from the iframe, expands collapsed sets, switches tabs, scrolls, and highlights the target field. Because the CP form and the Live Preview share the same in-memory form state, the ephemeral UUIDs are identical on both sides for the duration of the editing session — no persistence is needed. Hover sync works in both directions for both mechanisms. ### Health Score 34 — LowBetter than 77% of packages Maintenance90 Actively maintained with recent releases Popularity5 Limited adoption so far Community8 Small or concentrated contributor base Maturity29 Early-stage or recently created project Bus Factor1 Top contributor holds 98% of commits — single point of failure 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 9 Last Release 51d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6780bbe98e3d42fd1809b256affd8ef43e92a5e959394c153b4492f6536b8ca2?d=identicon)[mariohamann](/maintainers/mariohamann) --- Top Contributors [![mariohamann](https://avatars.githubusercontent.com/u/26542182?v=4)](https://github.com/mariohamann "mariohamann (50 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") ### Embed Badge ![Health badge](/badges/mariohamann-statamic-visual-editor/health.svg) ``` [![Health](https://phpackages.com/badges/mariohamann-statamic-visual-editor/health.svg)](https://phpackages.com/packages/mariohamann-statamic-visual-editor) ``` ### Alternatives [statamic/seo-pro 65440.7k](/packages/statamic-seo-pro)[jacksleight/statamic-bard-texstyle 17172.5k](/packages/jacksleight-statamic-bard-texstyle)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire)[withcandour/aardvark-seo Save time and get your Statamic site to rank better with the SEO addon for Statamic. 13128.3k](/packages/withcandour-aardvark-seo)[alt-design/alt-sitemap Alt Sitemap addon, create a sitemap from Statamic entries 1219.0k](/packages/alt-design-alt-sitemap)[studio1902/statamic-peak-tools 11146.7k](/packages/studio1902-statamic-peak-tools) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)