Hoppscotch

Open-Source-API-Entwicklungsökosystem und leichtgewichtige Alternative zu Postman zum Testen von REST-, GraphQL-, WebSocket- und Echtzeit-APIs.

Installation

Web & Desktop

Befehl	Beschreibung
Zu `hoppscotch.io` navigieren	Hoppscotch Web-App öffnen (keine Installation nötig)
Von `hoppscotch.io/download` herunterladen	Desktop-App installieren (macOS, Windows, Linux)
Mit GitHub, Google oder E-Mail anmelden	Konto für Team-Synchronisierung erstellen
Browser-PWA-Installationsoption	Als Progressive Web App installieren

CLI-Installation

Befehl	Beschreibung
`npm install -g @hoppscotch/cli`	CLI global mit npm installieren
`npx @hoppscotch/cli`	CLI ohne Installation ausführen
`hopp --version`	CLI-Version anzeigen
`hopp --help`	CLI-Hilfe anzeigen

Selbst gehostete Installation

Befehl	Beschreibung
`docker pull hoppscotch/hoppscotch`	Docker-Image herunterladen
`docker compose up -d`	Selbst gehostete Instanz starten

Selbst gehostete Docker Compose

# docker-compose.yml für selbst gehostetes Hoppscotch
version: "3"
services:
  hoppscotch:
    image: hoppscotch/hoppscotch:latest
    ports:
      - "3000:3000"   # Web UI
      - "3100:3100"   # Admin-Dashboard
      - "3170:3170"   # Backend-API
    environment:
      DATABASE_URL: postgresql://user:pass@db:5432/hoppscotch
      JWT_SECRET: your-jwt-secret-here
      TOKEN_SALT_COMPLEXITY: 10
      MAGIC_LINK_TOKEN_VALIDITY: 3
      REFRESH_TOKEN_VALIDITY: 604800000
      ACCESS_TOKEN_VALIDITY: 86400000
      VITE_ALLOWED_AUTH_PROVIDERS: GITHUB,GOOGLE,EMAIL
    depends_on:
      - db

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
      POSTGRES_DB: hoppscotch

volumes:
  postgres_data:

HTTP-Anfragen

Anfragen erstellen

Befehl	Beschreibung
Methode auswählen (GET, POST, PUT, DELETE, PATCH)	HTTP-Methode aus Dropdown wählen
URL in die Adressleiste eingeben	Anfrage-Endpunkt festlegen
Auf “Send” klicken	Anfrage ausführen
`Ctrl + Enter`	Anfrage senden (Tastenkürzel)
`Ctrl + G`	Anfrage senden und Antwort herunterladen
`Ctrl + K`	Befehlspalette öffnen

Anfragekörper

Befehl	Beschreibung
Auf “Body”-Tab klicken → Typ auswählen	Format des Anfragekörpers festlegen
”application/json” auswählen	JSON-Körper (am häufigsten)
“multipart/form-data” auswählen	Datei-Uploads
”application/x-www-form-urlencoded” auswählen	Formulardaten
”text/plain” auswählen	Roher Textkörper
”application/xml” auswählen	XML-Körper
”Binary” auswählen	Rohe Binärdaten

Befehl	Beschreibung
Auf “Headers”-Tab klicken → Header hinzufügen	Benutzerdefinierte Anfrage-Header hinzufügen
Auf “Parameters”-Tab klicken	URL-Abfrageparameter hinzufügen
Massenbearbeitungsmodus für Header	Mehrere Header auf einmal einfügen
Header aktiv/inaktiv umschalten	Deaktivieren ohne zu löschen
`<<variable>>` in Werten verwenden	Umgebungsvariablen referenzieren

Antwortinspektion

Befehl	Beschreibung
Antwortkörper anzeigen	JSON, HTML, XML, Binär, Bild
Auf “Headers”-Tab der Antwort klicken	Antwort-Header inspizieren
Statuscode und Zeit angezeigt	HTTP-Status, Latenz, Größe
Auf “Copy” bei Antwort klicken	Antwort in Zwischenablage kopieren
Auf “Download” klicken	Antwort als Datei herunterladen
JSON-Antwort automatisch formatiert	Einklappbare Baumansicht
Auf “Timeline” klicken	Anfrage-/Antwort-Timeline anzeigen

Anfragebeispiel

Method:  POST
URL:     https://api.example.com/users
Headers:
  Content-Type: application/json
  Authorization: Bearer <<auth_token>>

Body (JSON):
{
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin"
}

Response: 201 Created (145ms, 234 B)
{
  "id": 42,
  "name": "Alice Smith",
  "email": "alice@example.com",
  "role": "admin",
  "created_at": "2024-01-15T10:30:00Z"
}

Sammlungen

Sammlungen verwalten

