swagger-api / swagger-api/swagger-ui

Auto-indent and Spacing while typing `Request body` JSON in Swagger UI

Open
#10,647 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29k
Forks
9.3k
Avg merge
2d 23h
Merged PRs (30d)
25

Description

Content & configuration
Image Image
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."
  • 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.