Layr

Layr is a lightweight, DOM-based design tool inspired by Figma, featuring an Excalidraw-like UI. Built entirely with HTML, CSS, and Vanilla JavaScript, it offers a fast and intuitive environment for creating UI designs and wireframes directly in the browser.

📸 Screenshot

🚀 Features

• Elements: Create Rectangles, Ellipses, Lines, Text, Images, and Frames.

• Tool Selection:

  • Keyboard Shortcuts: Press keys (R, E, T, etc.) to select a tool, then click on the canvas to place it at the cursor position.
  • Toolbar: Click a tool icon to immediately create the element at the default position.

• Selection & Manipulation:

  • Click to select with a clear selection indicator.
  • Drag, resize, and rotate elements with ease.
  • Copy & Paste support (Ctrl+C / Ctrl+V) for all elements.

• Layers Panel:

  • Search layers to quickly find elements.
  • Rename layers using the edit button.
  • Drag-and-drop reordering (supports nesting).
  • Lock and Hide/Show controls.

• Properties Panel:

  • Geometry: Precise control over X, Y, Width, Height, Rotation, and Border Radius (limited to 2 decimal places).
  • Style: Adjust Fill Color, Opacity, and Borders.
  • Text: Edit content, font size, alignment, color, and Text Wrap settings.
  • Font Styles: Toggle Bold, Italic, and Underline.
  • Image: URL import with Object Fit (Cover, Contain, Fill) and Position controls.
  • Frames: "Clip Content" toggle for masking children.

• Canvas Controls:

  • Zoom-to-cursor, infinite panning, and Zoom Shortcuts (+/-).
  • Re-center Canvas to reset view (Shortcut: C).
  • "Clear Canvas" automatically resets the viewport.

• UI Controls:

  • Hide/Show UI toggle for distraction-free design (Shortcut: H).
  • Full Screen mode (Shortcut: Shift+F).

• Advanced Features:

  • Frame Nesting: Drop elements into frames; moving a frame moves its children.
  • Recursive Delete: Deleting a frame automatically removes its children.

• Persistence: Auto-saves to localStorage so you never lose work.

• Export:

  • JSON: Save your project state.
  • HTML: Export your design as clean, absolute-positioned HTML/CSS.

• Info & Help System:

  • Floating Info Button in the bottom-right corner.
  • Tabbed Modal containing About, Features, Shortcuts, and Tool Usage guides.
  • Dark UI design with responsive layout and smooth transitions.

⌨ Keyboard Shortcuts

Action	Shortcut
Copy	Ctrl + C (or Cmd + C)
Paste	Ctrl + V (or Cmd + V)
Undo	Ctrl + Z (or Cmd + Z)
Redo	Ctrl + Y (or Cmd + Shift + Z)
Delete Element	Delete or Backspace
Move Selection	Arrow Keys (1px)
Move Faster	Shift + Arrow Keys (10px)
Pan Canvas	Middle Mouse Button + Drag
Zoom	Ctrl + Scroll Wheel
Zoom In	+
Zoom Out	-
Re-center Canvas	C
Full Screen	Shift + F
Toggle UI	H
Deselect	Escape
Select Tool	V
Rectangle Tool	R
Ellipse Tool	E
Line Tool	L
Text Tool	T
Frame Tool	F
Image Tool	I

🛠 Tech Stack

• HTML5
• CSS3 (Variables, Flexbox, Grid)
• Vanilla JavaScript (ES6+)
• No external frameworks or libraries.

🖥 Compatibility

Desktop Only: Layr is designed exclusively for desktop environments. To ensure the best user experience, a warning overlay is displayed on devices with screen widths smaller than 1024px, prompting users to switch to a larger display.

💾 Data Persistence

The application automatically saves your canvas state to your browser's LocalStorage on every change (move, resize, property edit, etc.). Reloading the page will restore your design exactly as you left it.

📤 Export Options

• JSON Export: Downloads a .json file containing the full state of your elements (properties, hierarchy, styles).
• HTML Export: Generates a self-contained .html file representing your design using standard HTML elements and CSS.

License

This project is under the MIT License.