Art + Tech, Founder @ unravel.tech

github

Kapil Reddy  • Peerlist

<h3>Key Features</h3><ul><li>Visual Mapping: Bridge the gap between UI design and API responses by visually mapping UI elements to specific JSON fields.</li><li>Screenshot Integration: Drop any UI screenshot (Figma export, staging, phone capture) onto the canvas for annotation.</li><li>API Collection Import: Supports importing Postman collections (v2.1), OpenAPI/Swagger specs, HAR files, and Bruno collections.</li><li>Interactive Field Tree: API responses unfold into a browsable, clickable field tree, showing exact data structures.</li><li>Direct Binding: Draw rectangles on UI elements and link them directly to corresponding JSON fields.</li><li>Multiple Format Support: Accepts various API data formats including Postman, OpenAPI, HAR, Bruno, and raw JSON.</li><li>Collaboration: Make the contract between API and UI visible, trackable, and permanent for teams.</li></ul><h3>How it Works</h3>API Sketch streamlines the handoff process between designers and developers. Designers provide a UI screen, while developers work with API endpoints. Often, the field names and structures differ, leading to confusion and errors. API Sketch visualizes this mapping:<ol><li>Screenshot Drop: Upload a screenshot of your UI screen.</li><li>Collection Drop: Import your API collection (e.g., Postman).</li><li>Mapping: Draw boxes on the UI elements and bind them to the corresponding fields from your API response. This creates a clear, visual contract that eliminates ambiguity.</li></ol>