Good interfaces deserve a proper comparison.

Put real components and pages side by side. Explore the differences, test the details and find the direction you want to keep.

Install VariantHub

ReactReact
HTMLHTML
Running URLsURLs
Your coding agentAgents

Compare1 / 4

See the differences together.

Choose a grid density and select the versions you want to compare.

From first options to a clear direction.

Make decisions with the interface running, not just the idea of it.

Judge the behavior.

Compare working components with the styles and states your project actually uses.

Keep the full context.

Follow the page. Test the links. See how a direction behaves beyond its first screen.

Landing01/03

Pricing02/03

Details03/03

Find the breaking point.

Check the same implementation from Mobile through Wide.

Wide · 1920

Desktop · 1440

Tablet · 768

Mobile · 390

Keep a useful shortlist.

Hold on to promising options without crowding the workspace.

Your favorites2

Cobalt focus

Quiet surface

The comparison lives in your code.

Design tools help explore what an interface could be. Here you compare implementations running in your project, with your styles, content and behavior.

Review the code you will keep.

A comparison workspace alongside your development flow. No separate mockup to rebuild before you can test a button or follow a link.

Editor · your-app/src/variants.tsx

React

import { VariantHubProvider, VariantHubCanvasPage } from "varianthub-core";import { QuietButton, BoldButton } from "./alternatives"; const actions = {  key: "primary-action",  name: "Primary action",  path: "src/alternatives",  variants: [+    { id: "quiet", name: "Quiet", component: QuietButton },+    { id: "bold", name: "Bold", component: BoldButton },  ],}; <VariantHubProvider>  <VariantHubCanvasPage componentsWithVariants={[actions]}    getComponentVariants={key => key === actions.key ? actions : undefined} /></VariantHubProvider>

Your components, styles and state. Nothing to rebuild.

Keep the useful options within reach.

An exploration can grow without filling your workspace. Choose what stays visible, save favorites and find another item from the keyboard.

Choose what you compare.

Hide an option from the workspace without removing it from the catalog. Select the visible versions you want to compare.

Find the next thing to work on.

Open search with ⌘ K, jump to a recent item or return to a favorite. Spend less time looking through the catalog.

Describe the change. Let your agent build the options.

Two skills bring VariantHub into your coding agent. Set up the workspace, ask for alternatives, then compare real interfaces without wiring each variant by hand.

varianthub-builder

Get your repo ready.

Ask your agent to install or update VariantHub. The skill connects the registry and preview routes, then checks that components and pages open correctly.

Your agent takes care of

Installation and updates
Registry and preview routes
Checks on the running workspace

Your coding agent · Example conversation

What would you like to set up?

Use varianthub-builder to set up VariantHub in this repo. Register a sample component and a page, then check that both previews open.

varianthub-builder· working

Installed VariantHub and the registry4s
Registered PrimaryAction and Northstar page9s
Installed and registered samples
Opening both previews…localhost:3000

See what happens next

Bring the workspace to your project.

Choose how you want to work. Scroll through setup, alternatives and your first preview.

Add VariantHub to an existing project. Initialize a workspace alongside the code you already have.

Terminal · your-project

~/your-project

git clone https://github.com/mattiamichini-design/varianthub.git
cd varianthub
npm ci
npm run build:packages
node packages/runner/src/cli.mjs init --root /path/to/your-project✓ Workspace initialized for ~/your-project✓ Ready. Add your first alternatives next.❯

Node.js 22+. Clone and build once from GitHub; run directly against your project.

Give each direction a stable ID and a source. Register local HTML pages, running URLs or components in your React host.

Your project · Source files

varianthub.config.json

{
  "version": 1,
  "projectId": "my-project",
  "roots": ["pages"],
  "explorations": [{
    "key": "landing",
    "name": "Landing page",
    "path": "pages",
    "kind": "page",
    "variants": [
      { "id": "quiet", "name": "Quiet",
        "source": { "type": "html", "entry": "pages/quiet.html" } },
      { "id": "bold", "name": "Bold",
        "source": { "type": "html", "entry": "pages/bold.html" } }
    ]
  }]
}

HTML files stay inside configured roots. React needs varianthub-core and preview routes in your existing host.

Start the local runner, then open your workspace in the browser. Your project stays on your machine.

Terminal · your-project

~/your-project

node /path/to/varianthub/packages/runner/src/cli.mjs start --root /path/to/your-project

Workspace ready
http://localhost:4310

Open the URL printed by your server. Your React host may use a different port.

Free and open source. Add VariantHub to your project, then open your workspace.

Node.js 22+. AI is optional. Clone and build VariantHub from GitHub, then point it at your project root.

A few things before you start.

What runs where, what stays local, and how to get started.

The public playground includes sample projects you can explore in your browser. To compare your own work, run VariantHub in your project.

Find the direction
worth shipping.

Start with the sample project. See the whole page, test the details, then bring your own work.

Good interfaces deserve a proper comparison.

See the differences together.

From first options to a clear direction.

Judge the behavior.

Keep the full context.

Find the breaking point.

Keep a useful shortlist.

The comparison lives in your code.

Review the code you will keep.

Keep the useful options within reach.

Choose what you compare.

Find the next thing to work on.

Describe the change. Let your agent build the options.

Get your repo ready.

Your agent takes care of

Bring the workspace to your project.

1Start with your project.

2Add a few alternatives.

3Open your workspace.

A few things before you start.

Do I need to install anything to try it?

What can I compare?

Is VariantHub a desktop app?

How many variants can I show?

Does my project need a cloud account?

Is VariantHub free and open source?

Find the directionworth shipping.

Find the direction
worth shipping.