Mandala Chart Creator

A web application for creating and exporting Mandala Charts - a goal-setting and planning tool that helps break down a main goal into subgoals and actionable items.

What is a Mandala Chart?

A Mandala Chart (also known as a Mandala Art or 9x9 grid) is a visual planning tool consisting of 81 cells arranged in a 9x9 grid. The grid is divided into 9 sections of 3x3 cells each:

• Center Grid: Contains your main goal in the center cell, surrounded by 8 subgoals
• Outer Grids: Each of the 8 surrounding grids expands on one subgoal, with the subgoal in the center and 8 action items around it

The subgoals in the center grid automatically sync with the centers of the corresponding outer grids.

Features

• Interactive 9x9 grid with color-coded sections
• Real-time syncing between center grid subgoals and outer grid centers
• Keyboard navigation with arrow keys
• Export to PNG (high-resolution raster image)
• Export to SVG (scalable vector format)
• Dark mode support
• Responsive design

Getting Started

Prerequisites

• Node.js 20 or later
• npm, yarn, pnpm, or bun

Installation

npm install

Development

npm run dev

Open http://localhost:3000 with your browser.

Build

npm run build

Usage

1. Click the center cell and enter your main goal
2. Fill in the 8 cells surrounding your main goal with subgoals
3. Each subgoal automatically appears in the center of its corresponding outer grid
4. Fill each outer grid with action items to achieve that subgoal
5. Use arrow keys to navigate between cells
6. Export your completed chart as PNG or SVG

Tech Stack

• Next.js 16 with App Router
• React 19
• TypeScript
• Tailwind CSS v4
• shadcn/ui components
• html-to-image for export functionality

License

MIT