Stop guessing which field goes where

Your API and your UI are speaking different languages.

Designers ship a screen. Developers open Postman. Then everyone argues in Slack about which JSON field maps to which label. API Sketch makes the mapping visual, shareable, and permanent.

A-01
$.data.user.name $.data.user.avatar $.meta.pagination.total
01 / The handoff

You get the UI screen.

Design hands off a pixel-perfect mockup. Fields are labeled "Username", "Role", "Plan". Clear, human-readable, ready to build.

02 / The endpoint

You get the backend API.

The endpoint returns display_name, role_id: 3, plan_code: "ent_v2". Correct data, different language.

03 / The gap

But there's always something missing.

Where's "Admin"? What maps to "Enterprise"? Nobody wrote it down. Everyone guesses - and someone guesses wrong.

What design shows
User Profile
UsernameAlex Chen
RoleAdmin
Last active2 hours ago
PlanEnterprise
?
What the API returns
GET/api/v2/users/814
Params
Headers
Body
Tests
1{
2  "display_name": "Alex Chen",
3  "acl": { "role_id": 3 },// "Admin"?
4  "meta": {
5    "last_seen_at": 1712847923
6  },
7  "billing": {
8    "plan_code": "ent_v2"// "Enterprise"?
9  }
10}
How it works

Three drops. Zero ambiguity.

01 / Screenshot

Drop a screenshot

Any screen from your app - a Figma export, a phone capture, a staging screenshot. It lands on a canvas ready to annotate.

drop image here
UsernameAlex Chen
RoleAdmin
Last active2 hours ago
PlanEnterprise
GET User POST Login
GET {{base_url}}/api/v2/users/814 Send
Params Auth Headers Body
1{ 2 "display_name": "Alex Chen", 3 "email": "alex@acme.io", 4 "acl": { 5 "role_id": 3 6 }, 7 "meta": { 8 "last_seen_at": 1712847923 9 }, 10 }
02 / Collection

Drop your Postman collection

Every saved example response unfolds into a browsable, clickable field tree. See exactly what the API returns - types, nesting, the full structure.

03 / Mapping

Draw boxes. Bind fields.

Draw a rectangle on any UI element, click the JSON field that feeds it. The binding is now visible, tracked, and commentable.

UsernameAlex Chen
RoleAdmin
A-01
Last active2 hours ago
PlanEnterprise
Response fields
$.display_name
$.acl.role_id
$.meta.last_seen_at
$.billing.plan_code
Supported formats

Drop whatever your team already uses.

Five ways to bring your API into API Sketch. Each format unfolds into the same browsable field tree — no rewriting, no manual JSON editing.

Best for examples

Postman

v2.1 collections with saved example responses. Folders, auth, bodies, everything.

.json  ·  File → Export
Best for specs

OpenAPI / Swagger

OpenAPI 3.0, 3.1, or Swagger 2.0. Pulls examples from responses and components.examples.

.json .yaml  ·  Any API gateway export
Best for real data

HAR

Chrome / Firefox network captures. Real responses from your staging env — no API knowledge needed.

.har  ·  DevTools → Network → Save all as HAR
Alternative

Bruno

Open-source Postman alternative. Folders, auth, params, bodies. No saved examples yet.

.json  ·  Export collection
Fallback

Raw JSON

Just a response body. Treated as a single unnamed endpoint. The lightest way to get started.

.json  ·  Any saved response

Make the invisible visible.

The contract between your API and your UI shouldn't live in Slack threads and tribal knowledge. Sketch it once. Share it forever.

—
—
§ Getting started

A blank sketch.

Add a screenshot from the left sidebar to begin. Then draw boxes on the image and bind each one to a field in your API response.

  1. Drop a screenshot — any PNG or JPG works.
  2. Drop a Postman, Bruno, OpenAPI, HAR, or raw JSON file — examples become a field tree.
  3. Drag on the image to draw a box, click a field to bind it.
100%
Move mode: drag any screen to reposition. Esc to exit.
idle
↑↓ navigate ⏎ select esc close