Skip to content

feat(reactotron-core-ui): add copy button for nested objects in API response #1597

Open
Deepakmukka1 wants to merge 1 commit intoinfinitered:masterfrom
Deepakmukka1:feat/treeview-copy-nested-objects
Open

feat(reactotron-core-ui): add copy button for nested objects in API response #1597
Deepakmukka1 wants to merge 1 commit intoinfinitered:masterfrom
Deepakmukka1:feat/treeview-copy-nested-objects

Conversation

@Deepakmukka1
Copy link

Please verify the following:

  • yarn build-and-test:local passes
  • I have added tests for any new features, if relevant
  • README.md (or relevant documentation) has been updated with your changes

Describe your PR

Adds a Copy button for nested objects in the TreeView component inside the Response Body tab.

This allows users to quickly copy the JSON representation of any nested object in an API response without manually selecting or expanding large sections of the tree.


Motivation

Previously, Reactotron only allowed copying top-level values.
When API responses contained deeply nested objects, users had to manually expand the tree and select the text to copy.

This change enables one-click copying of any nested object, improving the developer experience when inspecting API responses.


Implementation

  • TreeView/index.tsx

    • Accepts an optional copyToClipboard prop
    • Renders a ButtonCopy next to object-type nodes (e.g. {3})
    • Copies JSON.stringify(data, null, 2) when clicked
    • Uses event.stopPropagation() so clicking the button does not toggle the node
  • ContentView/index.tsx

    • Passes copyToClipboard down to TreeView
  • ApiResponseCommand/index.tsx

    • Provides the existing copyToClipboard handler to ContentView for the Response Body tab

Test Plan and Preview

  1. Open Reactotron and trigger an API request with nested objects
  2. Navigate to the Response Body tab
  3. Verify a Copy button appears next to nested objects
  4. Click the button and confirm the prettified JSON is copied to the clipboard
  5. Ensure clicking Copy does not expand/collapse the tree node
image

   nested objects in TreeView

   Allow users to copy nested object JSON from the TreeView
   component via a
   Copy button that appears next to object type indicators. The
   copyToClipboard callback is threaded through ContentView and
   TreeView to
   the ApiResponseCommand response body tab.
@Deepakmukka1
Copy link
Author

Deepakmukka1 commented Mar 7, 2026

Hey @silasjmatson @joshuayoes could you please let me know if this feature would be useful? I often found myself wanting to copy just a nested object in a large API response, so I thought of adding this. If it makes sense to include, I’d really appreciate a review on the PR. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants