Top 3 Free API Documentation Tools

Modern web services live and die on the APIs they use. Developers must avoid monolithic systems and embrace agility and flexibility. This is why, of course, it isn’t unheard of for companies to rely on dozens of semi-independent (micro)services – either from 3rd parties or internal teams.

That means we’re more reliant than ever on other team’s code. So to make it all play nicely, we must select robust APIs that facilitate project management and development – and that means using the best API documentation tools from the get-go.

And it’s not just to keep things nice and tidy. It’s a competitive advantage.

Why API Documentation Matters

For public APIs, where success equals widespread adoption, getting buy-in requires good documentation. This helps partner organizations evaluate whether they will select this API or a competitor’s.

For internal APIs, good documentation means a quicker ability and efficiency in meeting business goals. The faster a team can consume microservice APIs developed by other teams, the faster the company can reach its Minimum Viable Product

And while software documentation is usually static, (think of a book printed on paper) modern API documentation goes well above and beyond. They can offer interactive documentation with richer user experience.  
In short: good, interactive documentation lets us read about the API, but also learn the API more quickly by viewing example data objects, and by directly interacting with itI.

OpenAPI To The Rescue

The OpenAPI specification, formerly known as the Swagger specification, aims to meet the challenges of teaching APIs while documenting them. After describing an API according to the specification, tools can be utilized to generate human-readable documentation.

While OpenAPI tools include code generators and spec generators, today we’ll focus on three of the best solutions for interactive browsing and interaction with API endpoint documentation.

Note that we’ve compared the UIs by testing the PetStore example from the official OpenAPI repository.

OpenAPI support comparison

Feature ReDoc Swagger-UI DapperDox
OpenAPI v2Yes YesYes – Albeit finicky
OpenAPI v3YesYesUnknown
URL for example code and dataYesNo – Generates sample data objectNo
Extensions for improved user experienceYesNoNo

#1 – The Free API Documentation Tool With Impeccable Branding Options: ReDoc.ly

The Free API Documentation Tool With Impeccable Branding Options - ReDoc.ly

At the top of our list is ReDoc. Doubling as consultancy service that helps teams build API specifications using OpenAPI, the ReDoc tool is a powerful one that supports both OpenAPI v2 and OpenAPI v3.

So why is it our favorite? Mostly flexibility. In fact, ReDoc works in four different modes:

  • Hosted build of the ReDoc code:  You simply build a web page using an HTML template they provide. This loads the JavaScript that implements the tool, and your task is to specify the URL for your API specification.
  • ReactJS component: It is delivered via an NPM package, and easily incorporated into a React project.
  • Command-line (CLI) tool: you can either run a server to generate the browsable API or generate a static HTML file containing the browsable API.
  • As a Docker image: one simply that packages the ReDoc server.

Each mode gives you theming options to customize the browsable documentation. This gives you full control over colors, font choices, mobile responsiveness, and branding images.  

Using Redoc for API documentation

In most modes, the API specification is not rendered to HTML on the server but in the browser instead. The example HTML template uses a <script> tag to load redoc.standalone.js, and a custom <redoc> tag includes the URL for the specification and other options.  

Integrating Redoc

Integrating ReDoc in your website requires customizing this HTML template, for instance by adding a header and footer area, or branding for your website (logo, colors, and fonts).

ReDoc supports another mode in which the CLI tool can generate a static HTML file.  Within that file is a pre-rendered version of the API spec as a combination of HTML code and JavaScript data.  There is a default HTML template for the generated HTML, and you can supply your own template as well.

Either way, the result looks like this:

Redoc.ly Default HTML template for the generated HTML

Pretty neat! There is also a sidebar area showing API methods, and the search box helps you navigate more complex APIs by searching for methods.

Redoc.ly API Methods

The description of each API method is clean and straightforward, with elements taken from the OpenAPI specification.  For more complex objects, you can drill down into nested objects.

Redoc.lu description of API method


The API method documentation includes sample inputs and outputs. You can copy/paste them into a tool like Postman to interact with the service.

The PetStore demo shown here uses several advanced OpenAPI features, plus a ReDoc vendor extension. The source of the OpenAPI YAML is in their workspace at https://github.com/Rebilly/ReDoc/blob/master/demo/swagger.yaml  

Extensions used in Redoc

The last link takes you to a specific API method. As you browse through the API document, notice how the location bar changes with a different anchor for each API method.  The user can conveniently share direct links to an exact method this way.

Another example below is the createUser method, which takes a JSON object as the body schema described in the text.  If you click on the category object, then the subfield (sub-category) field, you get a display like this of the nested object structure:

Redoc.ly: createUser method, which takes a JSON object as the body schema described in the text

The two buttons, Pet and Tag demonstrate how a field can be one of the multiple types.  Click between them to see the different object structures.

Redoc’s responsive user interface


Another interesting feature is the responsive user interface, which we can see by widening the browser window.

Redoc.ly Responsive User Interface

The pane for viewing sample input/output can either be displayed stacked inline with the API methods or sitting alongside the API method. This is ReDoc’s 3-pane display, with a left-hand navigation pane, a middle pane showing the documentation, and a right-hand pane showing the example data structure.  

Putting the example next to the API method, rather than below the API method, is more convenient since you don’t have to continually scroll back and forth.

And while we’re looking at the example data structure, notice how the nested structure can be opened up to view details.

Another detail is in the left-hand navigation area:

Redoc.ly left-hand navigation area

API Methods in Redoc

With ReDoc, the API methods can be grouped using “tags”, to display them as shown here.  This aids navigation by grouping API methods into topical categories.  In the specification, the tags are coded as so:

