A premium, tactile draggable notes application built with React, Vite, and Framer Motion. Canvas Notes provides an infinite-canvas style experience for jotting down your thoughts, organizing ideas spatially, and keeping your workspace clean.
- Freeform Drag & Drop: Place your notes anywhere on the screen.
- Local Storage Persistence: Your notes are automatically saved to your browser's local storage and restored on reload.
- Dark / Light Mode: Beautiful themes that adapt to your preference.
- Search & Filter: Instantly search through your notes. Non-matching notes seamlessly fade into the background.
- Snap to Grid: Keep things aligned with the built-in snap-to-grid toggle.
- Canvas Locking: Lock the canvas to prevent accidental dragging or editing.
- Fully Responsive & Accessible: Built with modern web standards and accessibility in mind.
- SEO Optimized: Dynamic metadata and structured JSON-LD out of the box.
- Framework: React 19 + Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui (Radix UI primitives)
- Animations: Framer Motion
- Icons: Lucide React
Make sure you have Node.js (version 18+ recommended) installed on your machine.
-
Clone the repository and navigate to the project directory:
cd canvas-notes -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and visit
http://localhost:5173to view the application.
To create an optimized production build:
npm run buildYou can preview the built application locally using:
npm run previewsrc/NotesApplication.jsx- Main application logic, state management, and floating navigation bar.src/components/NoteCard.jsx- Individual draggable note component.src/components/SEO.jsx- Dynamic SEO and schema markup injected into the<head>.public/- Static assets like favicons and manifests.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page if you want to contribute.
This project is licensed under the MIT License.