Layrr

Layrr is for the moment when you can see the UI problem in the browser, but explaining it through filenames and line numbers is slower than pointing at it.

Run Layrr beside your local dev server, open the proxied app, select the part of the interface you want to change, and send that context to Claude Code, Codex CLI, or Gemini via Pi. The project stays in your repository; Layrr is the browser-side editing layer.

I need to change one visible element

Use visual editing when the problem is spatial:

• a button is too small
• a card needs more breathing room
• an image should be wider
• a piece of UI is visually misaligned

Select the element in the browser, drag or resize it, preview the change, then apply it so the codebase is updated.

I need to fix copy without hunting through files

Use text editing when the problem is content:

• a heading needs a different phrase
• button text is wrong
• a paragraph needs to be shorter
• placeholder copy should become production copy

Click the text in the browser, edit it inline, and apply the update. This is most useful when the same words may be buried inside components, route files, or data objects.

I need to change a whole section

Use area selection when the problem is not tied to one DOM element:

• make this hero section feel denser
• turn this row into a responsive grid
• simplify this pricing block
• make this empty state match the rest of the page

Draw a rectangle around the region, describe the outcome, and let the coding agent inspect the selected UI in context.

I need to match a mockup

Use design-to-code when you have a target image:

• a screenshot from another iteration
• a Figma export
• a rough mockup
• a visual reference for a component

Upload the image with a short instruction. Layrr gives the agent both the visual target and the current app context, so it can update the existing code instead of generating an isolated snippet.

How Layrr fits into your dev loop

Layrr sits between your browser and your app:

• your app keeps running on its normal dev-server port
• Layrr starts a local proxy, usually on http://localhost:4567
• the proxy forwards app traffic and injects the browser editing layer
• the browser sends selections, edits, screenshots, and instructions back to Layrr
• the agent updates files in the project directory
• your dev server reloads so you can inspect the result

By default, the proxied app opens at http://localhost:4567.

What ships in the repo

• src/cli.ts - CLI entry point, argument parsing, agent setup, and git snapshot flow.
• src/server/ - proxy, WebSocket handling, edit queue, and version metadata.
• src/agents/ - Claude Code, Codex CLI, and Gemini/Pi agent adapters.
• src/editor/ - source mapping from selected browser elements back to code.
• overlay/ - browser overlay, element selection, history, source display, and styles.
• scripts/build.ts - package build script for the npm distribution.

Next steps

• Start with Quickstart.
• Install from npmjs.com/package/layrr.
• Review the source at github.com/narnia-sh/layrr.