Befehl	Beschreibung
Auf ”+” im Sammlungs-Panel klicken	Neue Sammlung erstellen
Rechtsklick auf Sammlung → “New Request”	Anfrage zur Sammlung hinzufügen
Rechtsklick auf Sammlung → “New Folder”	Mit Unterordnern organisieren
Anfragen zwischen Ordnern ziehen	Sammlungselemente neu ordnen
Rechtsklick → “Duplicate”	Sammlung klonen
Rechtsklick → “Properties”	Sammlungseinstellungen bearbeiten
Rechtsklick → “Delete”	Sammlung entfernen
`Ctrl + Shift + P`	In Sammlungen suchen

Import & Export

Befehl	Beschreibung
Auf “Import” klicken → Datei auswählen	Sammlung importieren
Rechtsklick → “Export”	Sammlung als JSON exportieren
Import aus Postman Collection v2	Postman-Kompatibilität
Import aus OpenAPI/Swagger-Spezifikation	Anfragen automatisch generieren
Import aus Insomnia	Insomnia-Kompatibilität
Import aus cURL	cURL-Befehl einfügen
Import aus HAR	HTTP-Archiv importieren

Importbeispiele

Unterstützte Importformate:
  - Hoppscotch Collection (natives JSON)
  - Postman Collection v2
  - OpenAPI 3.0 / Swagger 2.0
  - Insomnia v4
  - cURL-Befehle
  - HAR (HTTP Archive)

Import aus cURL:
  Einen cURL-Befehl direkt in die URL-Leiste einfügen
  Hoppscotch parst automatisch Methode, Header, Body und URL

Umgebungsvariablen

Umgebungen verwalten

Befehl	Beschreibung
Auf “Environments” in der Seitenleiste klicken	Umgebungsverwaltung öffnen
Auf ”+” klicken um Umgebung zu erstellen	Neue Umgebung erstellen
`key: value` Paare hinzufügen	Variablen definieren
`<<variable_name>>` in Anfragen verwenden	Variable in jedem Feld referenzieren
Umgebung aus Dropdown auswählen	Umgebung aktivieren
Auf “Global”-Tab klicken	Globale Variablen setzen (immer aktiv)
Rechtsklick → “Export”	Umgebung als JSON exportieren
Rechtsklick → “Duplicate”	Umgebung klonen

Variablentypen

Typ	Beschreibung
Reguläre Variable	Sichtbar in UI, in Sammlungen exportiert
Geheime Variable	In UI maskiert, nicht exportiert
Globale Variable	In allen Umgebungen verfügbar
Umgebungsvariable	Nur verfügbar wenn Umgebung aktiv ist

Umgebungsbeispiel

Umgebung: "Production"
┌───────────────┬──────────────────────────────┬──────────┐
│ Schlüssel     │ Wert                         │ Typ      │
├───────────────┼──────────────────────────────┼──────────┤
│ base_url      │ https://api.example.com      │ Regulär  │
│ api_version   │ v2                           │ Regulär  │
│ auth_token    │ eyJhbGciOiJIUzI1NiIsIn...    │ Geheim   │
│ timeout       │ 30000                        │ Regulär  │
└───────────────┴──────────────────────────────┴──────────┘

Verwendung in Anfragen:
  URL:    <<base_url>>/<<api_version>>/users
  Header: Authorization: Bearer <<auth_token>>

Authentifizierung

Authentifizierungstypen

Befehl	Beschreibung
”Bearer Token” auswählen	Bearer-Token-Authentifizierung hinzufügen
”Basic Auth” auswählen	Benutzername/Passwort-Authentifizierung
”OAuth 2.0” auswählen	OAuth 2.0-Flow konfigurieren
”API Key” auswählen	API-Key zu Header oder Query-Parameter hinzufügen
”AWS Signature” auswählen	AWS Signature V4-Authentifizierung
”Inherit from parent” auswählen	Authentifizierung von Sammlung erben
”None” auswählen	Authentifizierung entfernen
Token-Felder unterstützen `<<variables>>`	Umgebungsvariablen in Auth-Tokens verwenden

OAuth 2.0-Konfiguration

OAuth 2.0-Konfiguration:
  Grant Type:       Authorization Code
  Auth URL:         https://auth.example.com/authorize
  Token URL:        https://auth.example.com/token
  Client ID:        <<client_id>>
  Client Secret:    <<client_secret>>
  Scope:            read write
  Redirect URI:     Automatisch konfiguriert

Unterstützte Grant Types:
  - Authorization Code (+ PKCE)
  - Client Credentials
  - Implicit
  - Password Credentials

Echtzeit-Tests

WebSocket

