📦 ThoughtPath Editor “Turn Thoughts Into Design.”
A minimal, premium, Figma-inspired visual editor built with pure HTML, CSS, and JavaScript, no frameworks.
🚀 Overview
ThoughtPath Editor is a fully interactive, modular design tool created from scratch using vanilla web technologies. It transforms free-flowing ideas into structured visual layouts through a clean interface, precise controls, and a polished dark UI theme.
This project replicates the core functionalities of design tools like Figma, Framer, and Linear, but built entirely with hand-crafted DOM manipulation and modular JavaScript architecture.
🎯 Features
🔹 1. Canvas + Element Creation
Add rectangles
Add text boxes
Auto-assigned unique IDs
Default size & positioning
State-managed element storage
🔹 2. Selection System
Click to select
Click outside to deselect
Selection outline
Resize handles
Rotation handle
🔹 3. Dragging
Smooth drag using mouse events
Boundary enforcement (element stays inside canvas)
🔹 4. Resizing
Corner-based resizing
Min-size constraints
Live update to state
🔹 5. Rotation
Rotatable via rotation handle
CSS transform + saved rotation degrees
🔹 6. Properties Panel
Width, height, x, y
Color picker
Text editing
🔹 7. Layers Panel
Full layer list
Click to select
Move up/down (z-index)
State-synced ordering
🔹 8. Keyboard Shortcuts
Delete → remove element
Arrow keys → move element
Shift + Arrow → precise nudge
🔹 9. Save & Load
Save project to localStorage
Reload project on startup
🔹 10. Export
Export full JSON
🧩 Tech Stack
HTML
CSS (Custom Variables, Layout, Components)
JavaScript (DOM API, ES Modules)
LocalStorage API
No frameworks
No external libraries
"🔥 Brand Identity Name: ThoughtPath Editor" Meaning:
A curved path transforming into a square →
raw thoughts evolving into structured design.
Logo Style:
Ultra-minimal geometric symbol suitable for dark and light modes.
"🧠 What I Learned
JavaScript DOM architecture for complex UI
State management without frameworks
Modular ES Module imports/exports
Deep CSS theming & dark-mode design
Event-driven interaction (drag, resize, rotation)
Layering, z-index, and element depth
Persisting and reloading app state
Building a micro “design tool” from scratch"
❤️ Credits Designed & developed by Piyush with some help of AI for understanding core features and implementation & make mobile responsive with the help of Chatgpt, with guidance from modern product UI/UX principles, modular architecture standards, and minimal aesthetic inspiration from world-class design tools.