Looking to develop and test your API? Hoppscotch is a great open-source tool, and I’ll explain how to set it up. Then I’ll go into the APIs you can test with Hoppscotch and how to test them. After that, I’ll compare it to two of its alternatives: OpenAPI DevTools and Postman.

👁 Hoppscotch Vs Postman: A Guide To API Testing

How to set up Hoppscotch

There are multiple ways to set up Hoppscotch, but in this section, I’ll cover the desktop application and the web client because they’re most likely what you’ll interact with.

The desktop application is by far the easiest to set up. All you need to do is:

1. Go to the Hoppscotch client download page
2. Select your operating system
3. Click the download option that matches your computer architecture:

👁 Downloading Hoppscotch Client

After downloading the file, follow the installation process for your operating system, and then you should see the desktop application in your app library.

Setting up Hoppscotch web client

On the Hoppscotch client download page, you may have noticed the “Web App” option listed alongside the operating system options. Clicking the “Web App” option, and the “Open Web App” button that shows up will open the web client in a new tab.

With its default settings, the web client only allows you to send requests to APIs that are publicly available on the internet. This means that trying to send requests to a locally hosted API (like localhost and 127.0.0.1) would display this error message:

👁 Hoppscotch Error Message Example

This happens because, by default, the web app’s interceptor is set to Hoppscotch’s proxy service, which is hosted at https://proxy.hoppscotch.io/ and doesn’t have access to APIs that aren’t accessible on the internet.

To allow access to locally-hosted APIs, you need to download the Hoppscotch browser extension and set it as the interceptor. You can only install the extension Chrome-based and Firefox-based browsers, so that’s something to keep in mind.

To install the browser extension, follow these steps:

1. Select the Settings tab on the left navigation pane
2. Scroll down to the Interceptor section
3. Select the Browser extension option
4. Click the option for your browser and you’ll be taken to the extension page in your browser’s extension store
5. Finally, install the extension and refresh the web client

👁 Install Hoppscotch Extension And Refresh Web Client

After refreshing the web client, you should see the text beside the Browser extension option change from Not Reported to the extension’s version number.

With the extension installed, you can now send requests to locally available APIs and publicly available ones. In the next section, I’ll cover the types of APIs you can test with Hoppscotch and how to test them.

Testing APIs with Hoppscotch

In this section I’ll cover how to test REST, GraphQL, and WebSocket APIs with Hoppscotch. To make it easy, I made a GitHub repo with the code for the APIs.

Testing REST APIs

REST APIs are built to allow web applications to create, read, update, and delete data on the backend.

Let’s imagine, for example, a basic RESTful API with these features:

Request method – Endpoint	Request	Response	Description
GET – /message	No content	“Hello, world”	Respond with a message
POST – /message	“World, Hello”	“World, Hello”	Change the message that it would respond with
PUT – /message	“, World”	“World, Hello, World”	Append a text to the message
DELETE – /message	No content	“”	Clear the text

In REST APIs, the actions of creating, reading, updating, and deleting data are represented using the POST, GET, PUT, and DELETE request methods respectively.

In our API, POST, and PUT requests to the /message endpoint change and add texts (respectively) to the message that a GET request to /message responds with, and a DELETE request allows the text to be cleared.

To send a GET request to the /message, you first need to make sure you’re in the REST tab on the left navigation pane:

👁 GET Request in Hoppscotch Part 1

Then change the URL of the endpoint to the text box and click Send:

👁 GET Request in Hoppscotch Part 2

If our API is hosted at http://127.0.0.1:5000, the endpoint’s URL would be http://127.0.0.1:5000/message.

Sending the DELETE request is similar to sending the GET request. To send the DELETE request, change the request method option from GET to DELETE and click Send:

👁 DELETE Request in Hoppscotch

Send a POST request to the endpoint:

1. Select POST in the request method option
2. Go to the Body tab
3. Select “text/plain” as the content type
4. Write the request body (e.g. “Hi, world”)
5. Click send

👁 POST Request In Hoppscotch

Sending the PUT request is similar to the POST request. All you need to do is set the request method option to PUT instead:

👁 You can change the text if you want to.

These four request methods cover majority of the operations that are usually carried out with REST APIs, and now you know how to send requests to them in Hoppscotch. Now, let’s now cover the next type of APIs you can test with Hoppscotch: GraphQL APIs.

Testing GraphQL APIs

