MockUpDesign

VS Code–style studio to mock UI on live sites for design reviews — PMs, UX, frontend, QA. Local-only exports.

## MockUpDesign **MockUpDesign** lets you create UI mockups directly on any live webpage without modifying the actual source code or application. It's ideal for Business Analysts, UX/UI Designers, Product Managers, QA Engineers, and Developers to review designs, communicate ideas, and produce documentation efficiently. Simply enable **Design Mode**, select any element on the page, and edit it in place. Change text, insert controls or labels, drag and drop elements, modify CSS, work with tables, and undo or redo changes. When finished, export your work as images or documentation for sharing. ### Key Features * **Design Mode** for virtually any website (local HTML files require enabling **"Allow access to file URLs"**) * Brand-new **Studio** interface inspired by VS Code, featuring Menu, Activity Bar, Sidebar, Canvas, and Inspector * Powerful editing toolbar: * Edit Properties and CSS * Insert Controls, Labels, and Tables * Copy/Paste Styles * Align, Arrange, Hide, and Delete elements * **Design** and **Review** modes for seamless switching between editing and reviewing changes * **Undo / Redo** * Save and restore editing sessions * Generate a **Review Pack (ZIP)** containing Session, Notes, Markdown, HTML, PNG, and PDF files, and reopen it later for continued review * Export as: * Static HTML * PNG * Full-page PNG * Multi-page PDF * Keyboard shortcut: * **Ctrl + Shift + D** (Windows/Linux) * **Cmd + Shift + D** (macOS) ### Privacy * No Analytics * No Telemetry * No Backend or cloud services * Your data never leaves your computer—all files are processed and stored locally * Scripts are injected only when you explicitly launch the extension or use the keyboard shortcut ### Notes * Designed for UI mockups, design reviews, and documentation—not for modifying production websites. * On Single Page Applications (React, Angular, Vue, etc.), changes may be lost when the page re-renders. * Does not work on protected browser pages such as `chrome://`, `edge://`, the Chrome Web Store, and other restricted pages. ### What's New in Version 1.4.0 Version **1.4.0** is a major upgrade over **1.3.2**, introducing a significantly improved editing and review experience. * Completely redesigned Studio interface inspired by VS Code * New **Design** and **Review** modes for cleaner editing and more effective change reviews * **Review Pack** support for packaging, sharing, archiving, and reopening complete review sessions * Expanded export options: HTML, PNG, Full-page PNG, and Multi-page PDF * Session save and restore * Improved export performance, overlays, menus, and overall user experience * Continues to operate **100% locally**, with no data uploaded to any server or third-party service