matrix.js

Structuring Human & AI Thinking Across Two Coordinates.

4×3, 2×2, 3×3. A zero-dependency JavaScript layout engine to render multidimensional thinking matrices cleanly on the modern web.

Download matrix.js download Download matrix.css palette Live Showcase grid_view
Motivation

Why We Think
Across Two Coordinates.

The web has plenty of data tables and numerical charts. But tables merely list rows and columns, while charts visualize quantities.

Whenever humans or generative AIs make qualitative breakthroughs or formulate strategic decisions, they map thoughts onto an orthogonal two-coordinate plane: Urgency × Importance, Customer Segment × Channel, or Domain × Approach. It is within the intersection cells that creative leaps occur.

Yet building a resilient 2D matrix on the web has historically required frustrating manual labor: aligning the origin corner tile, dealing with mobile viewport collapse, and tuning card typography.

matrix.js extracts the distilled matrix design system crafted over years within Project Kamos into a standalone, zero-dependency JavaScript engine. Feed it structured JSON from LLMs or hand-crafted schemas, and it renders a tactile, production-ready matrix naturally.

Interactive Showcase

Experience Live Matrices

Switch presets to inspect different dimensions, toggle light/dark modes, and copy clean Markdown tables to your clipboard.

Theme:
Features

Eight Core Features of matrix.js

Not just a raw HTML table, but an intentional architectural space designed for thinking.

01 / Grid Engine

Arbitrary N × M Grid

Supports square 2×2 and 3×3, as well as non-square 4×3 or 5×4 grids. Layout dynamically adapts based on array lengths.

Dynamic Columns • Auto Dimensions
02 / Origin Tile

Intuitive Origin Tile

Gracefully positions the top-left intersection tile (Y × X). Users immediately grasp which axis represents columns vs rows.

Y × X Coordinates
03 / Card Cells

Tactile Card Cells

Constructed as cards that hold thought rather than flat tables. Clear hierarchy of titles, questions, and content.

Clean Hierarchy • Structured
04 / Zero Dependency

Pure Scoped CSS

No external CSS framework dependencies. A lightweight CSS file that can be customized freely to suit your needs.

Scoped CSS (.mx-) • ~15KB
05 / Markdown Inside

Native Markdown Parser

Renders bold, italic, inline code, and bullet lists seamlessly without requiring heavy third-party markdown libraries.

Native Markdown • List Support
06 / Responsive

Resilient Mobile Scroll

Never collapses cards on mobile viewports. Enforces optimal golden-ratio minimum widths with frictionless horizontal scrolling.

Touch Smooth • Mobile Ready
07 / AI Ready

LLM / JSON Direct

Directly ingest structured JSON payloads from Gemini or GPT. Ideal view layer for generative AI apps and automated strategy tools.

Structured Schema • JSON Direct
08 / Export

One-Click Markdown Export

Copies GitHub / Notion-ready markdown tables straight to the clipboard with non-blocking toast notifications.

Clipboard Sync • Markdown Table
How to Use

Quick Start Guide

Introduce structured thinking matrices to your HTML in 3 simple steps.

STEP 01

Import Files

Place downloaded matrix.css and matrix.js in your project and link them in HTML.

STEP 02

Prepare Container

Create a target container element (e.g. <div id="my-matrix"></div>) in your markup.

STEP 03

Initialize Instance

Pass your JSON data containing axes and cell definitions to instantiate a clean 2D matrix naturally.

1. Linking Files Zero Dependencies (~15KB) 
<!-- 1. Include CSS in <head> -->
<link rel="stylesheet" href="./css/matrix.css">

<!-- 2. Include JS at the end of <body> -->
<script src="./js/matrix.js"></script>
2. Initializing 4×3 Strategy Matrix app.js 
const matrix = new Matrix('#my-matrix', {
  title: 'Product GTM Strategy (4 × 3)',
  
  // Horizontal Axis (3 columns)
  xAxis: {
    label: 'Channel',
    items: ['Web / App', 'In-Store', 'Community']
  },

  // Vertical Axis (4 rows)
  yAxis: {
    label: 'Customer Segment',
    items: ['Acquisition', 'Light Users', 'Loyalists', 'Enterprise']
  },

  // Cell Payloads (Markdown supported)
  cells: [
    { 
      row: 0, 
      col: 0, 
      title: 'SEO & Interactive Tools', 
      question: 'How to spark the first touch?',
      content: '**High Impact**\n- Search-optimized landing pages\n- Frictionless try-before-signup' 
    },
    { 
      row: 0, 
      col: 1, 
      title: 'Weekend Pop-up Showcases', 
      question: 'Bringing physicality to life',
      content: 'Short-term urban pop-ups for tactile brand immersion' 
    }
  ],

  theme: 'auto', // 'auto' | 'light' | 'dark'
  onCellClick: (cell) => {
    console.log('Selected cell:', cell);
  }
});
3. Options & Methods

API Reference

Option / Method Type / Signature Description
xAxis / yAxis Object | Array Axis label & items ({ label, items } or ['A', 'B'])
cells Array<Object> Cell definitions (row, col, title, question, content)
theme 'auto' | 'light' | 'dark' Visual theme. 'auto' follows OS system preference
onCellClick Function(cell, event) Callback triggered when a cell is clicked
matrix.toMarkdown() - ➔ String Exports current matrix as a formatted Markdown table
matrix.copyMarkdown() - ➔ Promise Copies Markdown table to clipboard with toast notification
matrix.setData(options) Object Re-renders the matrix immediately with fresh data

matrix.js

Bring structured thought and dialectic space to your everyday web.

Download matrix.js CSS (matrix.css)
MIT License • Kosuke Kato • Zero Dependencies