Add JSON Editor Option to API Playground

[dzimiks]

Problem

The current API playground uses individual form fields for request bodies, which can be cumbersome when testing complex payloads. Developers often prefer working with raw JSON, especially when:

• Testing complex nested objects
• Copying/pasting payloads from other tools
• Making quick modifications to existing JSON structures
• Working with dynamic or conditional fields

Proposed Solution

Add a toggle/switch in the API playground modal that allows users to choose between:

1. Form view (current): Individual input fields for each parameter
2. JSON view (new): Raw JSON editor with syntax highlighting and validation

Expected Behavior

• User clicks "Try it" on an endpoint
• Modal opens with a toggle switch: "Form View" ↔ "JSON View"
• In JSON view:
  • Display a code editor with syntax highlighting
  • Pre-populate with example JSON from the OpenAPI spec
  • Provide JSON validation with error highlighting
  • Allow free-form editing of the entire payload

Reference Implementation

Similar to Swagger UI's "Try it out" functionality, which provides both form fields and raw JSON editing options.

Benefits:

• More flexible payload testing and modification
• Familiar workflow for developers used to Swagger UI
• Easier copying/pasting of complex payloads
• Better support for dynamic API testing scenarios
• Maintains the current form view for users who prefer it

Use Case

Testing endpoints with complex nested objects would be much more convenient with direct JSON editing rather than filling individual form fields.