Harada Matrix Tool

AI-powered goal planning that transforms one vision into 64 actionable steps using the proven Harada Method

Zero-Backend Claude AI / GPT-4 Single HTML File PDF Export

Actions Generated

Strategic Domains

Backend Required

HTML File

Live Interactive Tool

? What Is It?

▼

The Harada Matrix Tool implements the Harada Method, a goal-achievement framework developed by Japanese educator Takashi Harada. Used by Olympic athletes, Fortune 500 companies, and high performers worldwide, the method breaks down one ambitious goal into 8 supporting factors, then expands each factor into 8 concrete actions—creating a comprehensive 64-step roadmap.

AI-Powered Generation

Enter your goal and optional context. Claude or GPT-4 analyzes your objective and generates all 64 actions with specific steps, resources, and cost estimates.

Interactive Tracking

Click any cell to expand details. Check off completed steps, add personal notes, and track progress. All data persists in your browser.

PDF Export

Generate a visual PDF showing your complete 9x9 matrix grid, all action details, checkboxes for steps, and your personal notes.

</> Technical Architecture

▼

Built as a zero-backend single-page application. All AI calls happen directly from the browser to the API provider, eliminating server costs and latency.

+
Direct Browser-to-API Calls: Uses anthropic-dangerous-direct-browser-access header for Claude API. No proxy server needed.
+
Dual Provider Support: Anthropic Claude (claude-sonnet-4-20250514) or OpenAI GPT-4. Users provide their own API keys.
+
Robust JSON Parsing: Strips markdown code blocks, repairs truncated responses, handles brace mismatches.
+
Pipe-Delimited Format: Uses | separators instead of newlines for reliable LLM output parsing.
+
localStorage Persistence: API keys, goal, matrix data, notes, and step completion all persist across sessions.
+
html2pdf.js Export: Flexbox-based grid rendering (CSS Grid doesn't render in html2pdf). Includes visual matrix + all notes.

// Cell data structure cells[i] = { element: HTMLDivElement, value: "Action title", details: "STEPS: 1) x 2) y | FIND: query | COST: $X", notes: { step_0_done: true, step_0_note: "Completed Jan 15" } }

! Engineering Challenges Solved

▼

JSON Parsing Failures

Problem: LLMs wrap JSON in markdown code blocks.
Solution: Regex stripping of ```json markers before parsing.

Response Truncation

Problem: 64 detailed actions exceed token limits.
Solution: 16,000 max_tokens + pipe-delimited compact format.

Contact Hallucination

Problem: LLMs generate fake phone numbers/emails.
Solution: Search query format with [VERIFY] flags instead of fake data.

PDF Grid Rendering

Problem: html2pdf.js doesn't support CSS Grid.
Solution: Flexbox rows with fixed-width cells for reliable rendering.

iOS Input Zoom

Problem: Inputs <16px trigger auto-zoom on iOS.
Solution: 16px minimum font-size on all mobile inputs.

Matrix Overflow

Problem: 9x9 grid overflows on mobile.
Solution: Sticky matrix with separate scrollable content sections.

→ How to Use

▼

1
Add API Key: Select Anthropic or OpenAI, paste your API key. Keys are stored locally in your browser only.
2
Enter Your Goal: Type your main objective. Add optional context (timeline, budget, constraints) for better results.
3
Generate Matrix: Click Generate. AI creates 8 supporting factors and 64 specific actions with steps, resources, and costs.
4
Track Progress: Click any cell to see full details. Check off steps as you complete them. Add personal notes.
5
Export PDF: Download your complete matrix as a visual PDF with all actions, steps, and notes included.

* Technology Stack

▼

Frontend

Vanilla HTML/CSS/JavaScript. No frameworks, no build step. Single file deployment.

AI Integration

Anthropic Claude API (claude-sonnet-4-20250514) and OpenAI API (gpt-4) via direct browser fetch.

PDF Generation

html2pdf.js library. Client-side rendering with flexbox grid layout.

Storage

Browser localStorage. No database, no user accounts, complete privacy.

Hosting

Vercel static deployment. Zero server costs, global CDN distribution.

Responsive Design

CSS clamp(), flexbox, media queries. Works on mobile, tablet, and desktop.

$ Why Zero-Backend?

▼

+
Zero Server Costs: No API proxy, no database, no compute. Static hosting only (~$0/month).
+
User Privacy: API keys never touch a server. Data stays in the user's browser.
+
Instant Deploy: Single HTML file. Push to any static host (Vercel, Netlify, GitHub Pages).
+
No Auth Complexity: No user accounts to manage, no sessions, no password resets.
+
Offline Capable: Once loaded, works without internet (except for AI generation).