search

DevToys-app / DevToys

A Swiss Army knife for developers.
https://devtoys.app/
MIT License
27.47k stars 1.47k forks source link

Editable Input and Delayed Output for JSON Formatter（orz，extremely grateful） #1460

Open Uwith opened 1 week ago

Uwith commented 1 week ago

What improvement do you think would an existing feature or tool in DevToys?

Currently, the JSON Formatter in DevToys allows users to paste JSON strings in the left panel and view the formatted result in the right panel. However, both panels are non-editable, limiting the functionality for users who want to quickly adjust their JSON input and see the immediate formatted output.

Use Case:
As a user, I often need to make minor adjustments to the JSON input, such as adding or correcting keys/values, without having to repeatedly copy-paste from an external editor. Adding the ability to edit the input directly would save time and improve usability.

Solution/Idea

I propose enabling the left-side input panel to be editable, allowing users to modify the JSON directly within the tool. The right-side output panel can display the formatted JSON with a slight delay (e.g., 500ms) after detecting changes, ensuring smooth updates without overloading the UI.

Mock-up/Example:

Comments

Adding this functionality would make the JSON Formatter significantly more user-friendly, especially for developers working with large or complex JSON structures. The feature could include syntax highlighting for the input panel and error notifications if the input is not valid JSON.

Here is a simple illustration of the proposed workflow:

  1. User edits the JSON in the left panel.
  2. After a delay, the right panel updates to show the formatted JSON output.
  3. If the input contains errors, the tool displays an error message without breaking the editing functionality.

Looking forward to hearing your thoughts!

Uwith commented 1 week ago

I'm sorry, I just realized that he is editable.

But after the cursor leaves the input box, and then clicking on it won't select the input box.

mac mini M4 - macOS Sequoia 15.1.1

Uwith commented 1 week ago

This is the json formatting tool I used to use, I hope it can give you a reference, the

The UI of DevToys is really pleasing to the mind and body!

https://www.json.cn/#gsc.tab=0

Uwith commented 4 days ago

response_1732245193351.json Try formatting and then editing this json to see what I'm talking about，orz