hoppscotch/hoppscotch

Open-Source API Development Ecosystem • https://hoppscotch.io • Offline, On-Prem & Cloud • Web, Desktop & CLI • Open-Source Alternative to Postman, Insomnia

78,979 stars TypeScript 10 components

12 hidden assumptions · 5-stage pipeline · 10 components

Like any codebase, this fullstack makes assumptions it never checks — most are routine. The ones worth your attention are below.

Multi-platform API development ecosystem providing web, desktop, CLI, and agent tools

The system follows a client-server architecture where multiple client applications (web, desktop, CLI, agent) interact with a centralized NestJS backend through GraphQL/REST APIs. User requests flow from clients through shared business logic that handles authentication, environment variable substitution, and request preparation, then execute via platform-specific networking layers (browser fetch, Tauri HTTP, Rust relay), with results synchronized back through the backend to maintain consistency across all connected clients.

Under the hood, the system uses 3 feedback loops, 3 data pools, 4 control points to manage its runtime behavior.

A 10-component fullstack. 1187 files analyzed. Data flows through 5 distinct pipeline stages.

Hidden Assumptions

Most of what this code assumes is routine. These 3 are the ones most likely to cause trouble here. The rest are minor; they're under "Show everything".

Worth your attention first

configService.get('WHITELISTED_ORIGINS').split(',') could produce empty strings or whitespace values as valid origins, allowing CORS bypass attacks or breaking origin validation

Worth your attention first

Fallback crypto.randomBytes(16).toString('hex') only provides 128-bit entropy which may be insufficient, or custom SESSION_SECRET could be weak, leading to session hijacking

Worth your attention first

If desktop DESKTOP_IO_IMPLS differs behaviorally from WEB_IO_IMPLS (different error handling, return types, async patterns), code using the kernel will work on one platform but fail silently or crash on the other

Show everything (9 more)
Scale

Environment variable expansion will complete within ENV_MAX_EXPAND_LIMIT (10) iterations

If this fails: Complex variable chains or circular references beyond 10 levels silently truncate expansion, returning partially resolved strings with unexpanded <<variable>> patterns instead of detecting the loop

packages/hoppscotch-data/src/environment/index.ts:parseBodyEnvVariablesE
Ordering

Platform services initialize in the exact sequence: auth, settings sync, collections sync, history sync, environments sync, analytics

If this fails: If collections sync requires auth tokens or environments sync needs settings loaded, changing initialization order or adding services between existing ones could break dependent services that expect prerequisites

packages/hoppscotch-common/src/helpers/app/index.ts:initializeApp
Contract

All object values are either strings or safely passable as-is - no nested objects, arrays, or complex structures need template parsing

If this fails: Objects with nested structures containing template strings (like headers: {authorization: {bearer: '<<token>>'}} or arrays with string elements) skip template replacement, leaving unexpanded variables

packages/hoppscotch-common/src/helpers/auth/index.ts:replaceTemplateStringsInObjectValues
Domain

Collection _ref_id values remain unique across all collections and concurrent operations

If this fails: generateUniqueRefId('coll') could produce duplicate IDs if called simultaneously or if the generation algorithm isn't truly unique, causing collection conflicts, sync issues, or data overwrites

packages/hoppscotch-data/src/collection/index.ts:makeCollection
Resource

JSON payloads up to 100MB can be safely processed in memory without causing OOM or blocking the event loop

If this fails: Large uploads could exhaust heap memory on constrained deployments or block the Node.js event loop during JSON parsing, causing timeouts for other requests or server crashes

packages/hoppscotch-backend/src/main.ts:bootstrap
Temporal

Application initialization only needs to happen once and platform services remain stable after first initialization

If this fails: If services crash, disconnect, or need reinitialization (network failures, auth token expiry), the initialized=true flag prevents recovery, leaving the app in a broken state with no sync or authentication

packages/hoppscotch-common/src/helpers/app/index.ts:initializeApp
Environment

window.__KERNEL_MODE__ is set correctly during application bootstrap and never changes during runtime

If this fails: If __KERNEL_MODE__ is undefined, unset, or changes after initialization (browser extensions, hot reloading), kernel operations fallback to 'web' mode which may use wrong APIs, break desktop features, or cause permission errors

packages/hoppscotch-kernel/src/index.ts:getKernelMode
Contract

HOPP_SUPPORTED_PREDEFINED_VARIABLES.getValue() functions always return valid string values and never throw exceptions

