starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-25 16:55:59 +03:00

[GH-ISSUE #1029] ENV Variables in request highlighting #363

New issue

Closed

opened 2026-03-16 14:54:18 +03:00 by kerem · 9 comments

kerem commented

2026-03-16 14:54:18 +03:00

Owner

Originally created by @NicOfNoomers on GitHub (Jul 27, 2020).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1029

Originally assigned to: @AndrewBastin on GitHub.

Is your feature request related to a problem? Please describe.
Trying to use environment variables is pretty difficult, and we never know if a variable is successfully attached to the request

Describe the solution you'd like
If there was some kind of checking with underline or changing text color it would be much easier to identify wrong env. variables

Describe alternatives you've considered
Insomnia Rest does smth like this, as shown in the screenshot

Additional context
Attached Screenshots

Originally created by @NicOfNoomers on GitHub (Jul 27, 2020). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/1029 Originally assigned to: @AndrewBastin on GitHub. **Is your feature request related to a problem? Please describe.** Trying to use environment variables is pretty difficult, and we never know if a variable is successfully attached to the request **Describe the solution you'd like** If there was some kind of checking with underline or changing text color it would be much easier to identify wrong env. variables **Describe alternatives you've considered** Insomnia Rest does smth like this, as shown in the screenshot **Additional context** Attached Screenshots ![image](https://user-images.githubusercontent.com/19762533/88581142-672cac80-d055-11ea-96bf-0ad7eccef99f.png)

kerem

2026-03-16 14:54:18 +03:00

closed this issue
added the
feature

good first issue

major

hacktoberfest
labels

kerem commented

2026-03-16 14:54:34 +03:00

Author

Owner

@sukheja-varun commented on GitHub (Aug 14, 2020):

I totally agree, in Insomnia it hardly took any time to figure out how env variables work but in postwoman, it is a bit difficult.
I have created an env with few variables but still not able to figure out how to make any env active.

@sukheja-varun commented on GitHub (Aug 14, 2020): I totally agree, in Insomnia it hardly took any time to figure out how env variables work but in postwoman, it is a bit difficult. I have created an env with few variables but still not able to figure out how to make any env active.

kerem commented

2026-03-16 14:54:39 +03:00

Author

Owner

@liyasthomas commented on GitHub (Aug 15, 2020):

Got it. Since envs are used inline inside an input box (URL field), it's quite hard to list / highlight registered envs from input. I tried to parse URL input with some regex to show registered envs in a tooltip but had no luck with it. Will try another method. Let me know if there's any UI wise implementation that could tackle this. May be like auto-complete for envs?

@liyasthomas commented on GitHub (Aug 15, 2020): Got it. Since `envs` are used inline inside an input box (`URL` field), it's quite hard to list / highlight registered envs from input. I tried to parse `URL` input with some regex to show registered envs in a tooltip but had no luck with it. Will try another method. Let me know if there's any UI wise implementation that could tackle this. May be like auto-complete for envs?

kerem commented

2026-03-16 14:54:44 +03:00

Author

Owner

@gordolio commented on GitHub (Sep 10, 2020):

Auto-complete is a start, but a custom component that allows you to choose more than just environment variables would be better, I think. Here is an example from the program "Paw".

It auto-completes known environment variables and places them as a "badge".
Screen Shot 2020-09-10 at 8 24 45 AM

Here's an example of it grabbing the a jwt token from a login response using a jq filter.
Screen Shot 2020-09-10 at 8 39 21 AM-2

I know how I'd create something like this in React. I'd have a special input component that would have a dual renderer. One function would render how it should appear in the user-interface. The second render function would render how it should be used in a request. The underlying storable data would be an array of different types of blocks (RawStringBlock, EnvironmentVariableBlock, ResponseParsedBodyBlock, etc...). Then when you click the badge you'd have a popover for changing that particular block.

I think it could be done in a similar way in vue.

@gordolio commented on GitHub (Sep 10, 2020): Auto-complete is a start, but a custom component that allows you to choose more than just environment variables would be better, I think. Here is an example from the program "Paw". It auto-completes known environment variables and places them as a "badge". <img width="400" alt="Screen Shot 2020-09-10 at 8 24 45 AM" src="https://user-images.githubusercontent.com/143153/92736296-c1e94180-f33f-11ea-9be7-c383d4c1b0c3.png"> Here's an example of it grabbing the a jwt token from a login response using a [jq](https://stedolan.github.io/jq/) filter. <img width="400" alt="Screen Shot 2020-09-10 at 8 39 21 AM-2" src="https://user-images.githubusercontent.com/143153/92739763-d7139f80-f342-11ea-89ef-af14ac720753.png"> I know how I'd create something like this in React. I'd have a special input component that would have a dual renderer. One function would render how it should appear in the user-interface. The second render function would render how it should be used in a request. The underlying storable data would be an array of different types of blocks (`RawStringBlock`, `EnvironmentVariableBlock`, `ResponseParsedBodyBlock`, etc...). Then when you click the badge you'd have a popover for changing that particular block. I think it could be done in a similar way in vue.

kerem commented

2026-03-16 14:54:49 +03:00

Author

Owner

@liyasthomas commented on GitHub (Sep 10, 2020):

That's great input. Visually, this is something I'd in mind. Let me dig deep into this approach. Will ping you in need of any help ;)

@liyasthomas commented on GitHub (Sep 10, 2020): That's great input. Visually, this is something I'd in mind. Let me dig deep into this approach. Will ping you in need of any help ;)

