# Draply 🎯

> Visual overlay for any frontend project.
> Move, resize, recolor, and restyle your **live dev site** — save changes to CSS automatically.

No config. No setup. Works with any framework.

---

## Install & Run

```bash
# 1. Start your dev server as usual
npm run dev          # Next.js, Vite, CRA, Nuxt...

# 2. In a new terminal, run Draply
npx draply 5173      # ← port of your dev server

# 3. Open the Draply URL (NOT your dev server URL)
#    → http://localhost:4000
```

**Custom ports:**
```bash
npx draply 3000        # your app on 3000, draply on 4000
npx draply 8080 9000   # your app on 8080, draply on 9000
```

---

## How it works

```
Your app (port 5173)
       ↓
Draply proxy (port 4000)
  • Intercepts HTML responses
  • Injects visual overlay into every page
  • Forwards everything else unchanged
       ↓
Browser shows YOUR site + green button in corner
       ↓
Click button → sidebar opens → pick a tool → edit
       ↓
Save → writes draply.css + auto-imports it into your project
```

### Auto-detection

On first save, Draply **auto-detects your framework** and adds the CSS import:

| Framework | File modified |
|-----------|--------------|
| Next.js (App Router) | `app/layout.tsx` |
| Next.js (Pages) | `pages/_app.tsx` |
| Nuxt | `nuxt.config.ts` |
| Vue (Vite) | `src/main.ts` |
| React (Vite) | `src/main.tsx` |
| CRA | `public/index.html` |
| Plain HTML | `index.html` |

No manual setup needed — changes persist even without Draply running.

---

## Tools

| Tool | What it does |
|------|-------------|
| 🖱️ Select | Click any element to highlight it |
| ✦ Move | Drag elements to any pixel position |
| 🔍 Inspect | Hover to see dimensions + CSS info |
| 📐 Resize | 8 corner/edge handles to resize any element |
| 🎨 Colors | Change background, text color, border color |
| 📝 Typography | Font size, weight, line-height, letter-spacing |
| 🖼️ Assets | Upload PNG/SVG/JPG → place on page → control z-index |

---

## Keyboard shortcuts

| Key | Action |
|-----|--------|
| `Esc` | Cancel placing asset / deselect |
| `Arrow keys` | Nudge selected element 1px |
| `Shift + Arrow` | Nudge 10px |
| `Delete` | Remove selected placed asset |

---

## Works with

- ✅ React / Next.js / Vite
- ✅ Vue / Nuxt
- ✅ Svelte / Astro
- ✅ Vanilla HTML/CSS
- ✅ Any framework that serves HTML on localhost

---

## Requirements

- Node.js 16+
- Your dev server must be running before starting Draply

---

## License

MIT