Help

How to use VibeGear, what each tool does, and a cheatsheet for the small handful of concepts our tools assume you’re comfortable with. The same content is available in-app via the “? Help” button or alt+H.

VibeGear in 90 seconds

VibeGear is a workshop for vibe coders — developers who lean on AI to build software and need to verify, debug, and tinker with what comes out. Seven tabs at the top, each a different room of the workshop.

What lives where

Home — landing page with quick navigation and tips.
Playground — paste JS / TS code and run it sandboxed. Live console, network monitor, watch expressions, real ES modules with top-level await.
HTTP — Postman-style request runner with first-class GraphQL support. Hit any API, inspect the response, save requests as collections.
Realtime — WebSocket and Server-Sent Events tester. Watch streaming traffic live, send messages, verify auth headers actually work.
Code Diff — paste two versions of a file, see what changed line-by-line, with syntax highlighting. Both panes editable.
JSON Diff — same idea, but JSON-aware. Validates as you type. Has an inline JSONPath inspector.
Tools — 40+ dev utilities: encode / decode / hash / case-convert / generate / colors / CSS / Mermaid / OAuth / images / and more, organized into nine categories.

The three habits worth forming

1. {{variables}} for anything that changes. In the HTTP tab, never hard-code a tenant ID, base URL, or token. Define them once on the collection, reference them everywhere as {{name}}. Switching environments becomes a one-line change.

2. Paste-driven workflow.Got a curl from your AI? → HTTP tab “Import from cURL”. A weird response shape? → JSON Diff “From YAML” or Tools “JSON → TypeScript”. A regex that doesn’t match? → Tools “Regex tester”. Most workflows here start with paste.

3. ⌘+Kwhen you don’t know where something is.The command palette fuzzy-searches every tab and tool. Type a few letters of what you want, hit Enter, you’re there. Faster than scrolling the sidebar once the toolkit gets big.

Keyboard shortcuts

alt+1 — Home
alt+2 — Playground
alt+3 — HTTP
alt+4 — Realtime
alt+5 — Code Diff
alt+6 — JSON Diff
alt+7 — Tools
⌘+K — Command palette (jump to any tab or tool)
alt+H — Help (works even inside an editor)

Theme

Click the ☀ / ☾ button in the header to flip between dark (default, with the lime-green VibeGear identity) and a calm light mode. Monaco editors and the markdown / mermaid preview flip with you. Your choice persists across sessions.

Playground

A real ES-module JS / TS scratchpad. Paste code, hit Run, see the console output, network calls, and any expressions you’re watching — all in panels alongside the editor.

What runs in there

Real modules — your code is loaded as an ES module with native top-level await. import from URL specifiers like https://esm.sh/lodash works. Bare imports (from "lodash") won’t resolve; we’ll surface a clear hint pointing you at esm.sh.
TypeScript transpiles, types don’t fail the run. We use sucrase (type-stripping only). Type errors light up in the editor but don’t block execution.
Sandboxed. Code runs in an opaque-origin iframe with a 10-second timeout. console.* output is captured, fetch() is patched to surface every call in the Network panel.

Watch expressions

Add expressions that get evaluated in your code’s scope after it runs. Useful for “what was the value of this thing at the end?” — much lighter than sprinkling console.logs.

fetch() — no CORS pain

The patched fetchdoesn’t go directly. It posts the request to the extension’s background service worker, which has <all_urls> permission, performs the real call, and returns the response. Same behavior as the HTTP tab — you can hit any API without setting up local CORS proxies.

(Limitation: only string / URLSearchParams / simple FormData bodies survive the relay; binary bodies are dropped.)

From HTTP → Playground

In the HTTP tab, pick Copy as ▾ → Open in Playgroundon any request. You land in the Playground with a runnable fetch snippet that includes the response-logging boilerplate. Hitting Run gives you status, headers, and a prettified body without typing a thing.

HTTP testing

A full HTTP client. If you’ve used Postman or Insomnia, you’ll feel at home. If you haven’t — read on.

Anatomy of a request

Method: GET to fetch, POST to create, PUT/PATCH to update, DELETE to delete.
URL: where the request goes.
Params: ?key=value tacked on the end of the URL.
Headers: metadata (auth tokens, content type, accepted formats).
Body: the data you’re sending — usually JSON for modern APIs.

Collections

A collection is a folder of related requests that share variables and an authentication setup. Click the Variables & auth link in the sidebar to edit collection-wide settings. Define a baseUrl once and every request can use it as {{baseUrl}}.