To keep the operations similar to the basic RESTful API I described in the last section, I’ll be making this schema of the GraphQL API:

type Query {
 message: String # get the message
}

type Mutation {
 changeMessage(message: String): String # change the content of the message
 addText(text: String): String # append a text to the message
 deleteText: String # clear the message
}

To make requests to GraphQL APIs, you first need to be in the GraphQL tab:

👁 GraphQL Tab

Once you’re in the GraphQL tab follow these steps to make requests to the API:

1. Write the API’s URL into the text bar. If we’re hosting the API on http://127.0.0.1:8000/graphql, this would be the URL we’re inserting.
2. Click Connect
3. Write your query or mutation into the query text box. For our GraphQL API, our query could be any of the following:

# 1.
query {
 message
}

# 2.
mutation {
 changeMessage(message: "Hi, world") # change text to "Hi, world"
}

# 3.
mutation {
 deleteText
}

# 4.
mutation {
 addText(message: ", and all") # Changes "Hi, world" to "Hi, world, and all"
}

After writing the query or mutation, click Run to send it API. Here’s a visual demonstration of the steps:

👁 Send API With Run

Now you’ve seen how to test GraphQL APIs with Hoppscotch. In the next section, I’ll go into how to test a real-time WebSocket API with Hoppscotch.

Testing WebSocket

Testing WebSocket APIs with Hoppscotch is straightforward. All you need to do is:

1. Make sure you’re in the Realtime tab in the left navigation pane
2. Make sure you’re in the WebSocket tab on the Realtime page
3. Insert the URL to the WebSocket server in the text box
4. Click Connect to connect to the server

If the connection is successfully established, you should see a “Connected to ” message in the Log section. Any message that the server sends will also be displayed in the Log section. You will also be able to send messages to the server by writing texts to send to the server in the Message box and clicking the Send button.

Here’s an animation to show these processes:

👁 Writing Texts To Send To Server

In the GitHub repo for the APIs, the WebSocket API will be hosted at http://127.0.0.1:8080. It sends the current date and time every second and stops when you send the message “end” to it.

What alternatives are there to Hoppscotch?

The best way to understand Hoppscotch better is to look at how it compares with other tools in the same category. So, in this section, I’ll give an overview of two popular alternatives: Postman and OpenAPI DevTools.

Postman

Postman is a platform for building and testing APIs like Hoppscotch. However, unlike Hoppscotch, Postman isn’t open-source, but it provides extra functionalities that aren’t available in Hoppscotch. However, some of the functionalities require following one of their subscription plans.

Some of the features you get with Postman that you don’t get in Hoppscotch are:

• Creating mock servers (limited in the free plan)
• Simulating real-world usage and load-testing APIs
• Writing and publishing API documentation

But the features that you get with Hoppscotch that you can’t get in Postman, or are unavailable or limited in the free plan, are:

• An unlimited amount of workspaces, collections, and collaborators
• Self-hosting your instance of the application

The choice between Hoppscotch and Postman depends on if you need any of the features that are only available in Postman. If you don’t need any of the extra features, the fact that Hoppscotch is open-source and gives you more flexibility makes it a great choice.

OpenAPI DevTools

OpenAPI DevTools is a Chrome extension that allows you to record and monitor how web applications interact with their APIs. Both OpenAPI DevTools and Hoppscotch do similar things, but in in different ways.

Which of these two tools you should use depends on what you need to do. For example, if you’re building or testing your APIs, you might prefer to use Hoppscotch because, unlike OpenAPI DevTools, you can craft requests to send them to APIs to see what they do. Hoppscotch and Postman also allow you to run automated tests, unlike OpenAPI DevTools, which doesn’t.

But with OpenAPI DevTools, you can only view how a web application interacts with APIs, which makes it useful in understanding the flow of a website, which in turn helps with debugging and documentation.

OpenAPI DevTools also have the benefit of generating OpenAPI Specification, which is a standardized format for describing and documenting REST APIs.

However, the fact that both Hoppscotch and OpenAPI DevTools do things in different ways means that they can be used together. So they’re more like complementary tools than complete alternatives to each other.

What’s next?

Hoppscotch makes developing and testing APIs easy. You can learn how to import your data by taking a look at its importer documentation page.

If you want to learn more about OpenAPI DevTool and how it does things differently from Hoppscotch or Postman, you can go ahead and read my previous guide on exploring and testing API behavior with OpenAPI DevTools.

👁 Image