Befehl	Beschreibung
Auf “Realtime” → “WebSocket” klicken	WebSocket-Client öffnen
`wss://`-URL eingeben	WebSocket-Endpunkt festlegen
Auf “Connect” klicken	Verbindung herstellen
Nachricht eingeben → auf “Send” klicken	Nachricht an Server senden
Nachrichten im Log-Panel anzeigen	Eingehende/ausgehende Nachrichten überwachen
Auf “Disconnect” klicken	Verbindung schließen
Protokolle/Header hinzufügen	Verbindungsparameter konfigurieren

Server-Sent Events (SSE)

Befehl	Beschreibung
Auf “Realtime” → “SSE” klicken	Server-Sent Events testen
SSE-Endpunkt-URL eingeben	Event-Stream-URL festlegen
Auf “Connect” klicken	Empfang von Events starten
Events in Echtzeit protokolliert	Event-Stream überwachen
Auf “Disconnect” klicken	Empfang stoppen

MQTT

Befehl	Beschreibung
Auf “Realtime” → “MQTT” klicken	MQTT-Verbindungen testen
`mqtt://` oder `wss://`-URL eingeben	MQTT-Broker-URL festlegen
Client ID, Benutzername, Passwort festlegen	Anmeldedaten konfigurieren
Topics abonnieren	Auf Nachrichten lauschen
An Topics veröffentlichen	Nachrichten senden

Socket.IO

Befehl	Beschreibung
Auf “Realtime” → “Socket.IO” klicken	Socket.IO-Verbindungen testen
Server-URL eingeben	Socket.IO-Endpunkt festlegen
Auf Events lauschen	Benannte Events abonnieren
Events mit Daten senden	Benannte Events senden
Verbindungsstatus anzeigen	Verbinden/Trennen überwachen

GraphQL

GraphQL-Tests

Befehl	Beschreibung
Auf “GraphQL”-Tab klicken	Zum GraphQL-Modus wechseln
GraphQL-Endpunkt-URL eingeben	GraphQL-Server-URL festlegen
Abfrage im Editor-Panel schreiben	GraphQL-Abfrage erstellen
Auf “Schema” klicken um Schema zu laden	Server-Schema für Autovervollständigung laden
Variablen im Variablen-Panel hinzufügen	Abfragevariablen als JSON festlegen
Header für Authentifizierung hinzufügen	Auth-Header festlegen
Auf “Run” oder `Ctrl + Enter` klicken	Abfrage ausführen
Autovervollständigung aus Schema verwenden	Feldvorschläge erhalten

GraphQL-Beispiel

Endpoint: https://api.example.com/graphql

Query:
  query GetUsers($limit: Int!) {
    users(limit: $limit) {
      id
      name
      email
      posts {
        title
        createdAt
      }
    }
  }

Variables:
  {
    "limit": 10
  }

Headers:
  Authorization: Bearer <<auth_token>>

CLI-Verwendung

Sammlungen ausführen

Befehl	Beschreibung
`hopp test collection.json`	Sammlungstests ausführen
`hopp test collection.json -e environment.json`	Mit Umgebung ausführen
`hopp test collection.json --delay 500`	Verzögerung zwischen Anfragen (ms)
`hopp test collection.json --reporter junit`	JUnit-Testbericht-Ausgabe
`hopp test collection.json --reporter json`	JSON-Testbericht-Ausgabe
`hopp test collection.json --bail`	Bei erstem Fehler stoppen
`hopp test collection.json --env-var KEY=VALUE`	Umgebungsvariable überschreiben

CLI-Beispiele

# Sammlung mit Umgebung ausführen
hopp test api-tests.json -e production.json

# Mit Verzögerung ausführen und bei Fehler stoppen
hopp test api-tests.json --delay 1000 --bail

# JUnit-Bericht für CI/CD generieren
hopp test api-tests.json --reporter junit > results.xml

# Bestimmte Variablen überschreiben
hopp test api-tests.json \
  --env-var "base_url=https://staging.example.com" \
  --env-var "auth_token=test-token-123"

# CI/CD-Pipeline-Beispiel
hopp test api-tests.json -e staging.json --bail --reporter junit

Pre-Request & Post-Request Skripte

Skripting

Befehl	Beschreibung
Auf “Pre-request”-Tab klicken	Skript hinzufügen, das vor der Anfrage läuft
Auf “Tests”-Tab klicken	Skript hinzufügen, das nach der Antwort läuft
`pw.env.set("key", "value")`	Umgebungsvariable setzen
`pw.env.get("key")`	Umgebungsvariable abrufen
`pw.expect(response.status).toBe(200)`	Statuscode prüfen
`pw.expect(response.body).toHaveProperty("id")`	Body-Eigenschaft prüfen

Testskript-Beispiele

// Pre-request: Zeitstempel generieren
pw.env.set("timestamp", Date.now().toString());

// Pre-request: Zufällige ID generieren
pw.env.set("random_id", Math.random().toString(36).slice(2));

// Test: Statuscode prüfen
pw.test("Status is 200", () => {
  pw.expect(pw.response.status).toBe(200);
});

