Rachna — Visual Design Tool

Rachna (Hindi for "Creation") is a modern, minimal, browser-based design tool inspired by Figma. It is built for speed, featuring a "Command Palette" first workflow, a semi-translucent glassmorphism interface, and a robust multi-file local storage engine.

🚀 Tech Stack

• HTML5: Semantic structure
• CSS3: Advanced Flexbox/Grid
• Vanilla JavaScript: Core logic and DOM manipulation
• LocalStorage: To handle multi-file data storage without a backend.

Project Structure

├── assets
│   ├── fonts
│   │   ├── Gilroy-Black.ttf
│   │   ├── Gilroy-Bold.ttf
│   │   ├── Gilroy-ExtraBold.ttf
│   │   ├── Gilroy-Heavy.ttf
│   │   ├── Gilroy-Light.ttf
│   │   ├── Gilroy-Medium.ttf
│   │   ├── Gilroy-Regular.ttf
│   │   ├── Gilroy-SemiBold.ttf
│   │   ├── Gilroy-Thin.ttf
│   │   └── Gilroy-UltraLight.ttf
│   ├── images
│   │   ├── 1c.png
│   │   ├── 2c.jpg
│   │   ├── 3c.jpg
│   │   ├── 4c.jpg
│   │   ├── fifth.png
│   │   ├── first.png
│   │   ├── fourth.png
│   │   ├── second.png
│   │   ├── spotlight.webp
│   │   └── third.png
│   ├── favicon.svg
│   └── readme.txt
├── scripts
│   ├── components
│   │   ├── cta.js
│   │   ├── nav.js
│   │   └── spotlight.js
│   ├── command.js
│   ├── contextmenu.js
│   ├── dashboard.js
│   ├── dashstorage.js
│   ├── dropdown.js
│   ├── duplicate.js
│   ├── export.js
│   ├── exportjson.js
│   ├── guide.js
│   ├── localstorage.js
│   ├── pan.js
│   ├── properties.js
│   ├── script.js
│   ├── selectall.js
│   ├── selection.js
│   └── zoom.js
├── styles
│   ├── components
│   │   ├── _command.scss
│   │   ├── _dash.scss
│   │   ├── _faq.scss
│   │   ├── _font.scss
│   │   ├── _footer.scss
│   │   ├── _hero.scss
│   │   ├── _layout.scss
│   │   ├── _nav.scss
│   │   ├── _reset.scss
│   │   ├── _variables.scss
│   │   └── _workflow.scss
│   ├── app.css
│   ├── app.css.map
│   ├── app.scss
│   ├── dashboard.css
│   ├── dashboard.css.map
│   ├── dashboard.scss
│   ├── style.css
│   ├── style.css.map
│   └── style.scss
├── app.html (app/editor page)
├── dashboard.html (dashboard page)
├── index.html (home)
└── README.md

🎉 Features

🛠 Core Design

• Infinite Tools: Create Rectangles, Ellipses, Lines, Polygons (Triangles), and Stars.
• Frame Support: Organize designs within Figma-style frames that clip content.
• Keyboard Shortcuts: Our tool supports all the keyboard shortcuts which you use in other design tools.
• Image Uploads: Drag and drop or upload images to the canvas with automatic scaling.
• Smart Transformation: Multi-handle resize, rotation, and nudge support.

🔥 Power User Workflow

• Command Palette (Ctrl + K): A Raycast-style palette to perform actions instantly. Create shapes via functional commands like rectangle(400, 200) or text(Hello World).
• Keyboard Driven: Move, Pan, and Create shapes without touching the sidebar.
• Shortcut Guide (Shift + /): An interactive, minimal modal to learn the app’s workflow.

💡 Visual & UI Refinements

• Glassmorphism Dock: A semi-translucent, Apple-inspired bottom dock for tool selection.
• Minimal and Modern UI: We believe in the philosophy of "Less is More". Therefore, we have designed our tool in this way to keep thing simple.

📂 Multi-File Management

• LocalStorage: Auto-saves your work using a debounced logic to prevent performance lag.
• Dashboard: A project-level view to manage multiple design files.
• Z-Index & Layers: A functional layers panel with visibility toggles (Eye), Locking, and drag-to-reorder functionality.

⌨️ Keyboard Shortcuts

Shortcut	Action
V / M	Move Tool
H	Hand Tool (Pan)
Space + Drag	Temporary Pan
F	Frame Tool
R	Rectangle Tool
O / E	Ellipse Tool
L	Line Tool
P	Polygon Tool
S	Star Tool
Ctrl + K	Open Command Palette
Ctrl + D	Duplicate Selected
Alt + Drag	Quick Duplicate
Ctrl + A	Select All
Del / Backspace	Delete Selected
Shift + /	Shortcut Guide
Arrows	Nudge 1px (Shift for 10px)

🚀 The Command Palette

The "Actions" bar in the right sidebar allows you to execute complex design tasks via string commands:

• rect(500, 300) — Spawns a 500x300 rectangle in the center.
• text(Rachna UI) — Spawns a text element with specific content.
• star(200) — Spawns a 200px star.

⚙️ Installation

1. Clone the repository:

   git clone https://github.com/bodhniraj/rachna.git

2. Open index.html in your browser.
3. Create a new file and start designing!

---

🗺 Roadmap

• Version 2.0: Grouping (Ctrl + G) Elements Together.
• Version 2.5: Implementing Snap Feature.
• Version 3.0: Include ProtoType Mockups.

---

👨‍💻 Author

Niraj Kumar Portfolio

"Visual design that 💡 turns ideas into 📝 real world 💻 interfaces"