# Design APIs from the UI down.

Stop writing backend contracts in the dark. Hub is a visual, collaborative workspace — like Miro for GraphQL schemas — that lets your team design, validate, and auto-generate APIs based on exactly what your frontend needs.

## The Problem

### Your frontend knows what it needs. Your API process ignores it.
Most teams design APIs from the database outward — optimizing for how data is stored, not how it's consumed. The frontend gets the wrong shape, someone schedules a meeting, and the cycle repeats.

01
### Design from the database outward
Backend opens a code editor, ships a contract. The API technically works but forces workarounds.

02
### Wrong shape, then meetings
Frontend gets the contract, realizes the shape is wrong. Another backend cycle to get what they actually needed.

03
### Backend writes in the dark
Without a consumer-first starting point, every frontend developer massages data or waits for another backend cycle.

## How It Works

### Build the query first. Let the schema follow.

### Drop your UI mock
Drag a Figma screenshot or design comp onto the canvas. Select the component you're building.

### Write the dream query
Write the exact query you need. Hub runs live gap analysis — existing fields light up, missing ones flagged.

### Fission or assign
New field needs a new service? Fission generates the subgraph schema. Otherwise assign fields with a click.

### Validate in real time
Multiplayer canvas, instant validation. You can't save a broken schema — the supergraph stays valid.

## From UI mockup to GraphQL schema in minutes
Design from the consumer first. Validate and ship with confidence.

### Live gap analysis
Build precisely what the frontend requires. Select the component you're building and write the query you need. Hub performs a live gap analysis: fields that already exist in your graph light up; fields that are missing are flagged for creation. You're not guessing — you're building exactly what the consumer needs and nothing more.

### The dream query workflow: start with what the consumer needs, then work backwards to the schema.

#### Query → Schema

Analyzing

- product.name
- product.price
- product.imageUrlmissing

2 of 3 fields resolved

### Fission
New services, auto-generated. Federation abstracted. If a new field needs a new service, Hub's Fission algorithm handles the hard part. Describe the data you need, assign it to a new subgraph, and Fission automatically generates the correct subgraph schema — entity keys, federation directives, dependency imports — so the graph stays perfectly composable.

### Multiplayer canvas
Real-time validation. No invalid states. Hub's canvas is a shared workspace where your whole team designs together — live cursors, simultaneous edits, instant visibility. As you add types, fields, and arguments, Hub validates in real time against GraphQL naming rules, type compatibility, and federation constraints.

You can't save a broken schema. Failed compositions surface specific errors immediately and block the save.

### AI schema design
Build schemas through conversation. Hub's AI agent comes equipped with specialized schema design tools. Describe what you need in plain language — "add a bonus field to the salary type, make it a float, assign it to the payroll subgraph" — and watch the changes stream onto the canvas in real time.

### Assign fields across services
Fine-grained, cross-service field distribution. Once fields are defined at the supergraph level, you assign them to specific subgraphs visually. Individual fields can live in different subgraphs than their parent type — so you get fine-grained distribution without losing track of what lives where. If a target subgraph is missing a dependency, Hub imports it automatically.

## Built For Your Team

### Frontend teams stop waiting. Backend teams stop guessing.
When you design from the UI down, the contract between frontend and backend is clear before a single line of implementation is written.

### Architects
See the full graph, enforce quality, and keep the API aligned with product needs — not org charts.

## Built for teams like yours.
Join teams already using Hub to design, govern, and ship their federated APIs. Start free—no credit card required.