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

[Uwith]

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:

• Left Panel: Editable text area for users to input or modify JSON data.
• Right Panel: Continuously updates the formatted JSON with a delay after changes are made in the input panel.

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]

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]

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]

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

[hw0603]

I completely agree that this feature is necessary.

In #1273, another user has already created an issue, but it seems that it has not been communicated clearly what the issue is.

Currently, when cursor focus is out of the input window, the only way to reactivate the editor is to click on the end of the last row of JSON. And even in this case, you can only move the cursor using the keyboard arrow key, and the interaction through the mouse pointer (drag, cursor movement) does not work.

This is a common problem not only in JSON formatter, but also in all tools with code editors.

https://github.com/user-attachments/assets/0d50472e-2097-46de-b1ab-a2ba3765f6db

[MatanNoachMathlabs]

Hi, I would like to update that I see this issue on any type of textbox:

• Input/Output
• JSON/SQL/XML formatters
• Encoders/Decoders

Is there any update on this case? I feel like this is more of a bug than a requested feature or enhancement.

[Uwith]

The latest version has not been updated on this yet. I am considering trying to solve it myself over the weekend, but I only know javabase, hahaha.