Default Value for JSON editor

  • Goal: i'd like to set a default value for the json editor component: JSON Editor | Retool Docs

  • Steps: i currently have to work around this by setting up two json editors, one for what currently exists in our database and one for the updated value. users have to copy and paste the old value into the new one before submitting. i'd like to enable them to edit in place. the text editor component has this functionality, could we allow this for the JSON editor as well? thanks.

Hello @Karan_Kwatra ,

You can streamline this workflow using a JSON Editor component with the Editable setting enabled, allowing users to edit the default JSON value directly.

  1. Create a JSON Editor Component: Set a default JSON value for users to view and modify.

image

Add an Update Button: Attach a JavaScript query to handle updates when clicking the button.

return new Promise((resolve) => {
  console.log("Updated JSON submitted:", jsonEditor1.value);
  resolve({ success: true, data: jsonEditor1.value });
});

This setup enables users to edit the JSON in one place and submit updates efficiently, eliminating the need to copy and paste between components.

Thank You.

4 Likes