Introduction

📑 Docs (grab.js.org) 🎯 Example Strategies

npm i grab-url

GRAB: Generate Request to API from Browser

GRAB is the FBEST Request Manager: Functionally Brilliant, Elegantly Simple Tool — One Function, no dependencies, minimalist syntax, more features than alternatives

Requests & Data

Send anything, get back parsed data — no boilerplate per content type.

• Auto-JSON Convert: Pass parameters and get response or error in JSON, handling other data types as is.
• Auto-Unzip: Automatically extracts ZIP responses into { data: { filename: content } } using archiver-web. Set unzip: false to disable.
• DOM Parsing: Automatically parses HTML responses. Pass parseDOM: "selector" for CSS selector extraction or parseDOM: false to disable. Uses linkedom.
• Request Stategies: 🎯 Examples show common stategies like debounce, repeat, proxy, unit tests, interceptors, file upload, etc

Reliability & Traffic Control

Keep flaky networks and click-happy users from cascading into your API.

• Cancel Duplicates: Prevent this request if one is ongoing to same path & params, or cancel the ongoing request.
• Timeout & Retry: Customizable request timeout, default 20s, and auto-retry on error
• Regrab On Error: Regrab on timeout error, or on window refocus, or on network change, or on stale data.
• Rate Limiting: Built-in rate limiting to prevent multi-click cascading responses, require to wait seconds between requests.
• Repeat: Repeat request this many times, or repeat every X seconds to poll for updates.

Performance & UI State

Fewer round trips, and loading state your components can bind to directly.

• isLoading Status: Sets .isLoading=true on the pre-initialized response object so you can show a "Loading..." in any framework
• Frontend Cache: Set cache headers and retrieve from frontend memory for repeat requests to static data.
• Pagination Infinite Scroll: Built-in pagination for infinite scroll to auto-load and merge next result page, with scroll position recovery.
• Loading Icons: Import from grab-url/icons to get enhanced animated loading icons, including the quantum sphere — an interactive 3D orbital loader for React and Svelte that re-rolls its own colors and collapses each ring you hover: import QuantumOrbital from 'grab-url/icons/quantum-sphere'.

Testing & Debugging

See every request, fake the ones you don't have yet, and assert on the rest.

• Mock Server Support: Configure window.grab.mock for development and testing environments
• DevTools: Ctrl+Alt+I overlays webpage with devtools showing all requests and responses, timing, and JSON structure.
• Debug Logging: Adds global log() and prints colored JSON structure, response, timing for requests in test.
• Request History: Stores all request and response data in global grab.log object

Setup & Integration

Drop it into any stack, any runtime, or generate a whole client from a spec.

• Agent Skill Install the skill into any agent (Claude, Cursor, Gemini, Codex, Antigravity, etc.) with one command: npx skills add vtempest/GRAB-URL@use-grab-request.
• Globals: Adds to window in browser or global in Node.js so you only import once: grab(), log(), grab.log, grab.mock, grab.defaults
• Base URL Based on Environment: Configure grab.defaults.baseURL once at the top, overide with SERVER_API_URL in .env.
• Framework Agnostic: Alternatives like TanStack work only in component initialization and depend on React & others.
• OpenAPI SDKs: Generate a typed client from any OpenAPI spec with Hey API and have it send requests with grab instead of axios: npx api2client ./openapi.yaml ./src/client. Every endpoint gets caching, retries, rate limiting, dedupe and mocks.

Examples

import grab from 'grab-url';

let res = $state({}) as {
  results: Array<{title:string}>,
  isLoading: boolean,
  error: string,
};

await grab('search', {
  response: res,
  query: "search words",
  post: true
})
 
grab('user').then(log)

//in svelte component
{#if res.results}
    {res.results}
{:else if res.isLoading}
    ...
{:else if res.error}
    {res.error}
{/if}

 //Setup Mock testing server, response is object or function
 window.grab.mock["search"] = {
   response: (params) => {
     return { results: [{title:`Result about ${params.query}`}] };
   },
   method: "POST"
 };

 //set defaults for all requests
 grab("", { 
   setDefaults: true,
   baseURL: "http://localhost:8080",
   timeout: 30,
   debug: true,
   rateLimit: 1,
   cache: true,
   cancelOngoingIfNew: true,
 });

 grab.defaults.baseURL = "http://localhost:8080/api/";

Screenshots

Animated SVG Loading Icons with Customizable Colors

Debug Colorized log(JSON)

Autocomplete option names

Hover over options for info

Comparison of HTTP Request Libraries

Stop trying to make fetch happen! *

Why fetch things when you can just GRAB?

Debugging requests is a bitch. Make the switch!