Information Product Canvas

Gather Information Product requirements using the Information Product Canvas pattern template. Define business questions, outcomes, personas, delivery types, core business events, feature stories, will/wont's and vision for each Information Product.

An AgileDataGuides Pattern Template app.

What It Does

The Information Product Canvas is a visual requirements tool for Information Products. Each canvas captures everything needed to design and deliver an Information Product:

Try It Online

Launch the Live Demo — no install required. The demo runs entirely in your browser. Your data is saved in localStorage and never leaves your device.

The demo includes the SaaS Revenue Metrics example canvas so you can explore the app straight away.

Install and Run Locally

For full functionality including file-based storage and Claude Code integration, run it locally.

Run ./start-IPC.sh from the terminal.

The app starts at http://localhost:5115.

Requires: Node.js (v18+).

Features

• Multiple canvases — create, switch between, and delete IPC models
• Inline editing — click any card to select; double-click to rename
• Auto-save — changes persist to browser localStorage
• Export JSON — download the canvas to share or re-import
• Import JSON — load a previously exported canvas
• Export PPTX — generate a PowerPoint slide per Information Product
• Save to disk — writes JSON to data/ for direct access by Claude or other tools

Works With Claude

Export your canvas as JSON and use it with Claude Code or Claude Chat:

• "Who is this product built for?"
• "Do my business questions align with what my personas actually need?"
• "Draft a concept model based on my canvas"
• "Suggest metrics and their definitions for this product"
• "This feels too big — suggest a way to break it into smaller IPCs"

Data Storage

Local mode (running on your machine): Save writes canvas files to the data/ folder as JSON. This only works in dev mode (pnpm dev) where the server can write to disk. Claude Code can then read these files directly.

Demo mode (live demo at GitHub Pages): All data is stored in your browser's localStorage. Nothing is sent to any server. Your canvases persist between visits but are private to your browser.

Export downloads files to your browser's downloads folder for sharing or backup.

Import loads a previously exported JSON file — works in both local and demo modes.

Security

Local mode: This app is designed to run locally on your own machine. Do not expose it to the internet or deploy it on a public server. The Save feature writes files directly to your filesystem. There is no user authentication, so anyone who can reach the server can read and overwrite your data.

Demo mode: The live demo is a static site with no server or backend. All data stays in your browser's localStorage and never leaves your device. There is nothing to attack — no API, no database, no file system access.

If you need to share your work, use the Export buttons to download files and share them manually.

Tech Stack

• SvelteKit 5 with Svelte 5 runes
• Tailwind CSS 4
• TypeScript

Learn More

Learn how to fill out your first canvas in 30 minutes.

Get the full guide — An Agile Data Guide to Information Product Canvas — as an ePub for just $12. Use code parsecs at checkout, or click here to get the discount applied automatically.

While you can use the Information Product Canvas app on its own, the full guide walks you through every canvas area with real-world examples, proven patterns, and tips from 10+ years of coaching data teams.

You can also explore free articles on each canvas area on the Companion Information Product Substack.

Licensing

• Code: MIT
• Documentation: CC BY-SA 4.0