Layrr is live · free · last verified 8 Nov 2026 · viability monitor
Layrr
Layrr is a free, open-source browser overlay that maps clicked UI elements back to source code and hands the exact location to your local AI coding agent.
Layrr is a focused, free fix for a real problem: the gap between what you see in the browser and the file that produced it. Element selection, source mapping via framework metadata and file search, and [layrr] prefixed commits mean you can point, instruct, and revert without leaving your flow. It only pays off if you already run a local coding agent — Claude Code, Codex CLI, or Gemini via Pi — alongside a dev server. If you don't, you're adding a layer with nothing behind it; a hosted builder such as Bolt.new or v0 suits you better. Also skip it for backend work and large refactors.
Verdict generatedVerified 5d ago · liveness 69/100 · cite: rightaichoice.com/tools/layrr
- Frontend developers making frequent UI tweaks
- Teams already running Claude Code, Codex CLI, or Gemini via Pi
- React, Vue, Svelte, Next.js, or Astro projects with a local dev server
- Developers who want faster edit cycles without leaving the browser
- Non-developers without a coding agent set up
- Backend-only or production deployment work
- Large refactors and architectural changes
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Layrr if you don't already run a local AI coding agent such as Claude Code, Codex CLI, or Gemini via Pi beside a dev server — there'd be nothing on the other end to apply your edits.
Layrr is free and open source, installed globally with npm i -g layrr, so there is no per-seat or usage bill to compare against. The real cost sits elsewhere: it depends on a third-party coding agent (Claude Code, Codex CLI, Gemini via Pi), and that agent's own plan or API usage is what you actually pay for.
In short
Layrr — Layrr is a free, open-source browser overlay that maps clicked UI elements back to source code and hands the exact location to your local AI coding agent. Best for Frontend developers making frequent UI tweaks, Teams already running Claude Code, Codex CLI, or Gemini via Pi, React, Vue, Svelte, Next.js, or Astro projects with a local dev server. Free to use.
What is Layrr?
Layrr — Layrr is a free, open-source browser overlay that maps clicked UI elements back to source code and hands the exact location to your local AI coding agent. Best for Frontend developers making frequent UI tweaks, Teams already running Claude Code, Codex CLI, or Gemini via Pi, React, Vue, Svelte, Next.js, or Astro projects with a local dev server. Free to use.
Layrr is a free, open-source tool from Narnia (narnia.sh) that turns your browser into a visual code editor for local web apps. You run it beside the dev server you already have, hover and click the element you want changed, and describe the edit in plain English. Layrr injects a small overlay, maps the clicked element back to the source that rendered it, and passes that exact code location to an AI coding agent — Claude Code, Codex CLI, or Gemini via Pi — so you skip the slow part of hunting for the right file and line. Successful edits are committed to your repo with a [layrr] prefix, so you can inspect history and revert. It is dirty-file aware: Layrr snapshots the repo before the agent runs and avoids staging files that were already modified, protecting work in progress. It is proxy-based, so it works with existing apps rather than a hosted builder, and it reports support for React, Vue, Svelte, Next.js, Astro, and plain HTML. Install globally with npm i -g layrr, pass your local dev-server port, and edit through the browser at localhost:4567. It is aimed at frontend developers who already run a local coding agent and want a faster loop from seeing a UI bug to fixing it in source.
Key features
- Visual element selection by clicking in the browser
- Shift+click multi-element selection
- Natural-language edit instructions in plain English
- Source mapping via framework metadata and file search
- Proxy-based integration that runs beside your dev server
- Automatic git commits prefixed with [layrr]
- Dirty-file aware snapshotting before the agent runs
- Avoids staging pre-existing dirty files
- Supports React, Vue, Svelte, Next.js, Astro, and plain HTML
- Works with Claude Code, Codex CLI, and Gemini via Pi
- Global npm install via npm i -g layrr
- Browser editing interface at localhost:4567
- Edit history inspection and revert
- No IDE lock-in
- Free and open source
Behind the verdict
Layrr's value proposition is narrow and, for the right developer, genuinely useful. Most AI coding agents are strong at editing code but weak at knowing which code you mean. You end up describing a page from memory — 'the second button in the header, the one that's too wide' — and burning tokens while the agent guesses. Layrr removes that step. It sits between your browser and your dev server, injects an overlay, and carries the selected DOM plus source context into the edit, so the agent starts from an exact location. The mechanics are sensible. Selection supports one element or Shift+click multi-select. Source mapping uses framework metadata plus file search, which is what makes it work across React, Vue, Svelte, Next.js, Astro, and any plain HTML rather than a single framework. It is proxy-based, so your existing dev server keeps running and Layrr isn't a replacement for your stack. Git handling is the part that shows care: edits commit with a [layrr] prefix for easy history review and revert, and Layrr snapshots the repo before the agent runs so pre-existing dirty files aren't accidentally staged. Where it doesn't fit is equally clear. It is not an IDE replacement, not a hosted app builder like Bolt.new or v0, and not useful for backend-only or production-facing work. It assumes a local development environment, a running dev server, and an agent you already trust — agent context limits and availability are inherited problems, not Layrr's to solve. Source mapping depends on framework metadata and file search, so unusual setups may not map cleanly. As open source from Narnia, support is community-driven. If you live in the click-a-bug, describe-a-fix loop, it's a low-cost addition; if you don't, it's an extra layer.
Models under the hood
as of 2026-11-09
Limitations
- Layrr needs a local development environment with a running dev server; it injects an overlay and runs through the browser at localhost:4567.
- Edits are actually performed by third-party AI coding agents (Claude Code, Codex CLI, Gemini via Pi), so agent availability and context limits carry over.
- Source mapping relies on framework metadata and file search, which may miss unusual project setups.
- Layrr commits successful edits with a [layrr] prefix, but in-progress work is protected only by snapshotting and not staging pre-existing dirty files — you still own your git hygiene.
- As an open-source project from Narnia, support is community-driven.
as of 2026-10-08
Researching Layrr? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Is Layrr still active?
Layrr is live · free · last verified 8 Nov 2026 · viability monitor.
Viability score
How well maintained and how widely used is Layrr? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: November 2026
How we score →What do users say about Layrr?
What people actually say about Layrr — is it worth it?
We ran a structured research pass across product reviews, community discussions, and post-purchase forum threads to surface the patterns vendors won't publish themselves. Below: the recurring strengths, the hidden costs people mention most, and the cohort that consistently regrets adopting this tool.
ResearchedDiscussed by users across 4 sources (Hacker News, Product Hunt, Bluesky, GitHub) · researched Nov 8, 2026.
Weighted by the 23 posts each of 4 sources contributed.
- +Clicking a rendered element beats describing the change to an agent in plain text
- +Free and open source — repeatedly praised, with no paywall on core features
- +Runs beside your existing dev server via proxy, not a hosted builder
- +Works with Claude Code, Codex CLI, and Gemini via Pi out of the box
- +Dirty-file snapshotting protects uncommitted work before the agent runs
- −No support yet for Cursor, Amp, or other coding agents users keep asking for
- −Setup needs a terminal and dev-server port — non-technical users are locked out
- −Astro users hit silently unapplied commits before it was patched
- −Install via curl failed for some with TLS handshake errors
- −No Windows availability confirmed in launch questions
- • You still pay for the underlying LLM agent (Claude Code, Codex, or Gemini API/subscription) that actually does the edits
- • Time cost of terminal setup and dev-server port configuration
How we verified this
Every listed fact about Layrr — pricing, features, links, status — is re-read from the vendor's own pages by our verification pipeline and each change is logged with a date; the last pass ran on 8 Nov 2026. Analysis is drafted with AI models and checked against our editorial standards before publishing; see how we verify.
Verification history
We have re-verified Layrr 14 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — changed SSL certificate
- — changed who it suits, description, our verdict, features, integrations, limitations, switching in, switching out, who should skip it, pricing tiers, pricing fit, setup time, summary, use cases
- — changed limitations
- — changed switching out, pricing fit, who should skip it, hidden costs, features, setup time
- — changed SSL certificate
- — changed SSL certificate, description, pricing tiers, who should skip it, our verdict, who it suits, features
Showing the 6 most recent of 14 verification passes.
Free to cite with attribution — this page re-verifies continuously.
How much does Layrr cost in 2026?
Layrr: Free to use. Pricing last verified 8 Nov 2026.
Plans compared
Every published Layrr tier, its price as the vendor publishes it, who it fits, and what it adds over the tier below. The 12-month cost projection follows.
| Plan | Price | Billing | Who it's for |
|---|---|---|---|
| Free | Free | — | Frontend developers with a local dev server and an AI coding agent already installed who want faster UI edit loops.Adds: Starting tier. Layrr is free and open source — there is no paid tier above it in the published data; the cost you carry is your own coding agent's usage. |
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Where the pricing makes sense
The company stage and team size where Layrr's pricing actually pencils out — and where peers do it cheaper.
Layrr is free and open source, installed globally with npm i -g layrr, so there is no per-seat or usage bill to compare against. The real cost sits elsewhere: it depends on a third-party coding agent (Claude Code, Codex CLI, Gemini via Pi), and that agent's own plan or API usage is what you actually pay for.
Has Layrr's pricing changed?
No plan price for Layrr has moved since we began logging in Aug 2026; the pricing page is re-read on every verification pass.
Who should pick Layrr?
Pick Layrr if you are Frontend developers making frequent UI tweaks, Teams already running Claude Code, Codex CLI, or Gemini via Pi, React, Vue, Svelte, Next.js, or Astro projects with a local dev server, Developers who want faster edit cycles without leaving the browser.
Look elsewhere if you are Non-developers without a coding agent set up, Backend-only or production deployment work, Large refactors and architectural changes, Developers who prefer self-contained hosted builders like Bolt.new.
Skip it if Skip Layrr if you don't already run a local AI coding agent such as Claude Code, Codex CLI, or Gemini via Pi beside a dev server — there'd be nothing on the other end to apply your edits.
GeneratedReal-world workflow fit
Concrete scenarios for the personas Layrr actually fits — and what changes day-one when you adopt it.
You spot a hero CTA that's too wide and a subhead with stale copy. You start Layrr beside your dev server, click the button and shift-click the subhead, then type both changes in one instruction.
Outcome: Layrr maps both elements to their source and hands the agent exact locations, the edits land in your repo, and the commits show up with a [layrr] prefix you can review or revert.
Design review turns up a handful of spacing and color adjustments across a view. Instead of grepping for class names, you select each element in the browser at localhost:4567 and describe the change.
Outcome: Each tweak goes back to the correct component file without a file-hunt, and the [layrr] commit history gives you a clean trail to roll back individual changes.
An issue says a component misbehaves but doesn't name the file. You reproduce it locally, run Layrr, and click the misbehaving element.
Outcome: The agent receives the DOM and source context for that exact element, so the fix lands in the right place without you reading through the codebase first.
Use cases
- Fix a button that renders too wide by clicking it and describing the width change.
- Update copy in a React component without searching files for the string.
- Adjust spacing across a Svelte layout using shift-click multi-select.
- Tweak colors in a Next.js component with a plain-English instruction.
- Correct a component behavior issue by selecting it and telling the agent what should happen.
- Revert a visual edit by reviewing the [layrr] prefixed commit history.
- Point an agent at an exact DOM element instead of describing the page from memory.
Setup time & first value
How long it actually takes to get something useful out of Layrr — broken out by persona, not the marketing-page minute.
Frontend dev with an agent already configured: a few minutes — npm i -g layrr, pass your dev-server port, open localhost:4567. Teams without Claude Code, Codex CLI, or Gemini via Pi set up: budget separate time to install and authenticate an agent, since Layrr does nothing on its own.
Switching to or from Layrr
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From editing directly in your IDE: keep the repo and agent, add Layrr beside the dev server and start selecting elements instead of searching for files.
- ↗To a hosted builder like Bolt.new or v0: rebuild the project there; Layrr edits your existing repo and has no export path to a hosted builder.
Integrations
Resources & guides
Tutorials & Learning
YouTube returned 6 videos for “Layrr”, and we withheld 6: 6 could not be judged, because “Layrr” is a single word that other videos use for other things. We are showing none, because we could not prove any of them are about Layrr.
Official links
What are the best Layrr alternatives?
The closest alternatives to Layrr we list are DevoxxGenieIDEAPlugin, Ui Ux Pro Max Skill and Sourcegraph Cody. Ranked by direct product-type match, not category overlap.
| Alternative | Pricing | Starts at | Last verified |
|---|---|---|---|
| DevoxxGenieIDEAPlugin | Free | Free | — |
| Ui Ux Pro Max Skill | Free | Free | — |
| Sourcegraph Cody | Paid | Pricing not published | — |
Alternatives to Layrr
View all
DevoxxGenieIDEAPlugin
Free open-source JetBrains AI code assistant with agentic coding, spec-driven development and local LLM support
Ui Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
Sourcegraph Cody
Sourcegraph Cody brings whole-codebase context to AI coding chat, completions, and agentic batch changes across hundreds of repos.
Tools that pair well with Layrr
Common stack mates teams adopt alongside Layrr, with the specific reason each pairing earns its keep.
DevoxxGenieIDEAPlugin
Free open-source JetBrains AI code assistant with agentic coding, spec-driven development and local LLM support
Ui Ux Pro Max Skill
Free open-source design-intelligence skill that feeds UI styles, palettes, fonts, and chart rules into Claude Code, Cursor, and other AI coding assistants.
Sourcegraph Cody
Sourcegraph Cody brings whole-codebase context to AI coding chat, completions, and agentic batch changes across hundreds of repos.
Layrr vs its closest rival
Layrr's closest head-to-head is with Locus Robotics.
Our Layrr vs Locus Robotics verdict written Jul 3, 2026 is more than 90 days old, so it is being re-reviewed against current data and is not shown.
Frequently asked questions
Categories
Best-of guides
For makers of Layrr
- Get a Verified Listing for Layrr ($39): a written decision within 1 working day.
- Free listing for another tool: Free reviews are decided in order, within 3 weeks of the review starting.
Used Layrr? Help shape our editorial sentiment research.