Documentation

Everything you need to get started with Layrr

Quick Start

Get Layrr up and running in minutes

Installation

Install Layrr with a single command:

curl -fsSL https://layrr.dev/install.sh | bash

Alternatively, clone the repository and run make install to place the binary at /usr/local/bin/layrr.

Requirements

Operating System

macOS (Intel or Apple Silicon)

Go Version

Go 1.21 or later

Claude Code CLI

Must be installed

Dev Server

Running development server

Usage

  1. 1

    Start your development server

    Make sure your local dev server is running (e.g., npm run dev, vite, next dev)

  2. 2

    Run Layrr in the same terminal

    Launch Layrr in the directory where your code runs

    layrr
  3. 3

    Browser opens automatically

    Layrr automatically opens your default browser with visual editing enabled

  4. 4

    Start designing

    Click, drag, and edit. Every change updates your code automatically

Operating Modes

Four powerful ways to work with your code

Visual Mode

Select elements and manipulate position and size with immediate visual feedback. Features include:

  • Drag-and-drop repositioning with live preview
  • Eight-point resize handles (corners and edges)
  • Non-destructive change tracking before commitment
  • Framework-native output (Tailwind, CSS, inline styles)

Design Mode

Upload design mockups from Figma, Sketch, or any design tool and let Claude generate production-ready components. Features include:

  • Image-to-component generation
  • Automatic framework detection (React/Vue/Svelte)
  • Real-time streaming of Claude's analysis
  • Clean, maintainable code output

Text Mode

Click any text element to edit it directly in the browser. Perfect for quick content updates without hunting through files.

  • Direct inline text editing
  • No file hunting required
  • Instant code updates

Area Selection Mode

Drag rectangular selections around any part of your interface and describe what you want in plain English. Claude handles the rest.

  • Natural language instruction processing
  • AI-powered interface generation
  • Context-aware modifications

How It Works

Understanding Layrr's architecture

Reverse Proxy Architecture

Layrr operates as a reverse proxy that intercepts your development server requests. It injects browser-side scripts and maintains WebSocket communication channels for real-time updates.

File Watching & Auto-Reload

Built-in file watching triggers automatic browser reloads upon code modifications, ensuring you always see the latest changes instantly.

Claude Code Integration

Claude Code CLI processes all changes via streaming JSON output, providing intelligent code modifications that respect your framework and styling conventions.

Terminal UI

Built with the Bubble Tea framework, Layrr provides a modern terminal interface with support for multiple development servers and real-time status updates.

Open Source

Free forever, licensed under AGPLv3

AGPLv3 License

Layrr is licensed under the GNU Affero General Public License v3.0. This means you can use, modify, and distribute Layrr freely, as long as you:

  • Disclose source code for server deployments
  • Maintain the same AGPLv3 license for derivative works
  • State changes made to the original code

Ready to Get Started?

Join developers who are building faster with Layrr

Get Started Free View on GitHub