Development Tool

Hoppscotch

Overview

Hoppscotch is a lightweight, browser-based API client. With PWA (Progressive Web App) support, it can be used directly from the browser without installation, while also offering offline functionality and desktop app capabilities. It combines a simple, beautiful UI with high performance and rich features, optimized for modern API development ecosystems.

Details

Hoppscotch is designed to enhance the developer experience in API development as a lightweight browser-based tool. By leveraging PWA technology, it combines the convenience of traditional desktop applications with the accessibility of web applications. Features include instant loading via service workers, offline support, and low resource consumption, enabling comfortable API development from anywhere. It comprehensively supports protocols required for modern API development, including REST APIs, GraphQL, WebSocket, Server-Sent Events, Socket.IO, and MQTT. The authentication system supports a wide range of methods including Basic, Bearer Token, OAuth 2.0, and OIDC Access Token/PKCE, making it suitable for enterprise environments. Team features include workspace sharing, real-time sync, and role-based access control, with sign-in options via GitHub, Google, Microsoft, and SSO for syncing settings and collections across devices. Practical features include code snippet generation for 10+ languages and frameworks, cURL import, proxy mode, and internationalization (i18n) support.

Advantages & Disadvantages

Advantages

• No Installation Required: Direct browser access with instant usage
• PWA Support: Offline usage, desktop app conversion, fast loading
• Lightweight & Fast: Minimal UI with low resource consumption and high performance
• Rich Protocol Support: Supports REST, GraphQL, WebSocket, MQTT, etc.
• Cross-platform: Usable anywhere with a browser
• Team Collaboration: Real-time sync and workspace sharing
• Open Source: Free to use with MIT license
• Multi-language Support: Internationalization with Japanese support
• Rich Authentication: Supports OAuth 2.0, OIDC, Bearer tokens, etc.

Disadvantages

• Browser Dependency: Subject to browser constraints
• Feature Limitations: Some features may be limited compared to desktop apps
• Network Requirements: Internet connection required for initial access
• Customization Limits: Extension capabilities limited by browser environment
• Enterprise Features: Enterprise-focused features still evolving

Reference Links

• Hoppscotch Official Site
• GitHub - hoppscotch/hoppscotch
• Hoppscotch Documentation
• Hoppscotch Cloud
• Hoppscotch Desktop Apps

Usage Examples

Basic HTTP Request

# URL field configuration
GET https://api.example.com/users/{{userId}}

# Headers configuration
Authorization: Bearer {{accessToken}}
Content-Type: application/json
Accept: application/json

# Params configuration (URL parameters)
page: 1
limit: 10
sort: created_at

# Environment variables usage
baseUrl: https://api.example.com
accessToken: your-jwt-token-here
userId: 12345

POST Request with Body Configuration

// Body (JSON)
{
  "name": "John Doe",
  "email": "[email protected]",
  "age": 30,
  "department": "engineering",
  "skills": ["JavaScript", "Python", "React"],
  "active": true
}

// Headers
Content-Type: application/json
Authorization: Bearer {{accessToken}}
X-API-Version: v2

// Pre-request Script
const timestamp = Date.now();
pw.env.set("requestTimestamp", timestamp);
pw.env.set("requestId", Math.random().toString(36).substr(2, 9));

GraphQL Queries and Mutations

# GraphQL Query
query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    id
    name
    email
    profile {
      avatar
      bio
      location
    }
    posts(first: 5) {
      edges {
        node {
          id
          title
          content
          createdAt
        }
      }
    }
  }
}

# Variables
{
  "userId": "{{currentUserId}}"
}

# Headers
Authorization: Bearer {{graphqlToken}}
Content-Type: application/json

# GraphQL Mutation
mutation CreatePost($input: CreatePostInput!) {
  createPost(input: $input) {
    id
    title
    content
    author {
      name
    }
  }
}

WebSocket Real-time Communication

// WebSocket connection URL
wss://api.example.com/websocket

// Connection headers
Authorization: Bearer {{wsToken}}
Sec-WebSocket-Protocol: chat

// Message sending example
{
  "type": "message",
  "channel": "general",
  "content": "Hello WebSocket!",
  "timestamp": "{{requestTimestamp}}"
}

// Subscription
{
  "type": "subscribe",
  "channels": ["notifications", "chat"],
  "user_id": "{{userId}}"
}

// Event listener
{
  "type": "join_room",
  "room_id": "room123",
  "user_info": {
    "name": "{{userName}}",
    "role": "participant"
  }
}

Environment Variables and Configuration Management

// Environment variables example (Development)
{
  "baseUrl": "https://api-dev.example.com",
  "accessToken": "dev-token-here",
  "graphqlEndpoint": "https://api-dev.example.com/graphql",
  "wsEndpoint": "wss://api-dev.example.com/websocket",
  "apiVersion": "v1",
  "debug": true
}

// Production environment
{
  "baseUrl": "https://api.example.com",
  "accessToken": "prod-token-here", 
  "graphqlEndpoint": "https://api.example.com/graphql",
  "wsEndpoint": "wss://api.example.com/websocket",
  "apiVersion": "v2",
  "debug": false
}

// Local environment
{
  "baseUrl": "http://localhost:3000",
  "accessToken": "local-dev-token",
  "graphqlEndpoint": "http://localhost:3000/graphql",
  "wsEndpoint": "ws://localhost:3000/websocket",
  "apiVersion": "v1",
  "debug": true
}

Pre- and Post-request Scripts

// Pre-request Script
// Set current timestamp
pw.env.set("timestamp", Date.now());

// Generate random ID
pw.env.set("requestId", Math.random().toString(36).substr(2, 9));

// Automatic token refresh
const tokenExpiry = pw.env.get("tokenExpiry");
if (!tokenExpiry || Date.now() > parseInt(tokenExpiry)) {
  // Token refresh logic
  console.log("Token refresh needed");
}

// Post-response Script
// Response validation
pw.test("Status code is 200", () => {
  pw.expect(pw.response.status).toBe(200);
});

pw.test("Response has required fields", () => {
  const body = pw.response.body;
  pw.expect(body).toHaveProperty("id");
  pw.expect(body).toHaveProperty("name");
  pw.expect(body.email).toMatch(/@/);
});

// Save values for next request
if (pw.response.body.id) {
  pw.env.set("lastCreatedId", pw.response.body.id);
}

// Response time check
pw.test("Response time is acceptable", () => {
  pw.expect(pw.response.responseTime).toBeLessThan(1000);
});

Team Sharing and Collection Management

// Collection structure example
Collection: "User Management API"
├── Authentication
│   ├── Login
│   ├── Refresh Token
│   └── Logout
├── User Operations
│   ├── Get Users
│   ├── Create User
│   ├── Update User
│   └── Delete User
└── Admin Functions
    ├── Get Analytics
    └── System Health

// Workspace configuration
{
  "name": "Development Team",
  "members": [
    {"email": "[email protected]", "role": "editor"},
    {"email": "[email protected]", "role": "viewer"},
    {"email": "[email protected]", "role": "admin"}
  ],
  "collections": ["User Management API", "Payment API"],
  "environments": ["development", "staging", "production"]
}