Tapissier Visual Web Editor (Progress ~3%) 🪚🔨

Tapissier is an early-stage, lightweight visual (drag & drop / WYSIWYG-like) web editor focused on rapid prototyping with plain HTML / CSS / Vanilla JS. The goal is to incrementally add inspection, diagnostics, live editing, and later collaborative + AI-assisted features.

Note: Original README was in Traditional Chinese; this is the English translation. Chinese content has been replaced for now—feel free to open an issue if you want a bilingual version.

✨ Current Core Features

• Dynamic element insertion inside an iframe: div / button / heading tags (h1–h6 prototype)
• Drag-and-drop element creation with auto-incrementing IDs (type-aware prefixes)
• Visual hover highlight + basic element info inspector panel (prototype)
• Resizable workspace iframe (drag right/bottom edges) + middle-click panning of the whole workspace
• Overlay guides shown during element creation for positioning feedback

🛠️ In Progress / Near-Term Tasks

1. Fix: cleanup when dropping outside the iframe (unhandled dragleave/drop)
2. Refactor element factory: unify createDiv / createButton / createHeading
3. Freeform repositioning / dragging of already created elements
4. Project save & load (API + front-end UI)
5. Inspector editing: allow modifying ID & inline styles
6. DOM tree visualization & navigation

🔭 Planned Roadmap

• Backend refactor to Rust (Actix-web)
• Framework component support: React / Vue / Svelte, etc.
• Template system & reusable snippet management
• AI assistance: natural language to DOM / style adjustments
• Real-time multi-user collaboration (enhanced WebSocket sync)
• Version snapshots & diff comparison

⚠️ Known Issues / Bugs

• Dropped element outside iframe doesn't properly clear listeners (scheduled fix)
• Rapid hover events can leave extra console.log noise (will be cleaned)
• Inspector currently read-only

🚀 Quick Start

pip install -r requirements.txt
python servertest.py  # Server default: http://127.0.0.1:5000

Open your browser at / (root) to enter the workspace.

📂 Project Structure Overview

servertest.py        # Flask + Socket.IO main app
templates/          # Workspace + test pages
static/             # JS / CSS / initialization modules / overlay, etc.
  html- create-tool # Scripts for creating HTML elements (to be unified)
  iframe_initialize # Listeners / hover / inspector prototype
  overlay_operate   # Overlay show/hide logic
  iframe_resizer    # Size / position adjustments

🧪 Development Guidelines

• Keep new features modular; avoid duplicating logic (ID generation / style config centralization)
• Planned: add tests + type annotations (TypeScript layer or JSDoc)
• Convert ad-hoc console output into a toggleable debug flag later

🤝 Contributing

Very early exploratory phase—issues, suggestions, and workflow feedback are highly welcome to help shape something genuinely useful.

📜 License

Not yet finalized (WIP).

English Summary

Tapissier is an early-stage visual web editor for raw HTML/CSS/JS prototyping: drag-create elements, resize iframe workspace, highlight & inspect nodes, and evolve toward editing, saving, snapshots, framework integration, and AI assistance.

---

Last Updated: 2025-09-13