Zudoku is an MIT-licensed TypeScript framework for building interactive API documentation sites from OpenAPI schemas, aimed at developer-facing teams that want OpenAPI-powered docs they host and maintain themselves rather than rent.

What it is

Zudoku (pronounced "zoo-doh-koo") is an open-source, highly customizable API documentation framework for building quality developer experiences around OpenAPI and, soon, GraphQL documents. It lives in the TypeScript and npm ecosystem, is published as the zudoku package, and is built to generate documentation from a single or multiple OpenAPI schemas. It ships as a static site generator and also as a React component that can be embedded through a CDN, and its topic list places it alongside OpenAPI, OpenAPI 3, Swagger, Swagger UI, Markdown, GraphQL and static-site-generator tooling. Zuplo maintains it.

The concrete problem it solves is the gap between a raw schema and a documentation site a developer actually wants to read. A team with an OpenAPI document can render it, wrap it in MDX pages, add authentication, and let readers try real API calls from an integrated playground instead of copying and pasting from a static reference. That replaces the plain Swagger UI rendering of a spec and the hand-assembled React docs front end that usually grows around it, with configuration and plugins standing in for custom code.

Key capabilities

• Generate documentation from a single or multiple OpenAPI schemas, with the many-apis example template showing the multi-document setup.
• Author MDX pages for anything else that needs documenting alongside the generated API reference.
• Integrated Playground lets readers test API calls, and it carries authentication through to those calls.
• Authenticate documentation users through OpenID or OAuth2, with the with-auth0 example template demonstrating the Auth0 plugin.
• Extend the framework with plugins, and start from the with-config barebones config or the advanced with-vite-config setup.
• Run the CLI generator with npm create zudoku@latest, or use the package standalone via CDN as a React component.
• Dark mode, plus a live preview at zudoku.dev that accepts a URL to an OpenAPI document.

Who uses it and how

• Teams publishing a standalone documentation website for one API, generated from their OpenAPI schema and deployed as static assets.
• Organisations documenting more than one API, using the many-apis template to serve several OpenAPI documents from one site.
• Products that gate docs or playground calls behind login, wiring Auth0 or a generic OpenID or OAuth2 provider through the authentication plugin.
• Advanced setups that need to merge Zudoku into an existing Vite build, using the with-vite-config template.
• Anyone wanting a single embedded reference page, adding the package and styles and passing a schema URL to the data-api-url property, as shown with the Rick and Morty API and Pet Store API demos. Zuplo's own API documentation at zuplo.com/docs is built with it.

Getting started

Run the command line generator with npm create zudoku@latest, or use the package standalone via CDN as a React component by adding the package and styles and passing your API schema URL to the data-api-url property.

How it compares

No list of paid products is given, so the comparison stays inside the facts: the topic list places Zudoku near Swagger and Swagger UI, the default renderers for OpenAPI documents, and near static-site generators, which is the build model it shares. It differs from a bare spec renderer by adding MDX pages, an authenticated playground and a plugin system, and it is tagged as a static site generator rather than a hosted reference tool.

When to use it — and when not to

Zudoku fits teams with OpenAPI documents, a TypeScript or npm toolchain, and the willingness to own a static build; the README documents no database, storage or mail service to operate, so the running cost is mainly the build pipeline and hosting. Teams needing GraphQL documentation today should wait, because the README promises GraphQL only as something coming soon. Two further cautions: the repository carries 92 open issues, and the advanced paths assume familiarity with MDX, React and Vite configuration, so a team with no JavaScript build experience will find the barebones config easier than the Vite integration.

npm create zudoku@latest

<!doctype html>
<html>
  <head>
    <title>Zudoku Demo</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="icon" type="image/svg+xml" href="https://cdn.zudoku.dev/logos/favicon.svg" />
    <script type="module" src="https://cdn.zudoku.dev/latest/main.js" crossorigin></script>
    <link rel="stylesheet" href="https://cdn.zudoku.dev/latest/zudoku.css" crossorigin />
  </head>
  <body>
    <div data-api-url="https://api.example.com/openapi.json"></div>
  </body>
</html>