Setup a rich API playground documentation for developers with one click from OpenAPI specification.

This article will show you how to create a rich API playground for your product’s documentation using OpenAPI or Swagger with Hashnode’s new documentation tool.

Hashnode is a top publishing platform with millions of developers and companies using it to share articles on their blog and build product and API docs.

Why you should choose Hashnode for your developer documentation:

1. Easy to start — Hashnode makes creating product and API docs simple. Just sign up and follow the steps on the homepage. You can use the hosted version of the docs and map it to a custom domain or subdomain. No coding, no infrastructure, no maintenance. The docs are SEO-optimized from the get-go.

2. Create multiple guides and API references in one project — With Hashnode, you can create unlimited textual guides and API references under the same project. No need for separate licenses to cover all your products or projects.

3. Write docs like in Notion or Google Docs — Hashnode’s rich visual MDX editor lets you create and edit docs just like working in Notion or Google Docs. It supports all Markdown syntax for those who prefer it and offers visual tools like slash commands and formatting toolbars for easy styling.

4. Collaborative editing and comments — Hashnode enables real teamwork. Your whole team can edit the same document simultaneously, leave review comments, and move quickly.

5. Headless mode for advanced customization — Many developers leave products like Readme and GitBook because they don't offer headless options. Teams then turn to open-source tools like Docusaurus (which are tough to manage) or build docs in-house. Hashnode’s headless mode lets your frontend team fork Hashnode’s Next.js + TailwindCSS docs starter kit, which uses our GraphQL APIs. Your team can deploy this code anywhere, make unlimited tweaks, add custom components, and remove anything they don’t need.

6. Faster documentation UX — Hashnode's hosted and headless frontends are optimized for speed, performance, and SEO, ensuring a great experience for your users. Both perform exceptionally well on Lighthouse scores.

7. “Ask AI” search — Every Hashnode docs site includes an “Ask AI” feature that’s always up-to-date with your published content. It’s accurate, free of hallucinations, and gives instant answers to user queries. This is my favorite feature! ;)

In addition to these features, Hashnode provides an advanced dashboard to track user analytics and insights from your docs. You can also create custom pages, add team members with different roles, and more. Create your developer docs for free.

OpenAPI Reference Setup

Creating an API reference from an OpenAPI spec or Swagger on Hashnode takes under 3 minutes.

1. Log in to your Hashnode account.

2. On your homepage, click the “New docs” button. If you already have a doc, skip this step.

   

3. Enter the docs name, choose a sub-domain (you can link a custom domain later), optionally add a logo, and click “Create.”

4. Your docs project will appear under the “Docs” section. Click the dashboard button to access it.

5. In the dashboard, go to the guides section.

6. Click the “New” button, then select “New API reference.”

7. Enter the OpenAPI spec URL, name your guide (e.g., “Acme API reference”), choose a slug like api-reference, and click “Import and create.”

Your API reference playground will be ready and live instantly. You can view and test it on your docs site. For easy access, you can add a link to the API reference in the Navbar settings in the dashboard.

---

We built Hashnode’s docs product to help you create and scale developer documentation and API references that evolve with your code. It’s designed for teams needing full control, customization, and Stripe-level quality—without the hassle. Sign up now and create a free doc today!