Create beautiful dark-mode screenshots of REST(ish) API definitions

Create beautiful dark-mode screenshots of REST(ish) API definitions

The prevalence of a “writing culture” in big tech companies often surprises new hires. Engineers suddenly find themselves authoring various documents, including API specifications. While tools exist for database diagrams (dbfiddle) and code snippets (jsfiddle), describing API endpoints remains challenging for many.

This post introduces api-fiddle, a tool designed to simplify API definition creation and sharing in technical documents. In this post I want to focus on one of api-fiddle’s features in particular: generating visually appealing screenshots of REST-like API definitions.

How to create the PNG

How to Create API Definition Screenshots

Visit api-fiddle.com
Select or create an API endpoint
Define the endpoint details (method, path, parameters, headers, response)
Click the sparkle icon in the top-left corner (see provided screenshot)

Tips for Effective API Definition Screenshots

Keep definitions concise to fit within the image
Use clear, descriptive parameter and header names
Include common status codes (200, 400, 401, 404, etc.)

The api-fiddle screenshot feature streamlines the process of sharing API designs, enhancing the clarity and professionalism of your technical documentation. By providing a visual representation of API endpoints, it bridges the gap between written specifications and actual implementation.

Please follow and like us:
Pin Share