// Test: Antwortkörper prüfen
pw.test("Response has user data", () => {
  const body = pw.response.body;
  pw.expect(body).toHaveProperty("id");
  pw.expect(body).toHaveProperty("name");
  pw.expect(body.name).toBe("Alice");
});

// Test: Antwortzeit prüfen
pw.test("Response is fast", () => {
  pw.expect(pw.response.status).toBeLessThan(500);
});

// Test: Token für nächste Anfrage speichern
pw.test("Extract auth token", () => {
  const token = pw.response.body.access_token;
  pw.env.set("auth_token", token);
});

Tastenkürzel

Global

Tastenkürzel	Beschreibung
`Ctrl + Enter`	Anfrage senden
`Ctrl + K`	Befehlspalette
`Ctrl + S`	Aktuelle Anfrage speichern
`Ctrl + Shift + P`	Sammlungen durchsuchen
`Ctrl + /`	Seitenleiste umschalten
`Alt + ↑`	Vorherige Anfrage im Verlauf
`Alt + ↓`	Nächste Anfrage im Verlauf
`F11`	Vollbild umschalten

Teams & Zusammenarbeit

Befehl	Beschreibung
Team über Seitenleiste erstellen	Team-Arbeitsbereich einrichten
Mitglieder per E-Mail einladen	Mitarbeiter hinzufügen
Geteilte Sammlungen	Teamweite Anfragebibliotheken
Geteilte Umgebungen	Teamweite Variablensets
Echtzeit-Zusammenarbeit	Team-Bearbeitungen live sehen
Rollenbasierter Zugriff	Eigentümer-, Bearbeiter-, Betrachter-Rollen

Best Practices

Sammlungen nach API-Domäne organisieren — Verwandte Endpunkte in Sammlungen gruppieren und Ordner für Ressourcentypen (Benutzer, Bestellungen, Produkte) verwenden, um alles auffindbar zu halten.
Umgebungen für Staging vs. Produktion verwenden — Separate Umgebungen für Entwicklung, Staging und Produktion mit denselben Variablennamen aber unterschiedlichen Werten erstellen. Mit einem Klick wechseln.
Geheimnisse als geheime Variablen speichern — API-Keys und Tokens als “Secret”-Typ markieren, damit sie in der UI maskiert und von Exporten ausgeschlossen sind.
Pre-Request-Skripte für Authentifizierung verwenden — Zeitstempel generieren, Signaturen berechnen oder Tokens automatisch vor jeder Anfrage aktualisieren, statt sie manuell zu kopieren.
Tests für kritische Endpunkte schreiben — Testskripte hinzufügen, um Statuscodes, Antwortstruktur und Schlüsselwerte zu überprüfen. Über CLI in CI/CD-Pipelines ausführen.
Aus OpenAPI-Spezifikationen importieren — Bei der Arbeit mit dokumentierten APIs die OpenAPI/Swagger-Spezifikation importieren, um alle Endpunkte mit korrekten Parametern automatisch zu generieren.
Authentifizierung auf Sammlungsebene verwenden — Authentifizierung auf Sammlungsebene setzen und in einzelnen Anfragen “Inherit from parent” verwenden, um Auth-Konfiguration nicht zu duplizieren.
Sammlungen in Versionskontrolle exportieren — Sammlungen als JSON exportieren und in das Repository committen für Versionierung und Team-Sharing.
CLI in CI/CD verwenden — hopp test zur Pipeline hinzufügen, um API-Tests bei jedem Deployment auszuführen und sicherzustellen, dass Endpunkte funktionieren, bevor sie live gehen.
Für sensible APIs selbst hosten — Beim Testen interner oder sensibler APIs die selbst gehostete Docker-Version bereitstellen, um alle Daten innerhalb der eigenen Infrastruktur zu halten.

Hoppscotch

Installation

Web & Desktop

CLI-Installation

Selbst gehostete Installation

Selbst gehostete Docker Compose

HTTP-Anfragen

Anfragen erstellen

Anfragekörper

Header & Parameter

Antwortinspektion

Anfragebeispiel

Sammlungen

Sammlungen verwalten

Import & Export

Importbeispiele

Umgebungsvariablen

Umgebungen verwalten

Variablentypen

Umgebungsbeispiel

Authentifizierung

Authentifizierungstypen

OAuth 2.0-Konfiguration

Echtzeit-Tests

WebSocket

Server-Sent Events (SSE)

MQTT

Socket.IO

GraphQL

GraphQL-Tests

GraphQL-Beispiel

CLI-Verwendung

Sammlungen ausführen

CLI-Beispiele

Pre-Request & Post-Request Skripte

Skripting

Testskript-Beispiele

Tastenkürzel

Global

Teams & Zusammenarbeit

Best Practices