DEV Community

Preecha
Preecha

Posted on

How to Use Apidog Inside VS Code

TL;DR

The Apidog VS Code extension lets you send API requests, manage collections, run tests, and share workspaces with your team without leaving your editor.

Try Apidog today

Setup takes under five minutes:

  1. Install the Apidog extension in VS Code.
  2. Sign in to your free Apidog account.
  3. Open your workspace from the VS Code sidebar.

Apidog is a free, all-in-one API development platform. The VS Code extension connects your editor to your Apidog workspace so you can test APIs, write docs, and collaborate with your team without switching windows.

Introduction

Apidog started as a desktop app for API design, testing, and documentation. The VS Code extension brings the same workspace into your editor.

The extension does not duplicate Apidog. It connects to your existing workspace, so your collections, environments, and test cases stay in sync across VS Code, the desktop app, and the web interface.

This guide walks through the full workflow:

  • Installing the extension
  • Signing in to your workspace
  • Browsing collections
  • Sending requests
  • Editing and creating requests
  • Running tests
  • Working with teammates

Step 1: Install the Apidog VS Code extension

Open VS Code and go to the Extensions view:

  • Windows/Linux: Ctrl + Shift + X
  • macOS: Cmd + Shift + X

Search for:

Apidog
Enter fullscreen mode Exit fullscreen mode

Look for the extension published by Apidog Inc. with the Apidog logo.

Click Install.

After installation, VS Code adds an Apidog icon to the Activity Bar on the left side. Click it to open the Apidog sidebar.

Step 2: Sign in to your Apidog account

In the Apidog sidebar, click Sign In.

A browser tab opens to Apidog’s authentication page.

If you already have an account, sign in with your email and password. If you do not have an account, click Sign Up. The free tier requires only an email address and no credit card.

After authentication, the browser asks you to return to VS Code. Click Open VS Code, or switch back manually.

VS Code completes the authentication flow and loads your Apidog workspace in the sidebar.

After sign-in, the sidebar shows:

  • Your workspace name
  • Collections as folders
  • Requests inside each collection
  • Environment selector at the top of the panel

Step 3: Navigate collections

The Apidog sidebar mirrors the collection structure from your Apidog workspace.

To browse requests:

  1. Expand a collection.
  2. Expand any nested folders.
  3. Click a request to open it in the editor area.

Requests include HTTP method badges, such as:

  • GET
  • POST
  • PUT
  • DELETE

Search requests

Use the search input at the top of the Apidog panel to filter by:

  • Request name
  • URL
  • HTTP method

This is useful when your workspace contains many collections or deeply nested folders.

Switch workspaces

If your Apidog account belongs to multiple workspaces, use the workspace selector at the top of the panel.

You can switch between personal, team, or project-specific workspaces without leaving VS Code.

Step 4: Send API requests

Click a request in the sidebar to open it in the editor.

The request tab includes:

  • Method selector
  • URL field
  • Send button
  • Params tab
  • Headers tab
  • Body tab
  • Auth tab
  • Pre-request Scripts tab
  • Tests tab
  • Settings tab

To send a request:

  1. Confirm the HTTP method and URL.
  2. Add required query parameters in Params.
  3. Add headers in Headers.
  4. For POST, PUT, or PATCH requests, configure the body in Body.
  5. Click Send.

The response appears in the lower section of the tab.

The response view shows:

  • Status code
  • Response time
  • Response size
  • Response body
  • Response headers
  • Cookies
  • Test results

JSON and XML responses are shown with syntax highlighting.

Use environments

Use the environment selector in the Apidog panel to set the active environment.

For example, a request URL can use variables:

{{base_url}}/users/{{user_id}}
Enter fullscreen mode Exit fullscreen mode

Headers can also use variables:

Authorization: Bearer {{token}}
Enter fullscreen mode Exit fullscreen mode

Switch environments to run the same request against different targets, such as:

  • Development
  • Staging
  • Production

This avoids hardcoding URLs or credentials in individual requests.

Step 5: Edit and create requests

You can edit existing requests directly in VS Code. Changes sync back to your Apidog workspace.

To create a new request:

  1. Right-click a collection or folder in the sidebar.
  2. Select New Request.
  3. Configure the method, URL, headers, params, auth, and body.
  4. Save with:
    • Windows/Linux: Ctrl + S
    • macOS: Cmd + S

