Quantum Encoding Atlas — Web

Interactive explorer for quantum data encodings in machine learning

---

Live Website · Library Repository · Documentation · PyPI

Overview

The Quantum Encoding Atlas web application is the interactive companion to the encoding-atlas Python library. It provides an intuitive, browser-based interface for exploring, comparing, and selecting quantum data encodings for machine learning workflows — with publication-quality math rendering, interactive circuit diagrams, and an evidence-based recommendation engine.

Pages

Route	Description
/	Landing page with hero, features overview, and encoding carousel
/encodings	Browsable, filterable catalog of all 16 quantum encodings
/encodings/[slug]	Detail page with circuit diagrams, properties, and MDX docs
/compare	Side-by-side radar chart comparison of encoding properties
/guide	7-step interactive wizard for evidence-based encoding selection

Features

• 16 Encoding Methods across 7 categories with detailed MDX documentation
• Interactive Circuit Diagrams — Custom SVG renderer for quantum gate visualization (H, RX, RY, RZ, CNOT, CZ, and more)
• Radar Chart Comparisons — visx-powered D3 charts for multi-dimensional property analysis
• Decision Guide Wizard — 7-step questionnaire with a deterministic recommendation engine and shareable URL results
• KaTeX Math Rendering — Publication-quality mathematical notation throughout
• Dark Mode — Full light/dark theme support with system preference detection
• URL-Shareable State — Comparison selections and guide results encoded in URL params for easy sharing
• Fully Static — Pre-rendered for instant loading, SEO-friendly, and zero server cost

Encodings

Angle-based Angle Encoding Higher-Order Angle	Amplitude-based Amplitude Encoding	Basis Basis Encoding	Entangling IQP Encoding ZZ Feature Map Pauli Feature Map
Variational Data Reuploading Hardware-Efficient QAOA-Inspired Hamiltonian	Physics-Inspired Trainable Encoding	Symmetry & Equivariant Symmetry-Inspired SO(2) Equivariant Cyclic Equivariant Swap Equivariant

Tech Stack

Layer	Technology
Framework	Next.js 16 — App Router, static export
UI Library	React 19
Language	TypeScript 5 — strict mode
Styling	Tailwind CSS v4 — CSS-first config, OKLCH colors
Components	shadcn/ui + Radix UI — 19 primitives
Visualizations	visx (D3 bindings) + custom SVG circuit renderer
Math	KaTeX via remark-math + rehype-katex
Content	MDX with @next/mdx
Syntax Highlighting	Shiki
Animations	Motion
Icons	Lucide React
Dark Mode	next-themes
Hosting	Firebase Hosting
CI/CD	GitHub Actions — lint, build, deploy
Package Manager	pnpm 10

Getting Started

Prerequisites

• Node.js >= 22
• pnpm >= 10

Development

# Install dependencies
pnpm install

# Start development server (http://localhost:3000)
pnpm dev

Build

# Create optimized static export → out/
pnpm build

Lint

pnpm lint

Deployment

Deployment is fully automated via GitHub Actions on every push to main:

push to main → install → lint → build → deploy to Firebase Hosting

For manual deployment:

firebase deploy

Project Structure

src/
├── app/                    # Next.js App Router
│   ├── page.tsx            # Landing page
│   ├── compare/            # Encoding comparison tool
│   ├── encodings/          # Catalog + [slug] detail pages
│   └── guide/              # Decision guide wizard
├── components/
│   ├── encodings/          # Catalog cards, detail sections
│   ├── guide/              # Wizard steps, results, option cards
│   ├── landing/            # Hero, features, carousel, stats
│   ├── layout/             # Header, footer, navigation
│   ├── math/               # InlineMath, DisplayMath (KaTeX)
│   ├── ui/                 # 19 shadcn/ui primitives
│   └── visualization/      # Circuit diagrams, radar charts
├── content/encodings/      # 16 MDX long-form documentation files
├── data/
│   ├── encodings/          # 16 TypeScript encoding definitions
│   ├── categories.ts       # 7 encoding categories
│   └── guide-rules.ts     # Recommendation rules & constraints
├── hooks/                  # useGuideWizard, useCompareEncodings, ...
└── lib/
    ├── recommender.ts      # Deterministic recommendation engine
    ├── mdx.ts              # Dynamic MDX import map
    ├── animation-variants.ts
    └── utils.ts

Related

	Link
Python Library	pip install encoding-atlas
Source Code	github.com/encoding-atlas/quantum-encoding-atlas
Documentation	encoding-atlas.github.io/quantum-encoding-atlas
Tutorials	encoding-atlas.github.io/.../tutorials
API Reference	encoding-atlas.github.io/.../api

License

MIT © 2026 Quantum Encoding Atlas Contributors