Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design. The source code is not open source. You can report any Bugs Or Feature requests here.
- Voted as #10 Product of the day on Product Hunt
- Website - www.thunderclient.io
- Follow Us for updates - Twitter, LinkedIn
- Read Launch Blog Post on Medium
- How to Use
- Tech
- Features
- Team Features
- Testing
- Set Environment Variable
- Auth
- System Variables
- Code Snippet
- Proxy
- Import/Export
- Run Collection
- Keyboard Shortcuts
- Contribution
- Privacy
- Install the Extension, Click Thunder Client icon on the Action Bar.
- From Command Palette (Cm+Sh+P) type
thunder
and selectThunder Client: New Request
- Video: youtube.com/watch?v=NKZ0ahNbmak
- Thunder Client is built with Javascript, Flexbox, Typescript, Ace Editor, Got, Nedb. No javascript or bootstrap frameworks used.
- Send http/https API request using any of the methods GET, POST, PUT, DELETE, PATCH, HEAD and OPTIONS.
- The Response data supports syntax hightlighting using ACE Editor which can handle large responses easily, you can also view response in Full Screen
- History, Collections and Environment Tabs in the Action Bar View for quick access.
- Authentication: Basic Auth, Bearer Token and OAuth 2.0 are supported.
- Post Body: For Post Content-Type header will be automatically set.
- Graphql: Send Graphql Query & Variables has syntax highlighting support.
- Environment Variables: Syntax highlighting support for environment variables just use
{{variable}}
syntax in most fields - Scriptless Testing: Test APIs with GUI based functionality, no scripting knowledge needed.
- Themes: The extension also supports VS Code themes.
The team features are useful to share requests with team by saving data in git project. The feature is still in Beta, based on feedback I will improve it.
WARNING: The Environment file which stores the secrets also saved in the same git folder, see Note: 1 below.
Integrate with the Git project is now supported, 2 vscode settings options provided
- Load From Project: select this option when you like to spilt data per project, it will create
thunder-tests
folder in workspace. This loads the data when you open the project in vscode.- Now supports relative path to workspace directory (Optional). Use setting
Workspace Relative Path
to specify the relative path. - Make sure the
Workspace Relative Path
setting is Workspace setting not User setting. - Example 1: Relative Path to save in child folder of workspace is
FolderName
orChild/FolderName
- Example 2: Relative Path to save in Parent folder of workspace is
../
- Now supports relative path to workspace directory (Optional). Use setting
- Custom Location: select this option when you like save all the data in one location, enter the full folder path to save the data.
- Now supports relative path to Home directory. use $HOME prefix e.g
$HOME/Documents/ProjectName
- Now supports relative path to Home directory. use $HOME prefix e.g
- Note 1: Environment file: if you dont want to save environment file to git server, use .gitignore to ignore the file thunderEnvironment.db
- Note 2: Files changes are not detected by the extension yet, if you pulled changes from git, click Reload option from collection Tab to update data.
- Note 3: Please restart vscode after updating settings.
- We need to write a lot of boilerplate code in Postman and other clients to do basic testing using scripting like status code equal 200. So I implemented GUI based tests, where you select couple of dropdowns to do most standard tests very easily without any scripting knowledge.
Setting environment variables is supported in the Tests tab. Follow the steps below:
- Create an environment first from the Env tab if it's not already created.
- In the Tests tab, select the
Set Env Variable
dropdown option. (The action will automatically becomesetTo
.) - Enter the appropriate source of variable value in the left input box:
- Header: Enter
header.headerName
whereheaderName
is the response header name. - Cookie: Enter
cookie.cookieName
wherecookieName
is the response cookie name. - JSON Response: Enter
json.propertyName
wherepropertyName
is the JSON key in the response body. - Text Response: Enter the
text
keyword. This sets the entire response body to the variable.
- Header: Enter
- In the value input, enter a variable name in the
{{variableName}}
format.- When it matches a variable name in Env, it will turn green. If the variable doesn't exist, it will be created.
- Now execute the request. You will see the variable value set in the Env tab.
- You can use scope to control which environment variable to set the value explicitly
- To set variable in global environment use
{{variable, global}}
- To set variable in active environment use
{{variable, active}}
-
OAuth 2.0 when grant type is Authorization Code the callback url needs to be entered into your oauth server trusted redirect url list.
-
OAuth authentication credentials are sent via header or body, please select appropriate one based on your server requirement.
-
- Provide ssl certificate paths for auth, using relative path to workspace or absolute paths.
- Use the Certificates vscode setting, see example below
"thunder-client.certificates": [ { "host": "thunderclient.io", "certPath": "ssl/cert.pem", "keyPath": "ssl/keyfile.key", "pfxPath": "ssl/pfx.p12", "passphrase": "test" }, { "host": "localhost:8081", "pfxPath": "/Users/test/Documents/ssl/pfx.p12", "passphrase": "test" }, { "host": "testing.com", "certPath": "ssl/cert.pem", "keyPath": "ssl/keyfile.key" }, ]
The system variables are useful to generate random/dynamic data for use in request query params or body. The format is {{#variableName}}
- {{#guid}} - generates random uuid
- {{#string}} - generates random string
- {{#number}} - generates random number between 1 to 1000000
- Custom Range: use
{{#number, min, max}}
, e.g:{{#number, 100, 999}}
- Custom Range: use
- {{#email}} - generates random email
- {{#date}} - generates date timestamp
- Custom date format: use
{{#date, 'YYYY-MM-DD hh:mm:ss:fff'}}
, the format should be in single quote.
- Custom date format: use
- {{#dateISO}} - generates date ISO format
The code snippet generation is available for following languages. Open request view and click icon {}
to see Code Tab.
- C# - HttpClient
- cURL
- Javascipt Fetch & Axios
- PowerShell
- Python requests & http.client
The feature is open for contribution - https://github.com/rangav/thunder-codegen
- Proxy is supported using vscode proxy setting. format
http://username:password@host:port
- exclude Proxy Host List: Use this setting to exclude hosts from proxy, supports comma separated values e.g:
abc.com,xyz.com
- You can import or export Thunder Client collections and environment data.
- Currently you can import collection or Environment file from Postman 2.1.0 format. ( other file formats support soon.. ).
- Submit PR for other file formats on https://github.com/rangav/thunder-imports
- Import Curl is now supported from Activity tab. Keyboard shortcut
Cmd/Ctrl + u
- Import of .env files also supported, select
Import
from Env tab and choose .env file
- You can test multiple requests using Collection, select
Run All
option from the collection menu. - The collection runner will execute all requests and test cases and display the result.
Ctl+Shift+P
: From Command Palette- Thunder Client - New Request
- Thunder Client - Run Last Request
Cmd/Ctrl + Enter
: To execute the request.Enter
on request url to send request.Cmd/Ctrl + s
Save Request without run.Cmd/Ctrl + click
on request in Sidebar will open in new tabCmd/Ctrl + s
Environment variable view save data.Alt+Shft + f
Format Post Body data.Cmd/Ctrl + u
Import Curl
- As the project is not open source, when you submit feature request or bug, if you know the solution, please submit code sample or a sample project in node or .Net.
- Two modules are open for contribution, let me know if you like to contribute
- Code Snippet Generation
- Open API file import/export
- Basic anonymised telemetry data of extension usage is collected using vscode-extension-telemetry, No Personal or request data is collected. You can opt out using VS Code Settings details here
- There is no backend or cloud sync, all the data is stored locally on your computer.