[GH-ISSUE #1435] Provide a visual editor for JSON/KV request bodies #463

Closed
opened 2026-03-16 15:31:00 +03:00 by kerem · 9 comments
Owner

Originally created by @kotx on GitHub (Jan 22, 2021).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1435

Originally assigned to: @Reflex-Gravity on GitHub.

Is your feature request related to a problem? Please describe.
Users cannot send JSON to an endpoint if the endpoint requires numbers to be JSON numbers. Currently Hoppscotch serializes all parameters as JSON strings.

Describe the solution you'd like
User input:
image
Expected behaviour: user can either select the parameter type and/or the value gets automatically converted into the proper type.

Describe alternatives you've considered
Can always use the raw request bodies, but that is less convenient.

Originally created by @kotx on GitHub (Jan 22, 2021). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1435 Originally assigned to: @Reflex-Gravity on GitHub. **Is your feature request related to a problem? Please describe.** Users cannot send JSON to an endpoint if the endpoint requires numbers to be JSON numbers. Currently Hoppscotch serializes all parameters as JSON strings. **Describe the solution you'd like** User input: ![image](https://user-images.githubusercontent.com/33439542/105427778-c03f5c80-5c02-11eb-8bb6-17435e08f742.png) Expected behaviour: user can either select the parameter type and/or the value gets automatically converted into the proper type. **Describe alternatives you've considered** Can always use the raw request bodies, but that is less convenient.
kerem 2026-03-16 15:31:00 +03:00
Author
Owner

@liyasthomas commented on GitHub (Jan 22, 2021):

user can either select the parameter type

This is not a convenient way.

On the other hand, raw request body is especially made to address this issue. Let me know why raw request body is less convenient for you.

<!-- gh-comment-id:765166992 --> @liyasthomas commented on GitHub (Jan 22, 2021): > user can either select the parameter type This is not a convenient way. On the other hand, raw request body is especially made to address this issue. Let me know why raw request body is less convenient for you.
Author
Owner

@kotx commented on GitHub (Jan 22, 2021):

user can either select the parameter type

This is not a convenient way.

On the other hand, raw request body is especially made to address this issue. Let me know why raw request body is less convenient for you.

The process would be faster if the parameters were synchronized between raw and normal request bodies. Currently I have to rewrite the JSON entirely, unless that's a bug.
Also, autodetection seems much more convenient than editing a raw request body. There aren't many edge cases where the server only accepts a number (or some other type) as a string AFAIK.

<!-- gh-comment-id:765742823 --> @kotx commented on GitHub (Jan 22, 2021): > > user can either select the parameter type > > This is not a convenient way. > > On the other hand, raw request body is especially made to address this issue. Let me know why raw request body is less convenient for you. The process would be faster if the parameters were synchronized between raw and normal request bodies. Currently I have to rewrite the JSON entirely, unless that's a bug. Also, autodetection seems much more convenient than editing a raw request body. There aren't many edge cases where the server only accepts a number (or some other type) as a string AFAIK.
Author
Owner

@Reflex-Gravity commented on GitHub (Mar 22, 2021):

Can I take this issue?

If Yes, Please brief me about the implementation.

<!-- gh-comment-id:804327534 --> @Reflex-Gravity commented on GitHub (Mar 22, 2021): Can I take this issue? If Yes, Please brief me about the implementation.
Author
Owner

@liyasthomas commented on GitHub (Mar 23, 2021):

@Reflex-Gravity so, when you choose request method as POST, PUT, or DELETE you can add request body from request section. And it can be done in two ways. Key-value pairs and Raw input.

This feature enable syncing both of them. Whenever you add a key-value pair - it should reflect in Raw input and when you add a Raw input (JSON object) it should reflect in key-value pair.

  1. Choose POST request method
  2. Change URL to https://httpbin.org/post
  3. Add request body / raw input
  4. Send

Key-value pair

Screenshot_20210323-055221__01

Raw input

Screenshot_20210323-055501__01

<!-- gh-comment-id:804496432 --> @liyasthomas commented on GitHub (Mar 23, 2021): @Reflex-Gravity so, when you choose request method as `POST`, `PUT`, or `DELETE` you can add request body from request section. And it can be done in two ways. Key-value pairs and Raw input. This feature enable syncing both of them. Whenever you add a key-value pair - it should reflect in Raw input and when you add a Raw input (JSON object) it should reflect in key-value pair. 1. Choose `POST` request method 2. Change URL to `https://httpbin.org/post` 3. Add request body / raw input 4. Send **Key-value pair** ![Screenshot_20210323-055221__01](https://user-images.githubusercontent.com/10395817/112074961-7a205e00-8b9d-11eb-818f-cb1cc832dc63.jpg) **Raw input** ![Screenshot_20210323-055501__01](https://user-images.githubusercontent.com/10395817/112075004-915f4b80-8b9d-11eb-8755-f384bfcb5c8f.jpg)
Author
Owner

@Reflex-Gravity commented on GitHub (Mar 24, 2021):

In the key:value view, what if its a nested JSON, should I set the 2nd level JSON as a value to the key?

<!-- gh-comment-id:805794006 --> @Reflex-Gravity commented on GitHub (Mar 24, 2021): In the key:value view, what if its a nested JSON, should I set the 2nd level JSON as a value to the key?
Author
Owner

@liyasthomas commented on GitHub (Mar 24, 2021):

That won't be a desired behaviour. If there's a 2nd level array, there's chance and probability of 3rd and 4th
level arrays. I guess we can only sync key-value pairs with simple JSON object and vice versa. If the raw JSON has nested arrays - I would not recommend using it in key value pairs.

Would like to know what @kotx think about this. Anyways @Reflex-Gravity you can just omit nested JSON for now.

<!-- gh-comment-id:805796883 --> @liyasthomas commented on GitHub (Mar 24, 2021): That won't be a desired behaviour. If there's a 2nd level array, there's chance and probability of 3rd and 4th level arrays. I guess we can only sync key-value pairs with simple JSON object and vice versa. If the raw JSON has nested arrays - I would not recommend using it in key value pairs. Would like to know what @kotx think about this. Anyways @Reflex-Gravity you can just omit nested JSON for now.
Author
Owner

@kotx commented on GitHub (Mar 24, 2021):

Would like to know what @kotx think about this.

This sounds good! It would be ideal for the JSON to be preserved when converted to key-value pairs, but seeing as they are just key-value pairs I think it is fine. There should probably be a warning before conversion though.

<!-- gh-comment-id:805897519 --> @kotx commented on GitHub (Mar 24, 2021): > Would like to know what @kotx think about this. This sounds good! It would be ideal for the JSON to be preserved when converted to key-value pairs, but seeing as they are just key-value pairs I think it is fine. There should probably be a warning before conversion though.
Author
Owner

@liyasthomas commented on GitHub (Mar 25, 2021):

@kotx does this deploy preview fits your use case: https://deploy-preview-1562--hoppscotch.netlify.app/

<!-- gh-comment-id:806395177 --> @liyasthomas commented on GitHub (Mar 25, 2021): @kotx does this deploy preview fits your use case: https://deploy-preview-1562--hoppscotch.netlify.app/
Author
Owner

@kotx commented on GitHub (Mar 25, 2021):

@kotx does this deploy preview fits your use case: https://deploy-preview-1562--hoppscotch.netlify.app/

Yes, that is excellent.

<!-- gh-comment-id:806871376 --> @kotx commented on GitHub (Mar 25, 2021): > @kotx does this deploy preview fits your use case: https://deploy-preview-1562--hoppscotch.netlify.app/ Yes, that is excellent.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
starred/hoppscotch#463
No description provided.