usebruno/bruno

Make variable values more "accessible"

Open

#4926 opened on Jun 17, 2025

View on GitHub
 (1 comment) (3 reactions) (0 assignees)JavaScript (43,787 stars) (2,403 forks)batch import
enhancementgood first issuehas-pr

Description

I have checked the following:

  • I've searched existing issues and found nothing related to my issue.

This feature

  • blocks me from using Bruno
  • would improve my quality of life in Bruno
  • is something I've never seen an API client do before

Describe the feature you want to add, and how it would change your usage of Bruno

The variable overview page (top right eye icon) displays the environment and run-time variables, which is great for an overview.

Lots of times the variable values could be used elsewhere, make it easier to obtain the values:

  • remove the double quote character around them - we will remove it anyway and if type (string, number, etc) makes a difference, maybe show it with an icon or different colors
  • add "copy to clipboard" button for each of them - even if you leave the double quotes for strings, this button would copy the literal value, no quotes

Mockups or Images of the feature

Image

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeFamiliarity with clipboard API
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
Locate the variable overview component (likely in the codebase under a path like `packages/bruno app/src/components/VariableOverview`). The component currently displays variable values with double quotes around strings; modify the rendering to remove the quotes and differentiate types visually (e.g., icon or color). Add a 'copy to clipboard' button for each value using the `navigator.clipboard.writeText()` method. Check the existing icon library for a copy icon. Test the changes locally.