Project setup

1. Copy the source/ directory into your project, e.g., src/hoppscotch-common/.

2. Alias the internal path prefix in tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/hoppscotch-common/*"],
      "@modules/*": ["src/hoppscotch-common/modules/*"]
    }
  }
}

3. If using Vite, add the same aliases in vite.config.ts:

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "~": resolve(__dirname, "src/hoppscotch-common"),
      "@modules": resolve(__dirname, "src/hoppscotch-common/modules"),
    },
  },
})

4. Set environment variables for your deployment in a .env file. Refer to vite-envs.d.ts for the full list of VITE_* keys the source expects.

5. Implement a PlatformDef object matching the interface in source/platform/ and pass it to createHoppApp.

Public API

createHoppApp

async function createHoppApp(
  el: string | Element,
  platformDef: PlatformDef
): Promise<void>

The top-level factory that bootstraps the entire Hoppscotch Vue application. Call it once on page load, passing a CSS selector or DOM element and a platform adapter that provides auth, sync, and analytics hooks. It initializes the kernel, mounts the Vue app, and runs pre-auth and sync initialization in sequence.

initializeApp

function initializeApp(): void

Located in helpers/app/index.ts. Idempotent initializer that wires platform-level sync for settings, collections, history, and environments, and fires analytics init. Call it after createHoppApp resolves if you need to manually trigger platform sync rather than relying on the service-based boot sequence.

parseCurlToHoppRESTReq

import { parseCurlToHoppRESTReq } from "~/helpers/curl"

const parseCurlToHoppRESTReq: (curlString: string) => HoppRESTRequest

A composed function (via fp-ts/flow) that parses a raw cURL command string into a Hoppscotch REST request object, returning a deep-cloned result. Use this when you need to ingest cURL snippets from users and convert them to the internal request model for display or execution.

replaceTemplateStringsInObjectValues

function replaceTemplateStringsInObjectValues<T extends Record<string, unknown>>(
  obj: T,
  source?: "REST" | "GQL"
): T

Located in helpers/auth/index.ts. Resolves {{variable}} template placeholders in all string values of a plain object against the current environment and active tab's request variables. Use it before sending a request to substitute environment and request-scoped variables into headers, body, or URL parameters.

Working examples

Scenario - Bootstrap the app with a custom platform

Provide a minimal platform definition and mount the Hoppscotch UI into a <div id="app"> in your HTML.

import { createHoppApp } from "./hoppscotch-common/index"
import type { PlatformDef } from "./hoppscotch-common/platform"

const platform: PlatformDef = {
  auth: {
    performAuthInit: () => {},
    getCurrentUserStream: () => new Observable(),
    getAuthIDTokenStream: () => new Observable(),
    signInWithEmail: async () => {},
    signOutUser: async () => {},
    processMagicLink: async () => {},
  },
  sync: {
    settings: { initSettingsSync: () => {} },
    collections: { initCollectionsSync: () => {} },
    history: { initHistorySync: () => {} },
    environments: { initEnvironmentsSync: () => {} },
  },
  analytics: undefined,
}

createHoppApp("#app", platform).then(() => {
  console.log("Hoppscotch app mounted")
})

Scenario - Parse a cURL command into a REST request object

Accept a cURL string from user input and convert it to the internal Hoppscotch request format for further processing or display.

import { parseCurlToHoppRESTReq } from "~/helpers/curl"

const curlString = `curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name":"Alice"}'`

const request = parseCurlToHoppRESTReq(curlString)

console.log(request.method)   // "POST"
console.log(request.endpoint) // "https://api.example.com/users"
console.log(request.headers)  // [{ key: "Content-Type", value: "application/json", ... }]

Scenario - Resolve environment variables in request headers before dispatch

Before executing a request, substitute all {{token}} placeholders in the headers object using the active environment.

import { replaceTemplateStringsInObjectValues } from "~/helpers/auth"

const rawHeaders: Record<string, string> = {
  Authorization: "Bearer {{access_token}}",
  "X-Tenant-ID": "{{tenant_id}}",
  "Content-Type": "application/json",
}

// Resolves against current selected environment and active tab's request variables
const resolvedHeaders = replaceTemplateStringsInObjectValues(rawHeaders, "REST")

console.log(resolvedHeaders.Authorization)
// "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."

File walkthrough

• index.ts - Exports createHoppApp; sets up Monaco workers, loads platform def, runs initialization services, and mounts the Vue app.
• components/ - All Vue SFCs; importExport/ handles collection import/export dialogs; lenses/ renders response bodies in various formats (JSON, HTML, image, etc.).
• composables/ - Reusable Vue composition functions; covers auth state, CodeMirror editor setup, theming, toast notifications, OAuth2 flows, and settings reactivity.
• helpers/ - Framework-agnostic TypeScript utilities; organized by domain (curl, rest, graphql, runner, environments, teams, shortcode, etc.).
• kernel/ - Wraps @hoppscotch/kernel primitives, particularly the Log module for structured diagnostic logging.
• modules/ - Houses the dioc dependency injection/service locator used throughout the app; getService is the primary consumer API.
• newstore/ - Pinia or custom reactive stores for global state: REST collections, GQL collections, environments, request history, and user settings.
• pages/ - Vue Router page components corresponding to top-level routes (/, /graphql, /realtime, etc.).
• platform/ - Defines and exports PlatformDef interface plus setPlatformDef/platform accessors for runtime platform switching.
• services/ - Long-lived injectable service classes (InitializationService, RESTTabService, RunnerService, etc.) consumed via getService.
• types/ - Shared TypeScript interfaces and utility types used across components, composables, and helpers.
• workers/ - Web worker source files for offloading heavy computation (response parsing, documentation generation).

Common pitfalls and fixes

• Monaco worker 404 errors at runtime: The MonacoEnvironment.getWorker setup in index.ts requires Vite ?worker imports; replicate that exact pattern or Monaco will fail to load language features.
• ~ alias not resolved: Both vite.config.ts and tsconfig.json must declare the ~ alias pointing to the source root; missing either causes compile or runtime module-not-found errors.
• fp-ts ESM/CJS mismatch: Import from fp-ts/Either and fp-ts/function using named subpath imports; importing from the package root fp-ts may fail in some bundler configs. Pin fp-ts to ^2.x.
• PlatformDef incomplete implementation: All sync and auth fields must be present even if no-ops; missing keys cause null-dereference errors during initializeApp.
• Environment variables not substituted: replaceTemplateStringsInObjectValues reads from the active store state; call it only after stores are initialized (i.e., after createHoppApp resolves).
• Monaco SCSS/Tailwind style conflicts: The imported styles.scss and tailwind.scss apply global resets; scope them with a wrapper class or use Vite's css.modules to avoid leaking into host application styles.

Vibe-coding prompt template

I have purchased and extracted the Hoppscotch Common UI & Logic source block into
`src/hoppscotch-common/` in my project. I also have `USAGE.md` open alongside this prompt.

Upstream npm package reference: user@example.com
Source root: src/hoppscotch-common/

My project is a Vue 3 + Vite + TypeScript application. I want to integrate the
Hoppscotch API client UI into my existing app.

Please do the following step by step:
1. Update my `vite.config.ts` to add the `~` and `@modules` path aliases pointing
   to `src/hoppscotch-common/` as documented in USAGE.md.
2. Update `tsconfig.json` with matching path entries.
3. Create a minimal `PlatformDef` implementation in `src/platform.ts` with no-op
   auth and sync handlers.
4. Mount the Hoppscotch app using `createHoppApp` from
   `src/hoppscotch-common/index.ts` in my `src/main.ts`, passing the platform def.
5. Show me how to use `parseCurlToHoppRESTReq` from `src/hoppscotch-common/helpers/curl`
   in a standalone utility file.
6. Add the Monaco worker configuration exactly as it appears in USAGE.md.
7. List any additional npm packages I need to install with exact version ranges.

Use only exports and APIs documented in USAGE.md. Do not invent new functions.

License and credit

Hoppscotch is released under the MIT License. See source/LICENSE if present, or refer to the upstream repository for the full license text. Upstream package: user@example.com by the Hoppscotch contributors.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.

Discord.js Complete Bot Development Toolkit

Automation, Utilities & Developer Tools

무료