Variables — the secret sauce

Reference any variable as {{name}}. They work in URLs, headers, params, body, and auth fields. Two flavors:

Static — values you set on the collection, like baseUrl or tenantId. Switching tenants = edit one row.
Dynamic — names starting with $, like {{$randomEmail}}, {{$randomUUID}}, {{$timestamp}}. Resolved fresh on every send. Look in collection settings for the full list of 21 built-in dynamic variables.

Authentication, in one place

Most APIs need an auth header on every request. Set it once on the collection (Auth tab on the settings page) — every request inside inherits it, no copy-paste.

Bearer: the most common modern auth. The collection adds Authorization: Bearer {{token}} for you.
Basic: username + password, base64-encoded into Authorization: Basic ….
API key: a custom header (or query param) like X-API-Key.

A specific request can opt out (None) or override (Bearer with a different token) without affecting the rest of the collection.

Importing existing API definitions

From cURL: paste any curl … command — even a multi-line one with backslashes. Headers, body, query params, basic auth, and bearer tokens all picked up automatically.
From OpenAPI: drop in a JSON or YAML OpenAPI 3.x spec. We generate one request per (path, method) and seed baseUrl from servers[0].

GraphQL

Pick GraphQL as the body type to get a query editor + a variables panel + an operation-name field. Method auto-promotes to POST, Content-Type: application/json is set for you, and the body goes out as the standard {query, variables, operationName} envelope.

Click Introspect schema to drop the canonical introspection query into the editor — hit Send and the response is your full schema. From there: paste the JSON into the JSON Explorer tool to browse types, or feed it to JSON → TypeScriptfor client types.

Sharing a request

Hit Copy as ▾ next to Send. Get the request as cURL, JavaScript fetch, axios, or Python requests. Variables resolve to their actual values (heads up: this includes secrets — edit before pasting in public).

Reading the response

Text-y (JSON, XML, HTML, plain text) → rendered in a syntax-highlighted editor. JSON is auto-pretty-printed.
Image / video / audio / PDF → rendered inline in a native player or viewer.
Office docs / unknown binary→ download button + (for Office) a “try Office Online Viewer” link that works only if your URL is publicly reachable.

Realtime (WebSocket + SSE)

Test streaming protocols the way you test HTTP requests. Toggle between WebSocket and SSE at the top, paste a URL, hit Connect, watch the messages tick by.

WebSocket

Native ws:// / wss:// connection. Send and receive text or binary frames.
Subprotocols — comma-separated. The classic token-via-subprotocol trick (["bearer", "<token>"]) works for APIs that use it.
Auto-reconnect with exponential backoff (capped at 5 s) when toggled on. The send composer fires on ⌘+Enter.
{ } button on the composer pretty-prints JSON before send.

SSE — with custom headers

We use fetch + ReadableStream instead of the native EventSource. The big practical difference: custom headers (Authorization: Bearer …) work, where EventSource outright forbids them. Authentication that actually matches your real client is the result.

Reconnection follows the SSE spec: server retry: field sets the delay; Last-Event-ID goes back on every reconnect so you can resume.

Message log

Each entry has a timestamp, a direction arrow (↓ in, ↑ out, · system), the data, and — for SSE — the event name and ID. Long bodies collapse to a one-line preview; click Expand for a JSON pretty-print or raw view. Auto-scroll toggles via the checkbox.

Code Diff

Side-by-side comparison of two text snippets, with syntax highlighting for 20+ languages. The classic use case: you asked the AI to refactor a function, you want to see what it actually changed.

How to use it

Paste the original on the left (“Before”), the new version on the right (“After”). Either pane is editable, so you can experiment with the AI’s suggestion in place.
Pick a language from the dropdown — or leave “Auto-detect” on, and we’ll guess from the contents on paste.
Toggle Inline for a single-pane unified view, Ignore whitespace if a reformat snuck into the AI’s diff, Word wrap to stop horizontal scrolling.

Sharing a diff

Click Copy as patch to put a unified diff (the kind git produces) on your clipboard. Paste it into a pull request, a Slack message, or an email — most tools render it nicely.

JSON Diff

Comparing JSON specifically. Same shape as Code Diff but smarter about JSON: live validation, format/minify both sides at once, and a JSONPath inspector that runs against both panes simultaneously.

Two-line workflow

1. Paste two JSON blobs. They light up green if valid, red if not.
2. Click Format both. Now line-by-line diff is meaningful.

