Pluto - Minimalist Brainstorming Tool

A web-based canvas for brainstorming with draggable cards, connections, and media support, designed for distraction-free ideation.

[Project Name] Showcase

Project Overview

Pluto v3.1 is a minimalist, web-based brainstorming tool designed to help users visualize and organize their ideas in a flexible, distraction-free environment. Inspired by the need for a simple yet powerful platform to capture and connect thoughts, Pluto offers an infinite canvas where users can create, move, and resize cards, link them with lines, and attach images or audio for richer context. Built with vanilla JavaScript, it leverages Interact.js for drag-and-drop functionality and Font Awesome for icons, ensuring a lightweight and responsive experience. Features like auto-saving to local storage, JSON export/import, and a dark/light theme toggle make it practical for both quick ideation sessions and long-term projects. The goal is to provide a clean, intuitive tool that sparks creativity without overwhelming users, all within a sleek, planet-inspired design.

Key Features & Solutions

  • Infinite Canvas with Cards: Create, drag, and resize cards on an infinite canvas using Interact.js. Pan and zoom effortlessly to organize ideas, with a grid toggle for alignment. Cards support text editing with formatting options (bold, italic, font size, color).
  • Card Connections: Link cards with dynamic lines to visualize relationships between ideas. Delete connections with a dedicated mode, ensuring a clutter-free workspace.
  • Media Support: Drag-and-drop images or audio files onto cards to enrich brainstorming with visual or auditory context. Media is embedded and saved within the board state.
  • Persistence & Portability: Auto-saves board state to local storage for seamless continuity. Export boards as JSON files or import them to restore previous sessions, making it easy to share or back up ideas.

Project Details

  • My Role:Maker/Owner
  • Duration:2025 APR
  • Tools Used:Gemini,vscode

Technology Stack

#Interact.js#Brainstorming