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.

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay