Layrr by Narnia

Layrr by Narnia is a command-line tool designed to transform the browser into a visual code editor for local web applications. It addresses the challenge developers face when a visual bug or needed tweak is apparent in the browser, but the relevant source file and code context are not immediately obvious. Layrr streamlines the process by allowing users to select elements directly within the running web app, describe the desired change in plain English, and have an AI coding agent update the corresponding source files in the project repository.

The tool works by sitting between the browser and the development server, injecting an overlay that enables element selection. Users can click on a single element or use Shift+click to select multiple elements; Layrr then maps these selections back to the source code using framework metadata and file search. This mapping provides the AI agent with precise context, reducing the need for developers to manually locate files or explain the page structure from memory. js, Astro, and any HTML-based application, as Layrr operates via a proxy to integrate with existing development environments.

Layrr is installed globally via npm and works with the developer's local dev server, providing access through the browser at a specified local address. It supports integration with various AI coding agents, such as Claude, Code, Codex, CLI, and Gemini via Pi. The tool also manages edit history by committing successful changes with a [layrr] prefix, allowing users to preview, inspect, and revert edits as needed. Additionally, Layrr snapshots the repository before running the agent and avoids staging files that were already dirty, helping maintain codebase integrity.

This solution is aimed at developers working on local web applications who want a more visual and efficient way to apply source code changes with AI assistance, without being locked into a specific IDE or disrupting their existing workflow.