JSONPath inspection

Click the JSONPath button in the toolbar to open an inline path inspector. Type something like $.users[*].name, and you’ll see the matched values from the left and right panes side by side. Useful for “did the field I care about actually change?”.

See the Concepts cheatsheet for the JSONPath syntax we support.

Got YAML, not JSON?

Paste it anyway. Click From YAML in the toolbar. Each pane is parsed as YAML and replaced with the JSON equivalent. Already- valid JSON round-trips cleanly, so this is a safe button to mash.

Tools

A grab bag of dev utilities — string transforms plus inspectors, generators, converters — organized into nine categories in the left sidebar. All run locally.

Persistence

Tool-by-tool inputs (regex pattern, JSONPath, cron expression, color, gradient stops, etc.) are remembered between sessions in your browser’s local storage. Switch tools, switch tabs, close the window — your inputs come back.

Discovery

With this many tools, the sidebar can feel like a long scroll. Use ⌘+K from anywhere to fuzzy-search every tool by name and jump straight to it.

Concepts cheatsheet

Short refreshers on the small handful of concepts our tools assume you’re comfortable with. If your AI just used one of these in generated code and you want to know what it actually does — start here.

JWT (JSON Web Token)

A signed, base64-encoded token APIs use to prove who you are. Looks like three dot-separated parts: header.payload.signature. The header says how it was signed. The payload contains “claims” — data like your user ID, expiration time, roles. The signature is what stops people from forging tokens.

JWT debugger (Tools → Inspect) decodes a token so you can read the claims. Standard claims like exp (expires) and iat (issued at) get human-readable timestamps.

JWT signer mints a fresh token from a payload and a secret. Useful when you want to test an authenticated endpoint — make a token with the role/claims your server expects, paste it into the HTTP tab.

Regular expressions (regex)

A mini-language for matching patterns in text. \d means a digit, \w a word character, +means “one or more”, (...) captures a group. Indispensable but easy to get wrong — AI especially gets escape rules wrong.

The Regex tester shows matches highlighted in your sample text and lists capture groups. Toggle the flags (g/i/m/s/u/y) to mirror what your code uses.

JSONPath

Like CSS selectors, but for JSON. Lets you “extract” a value from a deep object without writing loops.

$ — the whole document
$.users — the users field
$.users[0] — the first user
$.users[*].name— every user’s name
$..email — every email anywhere in the document, no matter how deep

Slices ([N:M]), filter expressions ([?(@.x=='y')]), and unions ([a,b]) aren’t supported yet — the parser will tell you cleanly.

Cron expressions

Five space-separated numbers that describe a schedule. Used by cron-like job schedulers everywhere (GitHub Actions, Vercel Cron, Linux crontab, Kubernetes CronJobs).

┌──── minute (0-59)
│ ┌── hour (0-23)
│ │ ┌── day of month (1-31)
│ │ │ ┌── month (1-12)
│ │ │ │ ┌── day of week (0-6, Sun=0)
│ │ │ │ │
*/15 * * * *      every 15 minutes
0 9 * * 1-5       09:00 on weekdays
0 0 1 * *         midnight on the 1st of every month
0 */6 * * *       every 6 hours, on the hour

The Cron decoder turns any expression into plain English and lists the next 5 fire times.

OpenAPI

A standard for describing REST APIs in YAML or JSON. Lists every endpoint, what parameters it takes, what it returns. If your AI generated an API, ask it for an OpenAPI spec; drop it into the HTTP tab via “Import OpenAPI”, and you get a runnable collection instantly.

cURL

A command-line HTTP client that everyone uses to share API examples. If you see curl …in documentation or in an AI’s response, paste it into the HTTP tab’s “Import from cURL” — it becomes a clickable, editable, saveable request.

GraphQL

An alternative to REST. Instead of many endpoints (/users, /posts) returning fixed shapes, GraphQL has a single endpoint where you POST a query describing exactly what fields you want. The server returns just those fields.

In the HTTP tab, set the body type to GraphQL. You get a query editor and a variables JSON panel. The wire format is automatic: we wrap your inputs as {query, variables, operationName} and POST as JSON.

Click Introspect schema to drop the canonical introspection query into the editor. Hit Send — the response is the full schema. Use the JSON Explorer tool (Tools → Inspect) to browse types, or feed the response to JSON → TypeScript for client types.

OAuth 2.0 + PKCE

