DEV Community

Cover image for Create beautiful dark-mode screenshots of REST(ish) API definitions
Florian
Florian

Posted on

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

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

Screenshot of icon

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.

Top comments (0)