If this fails: If a predefined variable's getValue() throws an error, returns null/undefined, or returns non-string types, the template replacement crashes instead of gracefully falling back to the original <<variable>> pattern

packages/hoppscotch-data/src/environment/index.ts:parseBodyEnvVariablesE
Domain

MIME type detection and file hashing operations can handle all possible file types and sizes in the webapp directory

If this fails: Binary files, very large assets, or files with unusual extensions could cause MIME detection to fail, blake3 hashing to consume excessive memory, or ZIP compression to timeout, breaking bundle creation

packages/hoppscotch-desktop/crates/webapp-bundler/src/main.rs:BundleBuilder

Open the standalone hidden-assumptions report for hoppscotch →

How Data Flows Through the System

The system follows a client-server architecture where multiple client applications (web, desktop, CLI, agent) interact with a centralized NestJS backend through GraphQL/REST APIs. User requests flow from clients through shared business logic that handles authentication, environment variable substitution, and request preparation, then execute via platform-specific networking layers (browser fetch, Tauri HTTP, Rust relay), with results synchronized back through the backend to maintain consistency across all connected clients.

  1. Request preparation — Client applications use replaceTemplateStringsInObjectValues to resolve <<variable>> placeholders in request URLs, headers, and bodies using combined environment variables, request variables, and predefined variables [HoppCollection → RequestWithMetadata]
  2. Authentication and authorization — The backend validates user sessions, checks team membership permissions, and ensures access rights to collections and environments through NestJS guards and GraphQL resolvers [Team] (config: WHITELISTED_ORIGINS, SESSION_SECRET)
  3. Network execution — Requests execute through platform-specific implementations: browser fetch API for web clients, Tauri's HTTP client for desktop, or Rust relay crate for agent/CLI with full HTTP feature support [RequestWithMetadata → ResponseWithMetadata]
  4. Response processing and testing — The js-sandbox package executes post-request test scripts in a controlled environment, validating response data against user-defined assertions and collecting test results [ResponseWithMetadata]
  5. Data synchronization — Changes to collections, environments, and settings propagate through the backend's GraphQL subscriptions to keep all connected clients synchronized in real-time (config: DATABASE_URL)

Data Models

The data structures that flow between stages — the contracts that hold the system together.

HoppCollection packages/hoppscotch-data/src/collection/index.ts
versioned entity with v: number, name: string, requests: HoppRESTRequest[], folders: HoppCollection[], variables: CollectionVariable[], _ref_id: string
Created from file/API import, stored in local/remote storage, executed by request runner, synchronized across clients
Environment packages/hoppscotch-data/src/environment/index.ts
versioned entity with v: number, name: string, variables: EnvironmentVariable[] where each variable has key: string, currentValue: string, secret: boolean
Defined by user, stored with collection metadata, used during template parsing to replace <<variable>> placeholders in requests
Team packages/hoppscotch-backend/src/team/team.model.ts
GraphQL object with id: string, name: string, members: TeamMember[] where TeamMember has membershipID: string, userUid: string, role: TeamAccessRole enum
Created through backend API, managed via GraphQL mutations, controls access to shared collections and environments
HoppCLIError packages/hoppscotch-cli/src/types/errors.ts
union type with code: HoppErrorCode and contextual data like path: string, command: string, or data: any based on error type
Generated during CLI operations, propagated through error handlers, formatted for user display with context-specific information
RequestWithMetadata packages/hoppscotch-relay/src/interop.rs
Rust struct containing HTTP request details with method, URL, headers, body, and execution metadata for network operations
Constructed from user input in clients, serialized for relay transmission, executed by Rust networking layer, returns ResponseWithMetadata

System Behavior

How the system operates at runtime — where data accumulates, what loops, what waits, and what controls what.

Data Pools

Backend Database (database)
PostgreSQL database storing teams, users, shared collections, environments, and collaboration data accessed through Prisma ORM
Local Storage (state-store)
Platform-specific persistence layer storing user preferences, cached collections, and offline data with different implementations for web localStorage and desktop file system
Session Store (cache)
Express session middleware storing user authentication state and temporary request context with configurable cookie names for proxy compatibility

Feedback Loops

Delays

Control Points

Technology Stack

