swagger-api / swagger-api/swagger-ui
Auto-indent and Spacing while typing `Request body` JSON in Swagger UI
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Content & configuration
Is your feature request related to a problem?
Yes, Swagger UI currently lacks automatic or on-demand formatting for JSON request bodies. When working with complex or deeply nested JSON structures, the absence of indentation and formatting reduces readability and increases the likelihood of user errors.
- Harder to visually parse and edit non-trivial JSON payloads
- More prone to human errors such as missing commas or unmatched braces
- Forces users to rely on external editors or browser extensions to properly format their request JSON
Describe the solution you'd like
Add JSON formatting support for request body editors when the request’s media type is application/json.
- Detect if the request body content type is JSON
- Provide a “Format JSON” button above or beside the textarea
- On click:
- Validate the current input using
JSON.parse - If valid, reformat using
JSON.stringify(value, null, 2) - If invalid, display an inline error message such as:
"Unable to format: invalid JSON."
- Validate the current input using
- Should not auto-format on every keystroke to avoid disrupting partial edits
- Should not be enabled for non-JSON media types (XML, text, YAML, binary, form-data, etc.)
This approach minimizes risk and avoids unexpected behavior while offering a clear UX improvement.
Describe alternatives you've considered
- Writing JSON in external code editors
This is currently the only reliable option but breaks the flow.
Additional context
I am willing to open a PR implementing this functionality once approved.
The implementation requires no new dependencies—JSON.parse and JSON.stringify are sufficient.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the Swagger UI request-body editor and its textarea for application/json media types; the issue does not identify a file or test. Add an explicit formatting action that validates and reformats valid JSON, reports invalid input inline, and remains unavailable for non-JSON bodies.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100