The new request appears in the sidebar and becomes available in:

  • Apidog desktop app
  • Apidog web interface
  • Teammates’ VS Code extensions

Organize requests

Right-click a request or folder to access actions such as:

  • Rename
  • Move
  • Duplicate
  • Delete

You can also reorder items with drag and drop inside the sidebar.

Step 6: Run API tests

Apidog supports test assertions that run after a response is received.

Open a request and go to the Tests tab. Add JavaScript-based assertions like this:

pm.test("Status is 200", function () {
  pm.response.to.have.status(200);
});

pm.test("Response contains user id", function () {
  const json = pm.response.json();
  pm.expect(json.id).to.be.a("number");
});
Enter fullscreen mode Exit fullscreen mode

Click Send.

After the request completes, the response section shows test results, including:

  • Passed assertions
  • Failed assertions
  • Error messages for failures

Run a collection

To run multiple requests:

  1. Right-click a collection or folder.
  2. Select Run Collection.
  3. Choose the environment.
  4. Configure options such as iterations and request delay.
  5. Click Run.

The runner executes requests in sequence and shows pass/fail results for each request’s assertions.

Step 7: Use the VS Code extension with the desktop app

The VS Code extension and desktop app use the same Apidog workspace. There is no primary version. They are two clients for the same data.

Here are practical workflows for using both.

Design in desktop, test in VS Code

Use the Apidog desktop app to:

  • Define API schemas
  • Write documentation
  • Configure mock servers
  • Manage large environment sets

Then use the VS Code extension to:

  • Send requests
  • Validate responses
  • Write test assertions
  • Debug API calls while coding

Review API changes with your team

A backend developer can update an endpoint in the desktop app.

A frontend developer can open VS Code and immediately see the updated request, parameters, and environment configuration in the Apidog extension.

No JSON export or manual import is required.

Test APIs while writing code

When consuming an API from application code, you can keep the request next to your source files:

  1. Open the Apidog sidebar.
  2. Find the endpoint.
  3. Send the request.
  4. Inspect the response shape.
  5. Return to your code.

This keeps API testing inside your development workflow.

Use the desktop app for heavier workspace tasks

The desktop app is better suited for larger configuration tasks, such as:

  • API schema design
  • Mock server setup
  • API documentation publishing
  • Managing many environments

The VS Code extension is best for day-to-day request execution and test writing while coding.

Step 8: Share your workspace with teammates

To collaborate with other developers, invite them to your Apidog workspace.

From the Apidog web interface or desktop app:

  1. Open workspace settings.
  2. Invite teammates by email.
  3. Wait for them to accept the invitation.

After they install the VS Code extension and sign in, they will see the same workspace collections in their sidebar.

Any request they add or modify syncs through Apidog’s cloud and appears for everyone.

The free tier supports up to three users. You do not need to manage shared JSON files, Git operations, exports, imports, or merge conflicts for collection changes.

FAQ

Does the Apidog VS Code extension work without the desktop app?

Yes. The extension is a complete client for your Apidog workspace. You do not need to install the desktop app to use the extension.

Can I use the Apidog VS Code extension offline?

You can view and edit cached collections while offline.

Sending requests to external APIs requires internet access. Syncing changes also requires internet access.

Full offline behavior depends on the cache state of your Apidog workspace.

How do I import existing Thunder Client or Postman collections?

Use the Apidog desktop app or web interface.

Go to Import and select the appropriate format, such as:

  • Thunder Client JSON
  • Postman collection v2.1
  • OpenAPI

After import, the collections appear in your workspace and are accessible from the VS Code extension.

Is the VS Code extension the same as creating a new project in Apidog?

No.

The extension connects to an existing Apidog workspace. You create and manage workspaces from the desktop app or web interface.

The VS Code extension lets you work inside those workspaces from VS Code.

Can multiple people open the same collection at the same time?

Yes.

The extension does not lock collections for editing. If two users edit the same request at the same time, the last save wins.

For coordinated editing, use Apidog’s collaboration features in the desktop app.

Does the extension support environment variable autocomplete?

Yes.

When you type {{ in a URL or parameter field, the extension suggests variables from the active environment.

This helps avoid typos in variable names.

Final thoughts

The Apidog VS Code extension is useful when your API development already happens inside VS Code.

Once installed, your collections, environments, requests, and tests are available from the same editor where you write application code. That makes it easier to send requests, validate responses, and collaborate with teammates without switching tools.

Top comments (0)