This project is a simple and lightweight Figma-style design tool created using only HTML, CSS, and JavaScript. The tool supports shapes, text, rotation, resizing, and positioning, making it useful for UI prototyping, wireframing, mockups, and visual layouts without requiring external frameworks or libraries.
✔ Add Shapes
✔ Add Text Blocks (Editable)
✔ Drag & Move Elements
✔ Resize via Handles
✔ Rotate Elements
✔ Layer Positioning (Front / Back)
✔ Auto Layout Counter
✔ LocalStorage Autosave
✔ Export & Import Project (JSON & HTML)
✔ Clean UI Inspired by Figma
The tool includes a built-in Dark/Light theme toggle:
- Dark Mode (default)
- Light Mode
Theme styling is controlled using CSS variables + JavaScript for instant UI switching.
Users can personalize the workspace via a simple profile overlay:
✔ Profile Image Upload
✔ Name & Profession Fields
✔ Profile Preview on Canvas Header
✔ LocalStorage Persistence
✔ Profile Click = Edit Profile
Perfect for giving the tool a personalized UX like modern editors.
No frameworks
No bundlers
No dependencies
The tool uses browser localStorage for:
- Autosave Canvas
- Login Profile Data
- Theme Preferences
This ensures data stays even after page reload.
This project can be easily hosted using GitHub Pages:
- Push repo to GitHub
- Go to: Settings → Pages
- Set branch to
mainormaster - Live instantly
Add your screenshots here
| Layer | Technology |
|---|---|
| UI | HTML + CSS |
| Logic | Vanilla JavaScript |
| Storage | LocalStorage |
| Export | JSON / HTML |
| Theme | CSS Variables |
| Profile | FileReader API |
- Group Selection Elements
- Undo / Redo System
- Multiple Page Projects
- Export to PNG / SVG
- Collaboration Mode
- Snap to Grid
- React / Vue Version
This tool is designed for:
✔ Students
✔ Designers
✔ UI/UX Learners
✔ Frontend Practice
✔ Demonstrating Browser APIs
✔ Portfolio Projects
Built as a pure frontend project with zero backend — ideal for GitHub / Portfolio showcasing.
MIT License or custom license can be added based on repo need.
Built with ❤️ using:
- HTML
- CSS
- JavaScript