Swagger UI Integration0%

Swagger UI Integration

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

OpenAPI 3 and Swagger UI with drf-spectacular

Interactive API documentation is essential for modern frontend-backend collaboration. DRF OpenAPI 3 documentation is powered by drf-spectacular, the officially recommended documentation generator for Django REST Framework.


1. Why drf-spectacular?

Older tools like coreapi and drf-yasg only supported OpenAPI 2.0 (Swagger 2.0). drf-spectacular generates fully compliant OpenAPI 3.0 schemas, supporting:

  • Rich typing and JSON Schema validation
  • Accurate component schemas for nested serializers and Polymorphic models
  • Interactive Swagger UI and Redoc endpoints
  • Client code generation (TypeScript fetch, Axios, Python SDKs)

2. Installation and Settings Configuration

Install the package:

Bash / Terminal
pip install drf-spectacular

Add to INSTALLED_APPS and configure DRF default schema class in settings.py:

Python
INSTALLED_APPS = [
...,
'rest_framework',
'drf_spectacular',
'store',
]
 
REST_FRAMEWORK = {
'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}
 
SPECTACULAR_SETTINGS = {
'TITLE': 'MSK Institute E-Commerce & Academy API',
'DESCRIPTION': 'High-performance REST API with JWT Auth, Filtering, and Stripe integration.',
'VERSION': '1.0.0',
'SERVE_INCLUDE_SCHEMA': False,
'COMPONENT_SPLIT_REQUEST': True,
'SCHEMA_PATH_PREFIX': r'/api/v[0-9]',
}

3. Configuring URL Endpoints

In config/urls.py, register the raw schema download endpoint and the interactive Swagger UI:

Python
from django.urls import path
from drf_spectacular.views import (
SpectacularAPIView,
SpectacularSwaggerView,
SpectacularRedocView
)
 
urlpatterns = [
# OpenAPI Schema (YAML or JSON)
path('api/schema/', SpectacularAPIView.as_view(), name='schema'),
# Swagger UI (Interactive Explorer)
path('api/docs/swagger/', SpectacularSwaggerView.as_view(url_name='schema'), name='swagger-ui'),
# Redoc (Clean Documentation Reader)
path('api/docs/redoc/', SpectacularRedocView.as_view(url_name='schema'), name='redoc'),
]

Visiting /api/docs/swagger/ in your browser provides an interactive dashboard where developers can test endpoints, view request bodies, inspect status codes, and authenticate using the "Authorize" button.


Interactive Quiz

Practice Quiz

Question 1
What standard does drf-spectacular generate documentation for?
Question 2
What setting must be added to REST_FRAMEWORK in settings.py for drf-spectacular to inspect views?
Question 3
What is the purpose of SpectacularAPIView in urls.py?
Question 4
What does setting 'SERVE_INCLUDE_SCHEMA': False in SPECTACULAR_SETTINGS do?
Question 5
Why is OpenAPI 3 documentation superior to static markdown for frontend developers?
Next Lesson

Redoc Documentation

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Automated API TestsRedoc Documentation

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PrevNext