How to Set Up Swagger UI in Express with TypeScript

API documentation is crucial for developers to understand, test, and consume your endpoints efficiently. Swagger (OpenAPI) is a popular standard for documenting RESTful APIs.

In this blog, you’ll learn how to integrate Swagger UI in an Express TypeScript project using:

• swagger-ui-express

• swagger-autogen

---

Step 1 : Install Required Packages

npm i swagger-ui-express
npm i --save-dev swagger-autogen

Step2: Enable JSON Module Import in TypeScript

Edit your tsconfig.json file and enable the following option:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

This allows TypeScript to import JSON files directly (which is required for the Swagger output).

Step 3 : Integrate Swagger UI in Your App

In your app.ts (or server.ts), add the Swagger middleware:

import swaggerui from "swagger-ui-express"

import * as swaggerDocument from "./swagger-output.json" // we will create this swagger-output.json later on

app.use("/api-docs", swaggerui.serve, swaggerui.setup(swaggerDocument));

Step 4 : Create Swagger Generator File

Create a file called swagger-gen.js in the root of your project:

import swaggerAutogen from "swagger-autogen";

const doc = {
  info: {
    title: "CodeSummit Api",
    description: "Description",
  },
  host: "localhost:8080",
};

const outputFile = "./swagger-output.json";
const routes = ["./app.ts"];

swaggerAutogen(outputFile, routes, doc);

💡 Note: Even though your app is written in TypeScript, you can keep this generator file in JavaScript because swagger-autogen uses static analysis.

Step 5 : Run the Generator

Generate your Swagger docs by running:

node swagger-gen.js

This will create a new file called swagger-output.json which will be used by swagger-ui-express.

Visit your Swagger UI at:

http://localhost:8080/api-docs

You’ll see a beautiful, interactive Swagger interface displaying your documented API endpoints.

🎉 Conclusion

With this setup, you now have automatic API documentation using Swagger UI in your Express + TypeScript project. This makes your APIs self-explanatory and testable without external tools like Postman.

Happy coding! ✨