kerem commented

2026-03-16 14:54:54 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Sep 10, 2020):

Umm, I am actually working on the implementation of this. Along with a overhaul of the URL parsing system. Just that all new feature work is paused for a while to work on tests and improving the stability and reliability until the Teams feature has rolled out.

@AndrewBastin commented on GitHub (Sep 10, 2020): Umm, I am actually working on the implementation of this. Along with a overhaul of the URL parsing system. Just that all new feature work is paused for a while to work on tests and improving the stability and reliability until the Teams feature has rolled out.

kerem commented

2026-03-16 14:54:59 +03:00

Author

Owner

@AndrewBastin commented on GitHub (Sep 18, 2020):

Update: Environment variable highlighting is now implemented in the URL field as an Experiment. You can enable the experiment in the settings page. It is not stable yet, but it is on track to be stable soon.

Closing this issue meanwhile.

@AndrewBastin commented on GitHub (Sep 18, 2020): Update: Environment variable highlighting is now implemented in the URL field as an Experiment. You can enable the experiment in the settings page. It is not stable yet, but it is on track to be stable soon. Closing this issue meanwhile.

kerem commented

2026-03-16 14:55:05 +03:00

Author

Owner

@yoerriwalstra commented on GitHub (Nov 20, 2020):

I feel a bit dumb for having to ask this, but what is the syntax for using environment variables in your URLs?

I have an environment with variable base_url in it, but I can't get my requests to work with it... I couldn't find any examples showcasing this feature, so I had to guess how it should work. I read the discussion in #147 which suggested that Hoppscotch would, like Postman, support nunchucks syntax for environment variables. I've tried different variations, but without success.

Example:

GET {{ environment.base_url }}/companies
GET {{ variables.base_url }}/companies
GET {{ base_url }}/companies

@yoerriwalstra commented on GitHub (Nov 20, 2020): I feel a bit dumb for having to ask this, but what is the syntax for using environment variables in your URLs? I have an environment with variable `base_url` in it, but I can't get my requests to work with it... I couldn't find any examples showcasing this feature, so I had to guess how it should work. I read the discussion in #147 which suggested that Hoppscotch would, like Postman, [support nunchucks syntax for environment variables](https://github.com/hoppscotch/hoppscotch/issues/147#issuecomment-542352975). I've tried different variations, but without success. Example: ``` GET {{ environment.base_url }}/companies GET {{ variables.base_url }}/companies GET {{ base_url }}/companies ```

kerem commented

2026-03-16 14:55:10 +03:00

Author

Owner

@liyasthomas commented on GitHub (Nov 20, 2020):

@yoerriwalstra

Ex: <<variable_name>>

Use environment variables enclosed in double angular brackets (<<>>) anywhere in request section.

@liyasthomas commented on GitHub (Nov 20, 2020): @yoerriwalstra Ex: `<<variable_name>>` Use environment variables enclosed in double angular brackets (<<>>) anywhere in request section.

kerem commented

2026-03-16 14:55:15 +03:00

Author

Owner

@yoerriwalstra commented on GitHub (Nov 20, 2020):

Thanks for the quick reply! And the awesome work you guys are doing :D

@yoerriwalstra commented on GitHub (Nov 20, 2020): Thanks for the quick reply! And the awesome work you guys are doing :D