layrr

<div align="center"> <img src="assets/logo.svg" alt="Layrr Logo" width="60" height="36"> <h1>Layrr</h1> </div>

A universal visual editor that works like Elementor or Framer but on any website. Select, drag, resize, and edit UI elements visually or with natural language instructions - AI applies changes intelligently to your codebase.

https://github.com/user-attachments/assets/43edc839-419b-47be-b3f2-8e754d993a86

Description

Layrr combines visual editing with AI-powered code generation, enabling you to:

• Visual Edit Mode: Drag and resize elements with live preview, commit changes through Claude Code
• Design-to-Code Mode: Upload design images and let Claude generate production-ready components
• Text Edit Mode: Select elements and modify their text content directly in the browser
• Area Selection Mode: Select regions and give natural language instructions for changes

Built with Go, it acts as a reverse proxy between your browser and dev server, injecting a powerful editing interface and integrating seamlessly with Claude Code.

Features

Visual Editing (NEW!)

• Drag & Drop: Click and drag elements to reposition them
• Resize Handles: 8-handle resize system (corners + edges) like Figma
• Live Preview: See changes in real-time before committing
• Commit Workflow: Review and apply/discard visual changes
• Framework-Native Output: Claude intelligently updates Tailwind classes, CSS files, or inline styles
• Scroll/Resize Aware: Handles follow elements as you scroll or resize the window