22/05/2026

Art of Prototyping : mindmap editor

ever wanted to explain stuff visually ? this mindmap editor was generated in less than 10 prompts on lovable. Features

  • 2 sides mind map
  • node editing : title and description, position, automatic linking with arrow
  • content export / import
  • pdf export

tech stack :

  • React 19 + TypeScript — UI components and type safety
  • TanStack Router (file-based routing via src/routes/) + TanStack Query — routing and data layer
  • Vite — dev server and build tool
  • Tailwind CSS — utility-first styling
  • shadcn/ui (Radix primitives in src/components/ui/) — accessible component library
  • localStorage — client-side persistence of the mindmap state (no backend)
  • SVG — arrow rendering from the central circle to each item
To top