OAuth 2.0 is the standard way to delegate authentication: your app sends the user to an identity provider (Google, GitHub, Auth0, etc.), the provider redirects back with a code, your backend exchanges that code for tokens. PKCE(“pixie”) is the variant that makes the flow safe for public clients (SPAs, mobile, CLIs).

The OAuth 2.0 helper (Tools → Inspect) generates the three pieces you need:

code_verifier — random secret, kept in your client.
code_challenge — SHA-256 of the verifier, sent in the authorize URL as code_challenge + code_challenge_method=S256.
state — opaque random value to prevent CSRF; you verify it matches on the redirect back.

It also has an authorize URL builder (assembles the full URL with the right params) and a return URL parser (paste the redirect-back URL → see code / state / id_token / errors, with id_token JWTs decoded inline).

Mermaid diagrams

A text-to-diagram language. Used everywhere modern docs live — GitHub Markdown, Notion, Obsidian, MkDocs. Looks like:

flowchart LR
  A[Client] --> B(Server)
  B --> C{Auth?}
  C -->|Yes| D[Process]
  C -->|No| E[401]

The Mermaid preview tool (Tools → Convert) renders it live as you type — flowcharts, sequence diagrams, class diagrams, state machines, ERDs, Gantt charts. Copy or download the SVG.

AI tokens

AI models bill per token, not per character. Roughly a token is one short word or piece of one. Different model families use different tokenizers — what counts as 1 token in one model may be 2 or 3 in another.

The AI token counter(Tools → Inspect) gives exact counts for OpenAI’s cl100k_base (GPT-3.5, GPT-4) and o200k_base(GPT-4o, GPT-4.1). Anthropic doesn’t publish a public Claude tokenizer, so we estimate via chars / 3.6 — within ~5–10% on English prose, less accurate on code or non-Latin scripts. The label says “approximate” so you don’t forget.

Color, contrast, OKLCH

Modern CSS keeps adding color formats. hex / rgb are old friends. hsl is easier to reason about (rotate hue, slide saturation). OKLCH is the newest — perceptually uniform, meaning equal lightness numbers actually look equally light, which is true of very few of the others.

The Color toolkit (Tools → Convert) parses any of them (plus named colors and oklab / color-mix / anything CSS knows) and shows you all formats at once.

The Contrast sub-tab gives you the WCAG ratio + pass / fail for AA body, AA large, AAA body, AAA large, and UI components. For text on a page: 4.5:1 is the usual target. For headlines: 3:1 is OK if the font is ≥18 pt or 14 pt bold.

Privacy & subscription

VibeGear runs entirely in your browser. The only network calls the extension makes are the requests you send from the HTTP tab, plus a thin entitlement check for the subscription.

What we never see

The text you diff, escape, hash, transform, or generate.
The bodies / headers / responses of HTTP requests — those go from your browser direct to the API you’re hitting.
The contents of any file you drop on a pane.
Your browsing history. (It’s not that kind of extension.)

What we do store

A random anonymous ID generated on first install. Used as the key for your trial / subscription state.
Your saved HTTP collections + tool inputs — but only in your browser’s local storage. They never leave the machine.

Subscription

7 days free, then VibeGear Premium is $9.99 / €9.99 per year. Billing is handled by Paddle as merchant of record (they take care of VAT and tax in 190+ countries — we never see your card or your address). The trial clock lives on a small server we run; that server only knows your anonymous ID and your subscription status.

Cancel anytime — your subscription stays active until the end of the period you paid for. Email hello@vibegear.dev to delete your subscription record entirely.

See the full privacy policy for details.

Help

VibeGear in 90 seconds

What lives where

The three habits worth forming

Keyboard shortcuts

Theme

Playground

What runs in there

Watch expressions

fetch() — no CORS pain

From HTTP → Playground

HTTP testing

Anatomy of a request

Collections

Variables — the secret sauce

Authentication, in one place

Importing existing API definitions

GraphQL

Sharing a request

Reading the response

Realtime (WebSocket + SSE)

WebSocket

SSE — with custom headers

Message log

Code Diff

How to use it

Sharing a diff

JSON Diff

Two-line workflow

JSONPath inspection

Got YAML, not JSON?

Tools

Categories

Persistence

Discovery

Concepts cheatsheet

JWT (JSON Web Token)

Regular expressions (regex)

JSONPath

Cron expressions

OpenAPI

cURL

GraphQL

OAuth 2.0 + PKCE

Mermaid diagrams

AI tokens

Color, contrast, OKLCH

Privacy & subscription

What we never see

What we do store

Subscription