Page Playground

About

Visually edit any web page in real time. Drag to swap elements, adjust size/padding/margin, change colors, and edit text instantly.

## Detailed Description

Page Playground turns any web page into a live UI playground.

Enable edit mode and start experimenting — no code needed.

WHAT YOU CAN DO:

- Drag & Drop Swap: Drag any element onto another to swap their positions instantly
- Size & Spacing: Click an element to open the property panel and adjust width, height, padding, and margin in real time
- Colors: Change text color and background color with a color picker or hex input
- Text Editing: Edit text content directly from the property panel
- Undo & Reset: Undo changes one by one, or reset everything at once

HOW IT WORKS:

1. Click the Page Playground icon in your toolbar
2. Toggle "Edit Mode" on
3. Hover over elements to see their selector and size
4. Click an element to open the property panel
5. Drag elements to swap positions
6. Use Undo or Reset All when needed

PERFECT FOR:

- UI/UX designers prototyping layout changes
- Developers fine-tuning spacing and colors before writing code
- Anyone who wants to experiment with web page layouts
- Teams collaborating on design decisions — try it, screenshot it, share it

WORKS WITH AI CODING TOOLS:

The tooltip shows each element's HTML selector and exact pixel dimensions. Copy this information directly into AI coding tools like Claude Code or Cursor for precise instructions:
"Change nav.top-bar height from 48px to 64px"
"Set this card's padding-top to 24px"
"Change button background to #3b82f6"

PRIVACY:

- No data collection — zero network requests
- All edits are temporary and local only
- Changes disappear on page refresh
- No accounts, no tracking, no analytics
- Full privacy policy: [URL]

## Category
Developer Tools

## Language
English