x-tagGroups:
 - name: General
   tags:
     - pet
     - store
 - name: User Management
   tags:
     - user

In this example, there are two tags, General and User Management, corresponding to the items shown here.

Finally, the reason ReDoc is number one is the simplicity of use. The example templates are straightforward. It’s easy to integrate into a website using either the pre-rendered HTML generated by the CLI tool or dynamically rendered documentation in the browser.

Where to find out more about Redoc.ly

#2. Swagger UI – The Direct Descendent of OpenAPI

Swagger UI - The Direct Descendent of OpenAPI

The Swagger team is, of course, where OpenAPI started when SmartBear donated the Swagger Specification to the public. However, they are still developing Swagger tools and offering services for commercial activity. There’s a lot on offer, but we’ll only look at the Swagger UI here.

While Swagger UI gives great results, the documentation is sometimes a bit confusing. You can use it in several modes, but it’s not always clear how to implement each:

  • A stand-alone web page: possible using the swagger-ui-dist package.  There is no documentation, but the package has an index.html that can be used directly.  This can be used as an example for your website.

  • Integration with an Express web application: could be extrapolated for other web app frameworks.

  • ReactJS component: using SwaggerUIBundle.  The component appears to allow plugins to extend the UI, but documentation is unclear.

  • A Docker image: providing a pre-packaged Swagger UI server that is relatively easy to use.

  • As image through the Unpkg CDN: again, suffering from scant documentation.

The API specification overview shows the API endpoints at the top, and object class definitions at the bottom.  Each of these is expandable to show more details. The following images were captured by running the Docker service.

Swagger UI API specification overview

If we open up one of the API endpoints we see the inputs to the API method, as well as descriptive text.

Swagger UI API Endpoint


Below that is sample output.  If the API spec supports multiple output formats, e.g. application/xml in addition to application/json, the drop-down lets you select the format.

To try a more comprehensive example, we loaded the ReDoc extended Petstore demo into the Swagger UI. This is easily accomplished by entering the raw Github URL to the YAML specification into the Swagger UI screen and clicking the Explore button.

Swagger UI screen

This is where things started going a bit wrong.

While Swagger UI can display nested object properties, you will not properly see an example of the nested object. It generates example data objects, but in this case, the example object did not include the nested data.

Also, Swagger UI does not have a mode for displaying the example object next to the object definition. Instead, you have to select your view by clicking on Example Value to show the example object, and Model to show the object definition.

The UI lacks a navigation sidebar and showing every item stacked one on top of the other.  The user then must scroll, and scroll, to navigate the full length of the API, and

Last but not least, the UI is also missing a way to search through the API specification.

Where to find out more about Swagger UI

#3. DapperDox – Nice Looking, Yet Lacking in Features

An open source project for viewing OpenAPI v2 or v3 specifications.  It has a lot of interesting features, one of which is integrating documentation written in Markdown.

While this is a great feature, DapperDox is sometimes a bit finicky.  We tried a couple of OpenAPI v2 examples, and it frequently gave errors like “Error: GET /v1/pets/{petId} references a model definition that does not have a title member” after which the server would simply crash. The only example we found to work reliably is the simple OpenAPI v3 PetStore demo in the official OpenAPI repository.

DapperDox is delivered as a binary compiled from Go source for specific operating systems.  It is a command-line tool which parses the OpenAPI spec and is a web server offering up the documentation.

The DapperDox website has an extensive documentation area, which is clear and easy to follow.  It goes over building guides in addition to the browsable API specification and customizing the presentation.

The documentation does not discuss implementing a production deployment of the DapperDox server.  The best choice may be to create a Docker image, but no example is given of how to do so.

DapperDox - Nice Looking, Yet Lacking in Features

This is the API overview.

DapperBox API Overview

And the display for an individual method. While it shows the parameters as well as expected response, sadly DapperDox does not show example data structures, unlike ReDoc and SwaggerUI.

Where to find out more about DapperDox

The Best Free API Documentation Tool – Conclusion

While there is no shortage of free API documentation tools, all are not created equal. There are numerous points to consider, and we believe that, in our tests, ReDoc gave us a good balance of flexibility, efficiency, and features:

  • User Interface: ReDoc’s UI looks professional. It’s also responsive and includes search bar/navigation sidebar.

  • Documentation: we found ReDoc’s to be clear and understandable for all four supported modes.

  • Customization: ReDoc supports customizable theming, letting you choose compatible colors and fonts, as well as a branding logo in the upper left corner.  

Add to that extra features like deep linking to documentation, vendor suggestions, and ease of integration, and it’s plain to see why we have a clear winner.

More Articles for You

2020’s Best Antivirus Software

They should probably sell Antivirus software in a pharmacy because, in the long run, it will save you a lot …

The Best 5 Shopping Cart Software For Your Online Business

Getting the right shopping cart software for your online store is a crucial part of becoming a successful online entrepreneur. …

Top 10 Social Media Calendar Tools For Your Business

Social media calendar tools are fast becoming essential in the world of marketing. For good reason too, because this handy …

Which is the Best Payment Processor For Your Business?

Ready to start processing payments online? The good news is that you have plenty of options. The bad news… there’s …

The 3 Best Hearing Aids of 2019

While an estimated 48 million Americans suffer from hearing loss, only 30% of adults aged 70 or over have ever …

The 3 Best VOIP Phone Services for Businesses in 2019

VOIP services for business come in all shapes and forms these days. We tested 3 of the best ones for flexibility, mobile use, pricing, and much more.