Many companies like to make their docs DIY, in-house. Understandably, because of a lack of custom branding and custom layout options from the available platforms. Here’s my chat with GPT. It suggested some good ones: RapiDoc and Dociql in addition to the one I tried ReDocly.
What's an open-source React JS library or component for converting an OpenAPI or Swagger document into a custom API documentation web page? A really good one is ReDoc from ReDocly. It's open-source. It's React. It parses the OpenAPI spec really well. I want more ideas like that.
Here is a list of tools and libraries that are suitable for converting OpenAPI or Swagger documents into custom API documentation web pages, along with brief descriptions:
- Swagger UI: This is an open-source project that turns an OpenAPI or Swagger specification into an interactive, user-friendly documentation page. It's easy to set up, works with React, and has a large community of users. (https://swagger.io/tools/swagger-ui/)
- RapiDoc: RapiDoc is an open-source custom element for viewing OpenAPI definitions. It is clean, mobile-responsive, customizable, themeable, and markdown-enabled. It works well with React projects, and it is straightforward to incorporate with minimal or extensive customization. (https://github.com/mrin9/RapiDoc)
- Dociql: As a lightweight, open-source solution built with React, Dociql transforms GraphQL schema and Markdown files into a fully interactive, customizable GraphQL API documentation web page. (https://github.com/wayfair/dociql)
- Spectacle: Spectacle generates a static HTML documentation website from an OpenAPI or Swagger specification. Although not built on React itself, it pairs well with any JavaScript framework. You can customize the theme and use various interactive features. (https://github.com/sourcey/spectacle)
- Lucy's Console: Designed to be developer-friendly, Lucy's Console is an open-source tool that creates an API Console for RESTful web services using Swagger/OpenAPI specification. It's easy to integrate within React projects, as it's built with JavaScript. ( https://github.com/lucybot/lucy-console )
- Bootprint: Bootprint is a handy Node.js module that converts an OpenAPI (Swagger) Specification into a static HTML documentation. You can customize the layout, extend it with your stylesheets, and integrate event handlers. While it isn't built with React, you can still use it as a part of your build process. (https://github.com/nknapp/bootprint-openapi)
- APIs.guru: Browsable collection of more than 20,000 OpenAPI specifications from various sources. Not a documentation tool itself but a useful resource to discover popular OpenAPI documents, explore and test them using external tools like ReDoc, Swagger UI or Postman. (https://apis.guru/browse-apis/)
These tools all offer their unique features, and it would be best to compare them to your specific requirements to find the most suitable solution.
These are great! Especially RapiDoc. Can you think of any others? Github repositories, open-source projects, anything that I could use in a React Component?
Certainly! Here are some more open-source projects that may suit your needs for API documentation, and can be used or adapted for React components:
- Apiary: Apiary, utilizing API Blueprint or Swagger/OpenAPI, is a REST API documentation platform, which powers interactive and customizable API reference pages. Although Apiary is not built on React, you could use the generated documentation in an iframe within a React component. (https://apiary.io/)
- MkDocs: MkDocs is a static site generator primarily aimed at building project documentation, but you can also create API documentation using third-party plugins such as mkdocs-openapi-plugin. The generated static pages can be used alongside your React components within your project. (https://www.mkdocs.org/)
- Docz: Docz is a powerful tool for creating living, interactive documentation for JavaScript projects. It works well with React, and you can customize existing templates or create your own components for displaying OpenAPI documentation. (https://www.docz.site/)
- Elefrank/OpenAPI-Viewer: A minimalist web-based viewer for OpenAPI specifications built in Vue.js, Elefrank/OpenAPI-Viewer can be adapted to work as a React component or used as a point of inspiration to create your own API documentation tool. (https://github.com/elefrank/OpenAPI-Viewer)
- APIEmbedded: An embeddable API documentation system, APIEmbedded facilitates an iFrame-based solution written in Angular that can be included in a React application using an iframe. To simplify the adoption of the generated API documentation in a React component, you can use react-iframe. (https://emgithub.com/APIs-guru/api-embedded https://www.npmjs.com/package/react-iframe)
- Katsana/apidocs: Although based on the Laravel PHP framework, Katsana/apidocs transforms Markdown files into delightful API documentation. The generated static documentation can be integrated into your React project using your chosen method. (https://github.com/orchestral/apidocs)
All the mentioned tools provide ways to display API documentation and can be configured or adapted to some extent to fit into React components, but be aware that some may require additional effort to conform to the React ecosystem.
Any others? Maybe some commenter's personal project? A fork of a popular open source project? I need something that is not a publishing tool or platform. Don't show me anything that is a publishing tool or platform. I need something embeddable into a React app component, or a library that can be used in React to convert OpenAI or Swagger file into presentable documentation.
Here are a few more options that could be used as inspiration for personal projects or adapted to be used with React components:
- Widdershins: Widdershins is a Node.js tool that converts OpenAPI, AsyncAPI, and Semoasa definitions into Markdown. While the generated markdown can be rendered to static HTML API documentation and then embedded into a React app's Markdown components, it could also be adapted for direct usage within a React component. (https://github.com/Mermade/widdershins)
- AntD for ReDoc: A commenter's fork of the popular ReDoc project, this repository claims to provide resizable components, embeddability, and native location support. Keep in mind that it is not actively maintained, but it can serve as a good starting point for your custom implementation. (https://github.com/zhangtielei/redoc/tree/antdPro)
- swagger-react: A user's personal project, swagger-react takes a Swagger JSON URL and generates clean, interactive documentation using React. The repository is not actively maintained, but browsing its code could provide inspiration or a base for your custom React integration. (https://github.com/jenlampton/swagger-react)
- DocSpring's OpenAPI renderer: Another personal project created by a user, this repository includes a minimalistic client-side renderer for OpenAPI v2 written with help of React Framework. The project is in the early stages and may need some adjustments to work as intended. (https://github.com/docspring/openapi-renderer-react)
- Simple React OpenAPI Renderer: This is a personal project and a simple library to render OpenAPI documentation in a React application. It's still in the rudimentary phase but can be a good starting point for customization. (https://github.com/jpedroschmitz/simple-react-openapi-renderer)
Each of these projects requires customization, configuration, or adaptation to embed into a React app component effectively, but they provide different approaches to working with OpenAPI or Swagger files within a React context.