HubAPI Design
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.
See capabilitiesDesign from the database outward
Backend opens a code editor, ships a contract. The API technically works but forces workarounds.
Wrong shape, then meetings
Frontend gets the contract, realizes the shape is wrong. Another backend cycle to get what they actually needed.
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.
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.
No federation expertise required. No manual entity wiring. What usually takes days of back-and-forth runs in seconds.
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.
Handles objects, enums, input types, entity keys. Understands federation and validates composition automatically.
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. You focus on the design; Hub handles the wiring.
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.
Frontend
Design the query from your Figma mock. No more waiting for backend to guess the right shape.
Backend
No more vague requirements. The contract is clear before you write a single line of implementation.
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.
Product
Resources
Related Projects
Legal
HIPAA Compliant© 2026 WunderGraph, Inc. All rights reserved.