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

# 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:

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