NestJS (framework)
Backend application framework providing dependency injection, GraphQL API generation, and middleware management for the centralized server
Vue.js (framework)
Frontend framework for the proxy agent application and shared UI components used across web interfaces
Tauri (framework)
Desktop application framework wrapping web content in native OS windows with Rust backend for system integration and networking
Commander.js (framework)
CLI framework handling command parsing, argument validation, and help generation for the command-line testing tool
PostgreSQL (database)
Primary database for persistent storage of teams, users, collections, and collaboration data accessed through Prisma ORM
GraphQL (serialization)
API layer providing type-safe queries, mutations, and real-time subscriptions for data synchronization between clients and backend
Rust (runtime)
Systems programming language used for high-performance HTTP request execution in the relay library and desktop networking layer
CodeMirror (library)
Code editor providing syntax highlighting, folding, and editing features for GraphQL queries and request bodies

Key Components

Package Structure

hoppscotch-backend (app)
NestJS backend providing GraphQL/REST APIs, team management, authentication, and data persistence for all Hoppscotch clients
hoppscotch-cli (app)
Command-line interface for automated API testing, collection running, and CI/CD integration with JUnit reporting
hoppscotch-desktop (app)
Tauri-based desktop application with system tray, bundled web content serving, and native OS integration
hoppscotch-agent (app)
Vue.js proxy agent application running locally to bypass CORS restrictions and enable direct API testing from browsers
hoppscotch-common (shared)
Shared business logic library containing authentication, environment management, request processing, and sync services used by all client applications
hoppscotch-data (shared)
Versioned data models and schemas for collections, environments, and requests with migration logic between schema versions
hoppscotch-kernel (shared)
Platform abstraction layer providing unified APIs for I/O, storage, and networking across web, desktop, and CLI environments
hoppscotch-relay (library)
Rust library for executing HTTP requests with advanced networking features, used by desktop and agent applications
selfhost-web (app)
Web application for self-hosted deployments with team collaboration and workspace management features
hoppscotch-sh-admin (app)
Administrative dashboard for self-hosted instances to manage users, teams, and system configuration
hoppscotch-js-sandbox (library)
Secure JavaScript execution environment for pre-request scripts and test runners with controlled module access
codemirror-lang-graphql (library)
CodeMirror language extension providing GraphQL syntax highlighting, folding, and editor support

Explore the interactive analysis

See the full architecture map, data flow, and code patterns visualization.

Analyze on CodeSea

Related Fullstack Repositories

Frequently Asked Questions

What is hoppscotch used for?

Multi-platform API development ecosystem providing web, desktop, CLI, and agent tools hoppscotch/hoppscotch is a 10-component fullstack written in TypeScript. Data flows through 5 distinct pipeline stages. The codebase contains 1187 files.

How is hoppscotch architected?

hoppscotch is organized into 4 architecture layers: Client Applications, Shared Business Logic, Data Layer, Platform Abstractions. Data flows through 5 distinct pipeline stages. This layered structure keeps concerns separated and modules independent.

How does data flow through hoppscotch?

Data moves through 5 stages: Request preparation → Authentication and authorization → Network execution → Response processing and testing → Data synchronization. The system follows a client-server architecture where multiple client applications (web, desktop, CLI, agent) interact with a centralized NestJS backend through GraphQL/REST APIs. User requests flow from clients through shared business logic that handles authentication, environment variable substitution, and request preparation, then execute via platform-specific networking layers (browser fetch, Tauri HTTP, Rust relay), with results synchronized back through the backend to maintain consistency across all connected clients. This pipeline design reflects a complex multi-stage processing system.

What technologies does hoppscotch use?

The core stack includes NestJS (Backend application framework providing dependency injection, GraphQL API generation, and middleware management for the centralized server), Vue.js (Frontend framework for the proxy agent application and shared UI components used across web interfaces), Tauri (Desktop application framework wrapping web content in native OS windows with Rust backend for system integration and networking), Commander.js (CLI framework handling command parsing, argument validation, and help generation for the command-line testing tool), PostgreSQL (Primary database for persistent storage of teams, users, collections, and collaboration data accessed through Prisma ORM), GraphQL (API layer providing type-safe queries, mutations, and real-time subscriptions for data synchronization between clients and backend), and 2 more. A focused set of dependencies that keeps the build manageable.

What system dynamics does hoppscotch have?

hoppscotch exhibits 3 data pools (Backend Database, Local Storage), 3 feedback loops, 4 control points, 3 delays. The feedback loops handle polling and recursive. These runtime behaviors shape how the system responds to load, failures, and configuration changes.

What design patterns does hoppscotch use?

4 design patterns detected: Versioned Entity Pattern, Platform Abstraction, Template String Processing, Monorepo with Shared State.

Analyzed on April 20, 2026 by CodeSea. Written by .