GimmeHttp

gimmehttp.com

HTTP request code snippet generator

GimmeHttp is a library for generating HTTP request code snippets in various languages based on a simple configuration. Quickly output API requests.

Using Vue 3? See the Vue (v3) Usage section. Using React? See the React Usage section.

Features

• Generate HTTP request code snippets in various languages
• Dead simple configuration(help me keep it that way)
• Import only the languages you need — everything else is tree-shaken out of your bundle
• Framework-agnostic UI component with language/client options bar, copy button, theming, and built-in syntax highlighting
• Add Custom Languages and Clients
• Engine-only entry (gimmehttp/core) when you just want generated text

Supported Languages and Clients

| Language | Clients | Language | Clients | Language | Clients | | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | | | libcurl | | fetch, axios, jQuery, ky | | nethttp, faraday, httparty | | | http, restsharp, flurl | | http, fetch, axios, got | | reqwest, ureq | | | http, dio | | nsurlsession | | curl, httpie, wget | | | http, resty | | curl, guzzle, symfony | | nsurlsession, alamofire | | | httpurlconnection, okhttp, httpclient | | restmethod | | http, requests, httpx, aiohttp | | | ktor, okhttp | | httr | | fetch, axios, jQuery, ky |

Installation

To install GimmeHttp, simply use npm:

npm install gimmehttp

Bundle sizes

Approximate minified + gzip sizes from the published build (what a bundler/CDN typically ships):

| Entry | gzip | | ----- | ---- | | gimmehttp UI (ESM) | ~51 kB | | CDN / <script> build (dist/gimmehttp.js) | ~63 kB | | gimmehttp/css | ~2 kB | | gimmehttp/core (engine) | ~3 kB | | gimmehttp/clients (all clients) | ~16 kB | | gimmehttp/vue | ~1 kB | | gimmehttp/react | ~1 kB |

Import only the clients you need — unused ones are tree-shaken. A typical single client is well under 1 kB gzip.

Register Clients

No clients are registered by default. Import the clients you want from gimmehttp/clients and register them once at startup — bundlers tree-shake the rest, so importing two clients only bundles those two.

import { Register } from 'gimmehttp/core'
import { goHttp, shellCurl } from 'gimmehttp/clients'

Register([goHttp, shellCurl])

Or register everything:

import { Register } from 'gimmehttp/core'
import { allClients } from 'gimmehttp/clients'

Register(allClients)

Simple Example

Here is a quick example of generating a simple GET request in Go using the engine:

import { Register, Generate } from 'gimmehttp/core'
import { goHttp } from 'gimmehttp/clients'

// Register the clients you want available
Register([goHttp])

// Create settings
const settings = {
  language: 'go',
  target: 'native',
  http: {
    method: 'GET',
    url: 'https://example.com'
  }
}

// Generate code
const { code, error } = Generate(settings)
if (error) {
  console.error(error)
}

// Output generated code
console.log(code)

Output:

package main

import (
  "fmt"
  "net/http"
  "io"
)

func main() {
  url := "https://example.com"

  req, _ := http.NewRequest("GET", url, nil)

  resp, _ := http.DefaultClient.Do(req)
  defer resp.Body.Close()

  body, _ := io.ReadAll(resp.Body)

  fmt.Println(string(body))
}

Generate Function

The core functionality of GimmeHttp is its Generate function. This function takes in a request object and returns the generated code snippet as a string. The request object should have the following structure:

Generate(settings: Settings): Outcome

Settings Object

interface Settings {
  // Selection
  language?: string // go, javascript, python, etc. (defaults to javascript)
  client?: string // http, axios, requests, etc. (defaults per language)

  // Code generation
  config?: {
    // The character(s) to use for indentation
    indent?: string // default: '  '

    // The character(s) to use for joining lines
    join?: string // default: '\n'

    // Whether or not to handle errors in the generated code
    // default: false to help keep the generated code simple by default
    handleErrors?: boolean // default: false
  }

  // Request
  http: {
    method: string // 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
    url: string // ex: 'https://example.com'

    // Optional request details
    headers?: { [key: string]: string | string[] }
    cookies?: { [key: string]: string }
    params?: { [key: string]: string | string[] }
    body?: any
  }
}

Outcome Object

The Generate function returns an Outcome object. If the object contains an error property, an error occurred during code generation.

import { Generate } from 'gimmehttp/core'

const { code, error } = Generate(request)
if (error) {
  console.error(error)
}

// Output generated code
console.log(code)

interface Outcome {
  error?: string // An error message if an error occurred
  code?: string // Generated code
}

Registry Custom Example

If you want to register a custom language/client, you can do so using the Register function:

interface Target {
  default?: boolean
  language: string
  target: string
  generate: (config: Config, http: Http) => string
}

import { Register, Generate } from 'gimmehttp/core'
import type { Config, Http } from 'gimmehttp/core'

const myCustomTarget = {
  language: 'html',
  target: 'href',
  generate(config: Config, http: Http): string {
    // Custom code generation logic
    return `<a href="${http.url}">${http.method}</a>`
  }
}

Register(myCustomTarget)

const settings = {
  language: 'html',
  target: 'href',
  http: {
    method: 'GET',
    url: 'https://example.com'
  }
}

const { code, error } = Generate(settings)
if (error) {
  console.error(error)
}
console.log(code)

Output:

<a href="https://example.com">GET</a>

Examples

POST Request Example

const settings = {
  language: 'javascript',
  target: 'fetch',
  http: {
    method: 'POST',
    url: 'https://example.com',
    headers: {
      'Content-Type': 'application/json'
    },
    body: {
      key1: 'value1'
    }
  }
}

const { code, error } = Generate(settings)
if (error) {
  console.error(error)
}
console.log(output)

Output:

fetch('https://example.com', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key1: 'value1' })
})
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    return response.text()
  })
  .then((data) => console.log(data))

Feel free to contribute to the project, suggest improvements, or report issues on our GitHub page!

JavaScript UI Component

The default gimmehttp import is a framework-agnostic UI component: styled code output with a flush options bar (language modal, client dropdown, labeled Copy button, light/dark toggle), and built-in highlight.js syntax highlighting. Point it at a container, give it a request, and it handles the rest.

import { GimmeHTTP } from 'gimmehttp'
import 'gimmehttp/css'
import { goHttp, jsFetch, shellCurl } from 'gimmehttp/clients'

const gh = new GimmeHTTP({
  // Required
  container: '#code', // selector or HTMLElement
  clients: [goHttp, jsFetch, shellCurl], // registers + limits the picker
  settings: {
    language: 'go', // initial language
    client: 'http', // initial client
    theme: 'dark', // 'dark' | 'light'
    toolbarShow: true, // show the options toolbar
    pickerShow: true, // show language/client picker
    copyShow: true, // show copy button
    themeShow: true, // show light/dark theme button
    config: { indent: '  ' }, // engine config
    http: {
      method: 'POST',
      url: 'https://example.com/api/users',
      headers: { 'Content-Type': 'application/json' },
      body: { first_name: 'Billy' }
    }
  },
  events: {
    afterChange: (language, client, code) => {}
  }
})

// Methods
gh.setSettings({ language: 'python', theme: 'light' })
gh.setHttp({ method: 'GET', url: 'https://example.com' })
gh.setLanguage('python')
gh.setClient('requests')
gh.setTheme('light')
gh.getCode()
gh.destroy()

If you only need generated text (no UI), use gimmehttp/core and call Generate yourself.

Styling

Theme the widget by overriding CSS variables on .gimmehttp (or a parent with higher specificity). Only set what you want to change:

.my-theme .gimmehttp {
  --gh-bg: #0b1220;
  --gh-fg: #d7e3f4;
  --gh-accent: #3dd6c6;
  --gh-surface: #122033;
  --gh-border: #243447;
  --gh-kw: #7aa2f7;
  --gh-str: #9ece6a;
}

Chrome: --gh-bg, --gh-fg, --gh-muted, --gh-border, --gh-accent, --gh-surface, --gh-hover, --gh-overlay, --gh-radius, --gh-shadow.

Syntax: --gh-kw, --gh-fn, --gh-const, --gh-str, --gh-var, --gh-cmt, --gh-tag.

CDN / script tag

The CDN build pre-registers every client and exposes the UI component as the global GimmeHTTP, with the engine attached as statics (GimmeHTTP.Generate, GimmeHTTP.Register, ...).

Live editable demo: gimmehttp.com/usage#cdn

<link rel="stylesheet" href="https://unpkg.com/gimmehttp/dist/gimmehttp.css" />
<script src="https://unpkg.com/gimmehttp/dist/gimmehttp.js"></script>

<div id="code"></div>

<script>
  new GimmeHTTP({
    container: '#code',
    settings: {
      http: { method: 'GET', url: 'https://example.com' }
    }
  })
</script>

Vue (v3) Usage

The Vue component is a thin wrapper around the JavaScript UI component.

Install styles

Add the shared package CSS once (e.g. in main.ts). Same import for vanilla, Vue, and React.

import 'gimmehttp/css'

Register clients at startup

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import GimmeHttpVue from 'gimmehttp/vue'

import { Register } from 'gimmehttp/core'
import { allClients } from 'gimmehttp/clients' // or import individual clients

Register(allClients)

const app = createApp(App)
app.use(GimmeHttpVue) // optional global registration
app.mount('#app')

Local usage (component)

<script lang="ts">
  import { defineComponent } from 'vue'
  import { GimmeHttp } from 'gimmehttp/vue'
  import type { Settings } from 'gimmehttp'

  export default defineComponent({
    components: { GimmeHttp },
    data() {
      return {
        settings: {
          theme: 'dark',
          http: {
            method: 'GET',
            url: 'https://example.com'
          }
        } as Settings
      }
    }
  })
</script>

<template>
  <GimmeHttp :settings="settings" />
</template>

Props overview:

• settings (required): Settings — language, client, theme, toolbarShow, pickerShow, copyShow, themeShow, config, http
• Emits update:language and update:client when the selection changes

React Usage

The React component is a thin wrapper around the JavaScript UI component.

Install styles

Add the shared package CSS once. Same import for vanilla, Vue, and React.

import 'gimmehttp/css'

Register clients at startup

import { Register } from 'gimmehttp/core'
import { goHttp, jsFetch, shellCurl } from 'gimmehttp/clients'

Register([goHttp, jsFetch, shellCurl])

Component usage

import { useState } from 'react'
import { GimmeHttp } from 'gimmehttp/react'
import type { Settings } from 'gimmehttp'

export function Example() {
  const [settings, setSettings] = useState<Settings>({
    theme: 'dark',
    http: {
      method: 'GET',
      url: 'https://example.com'
    }
  })

  return (
    <GimmeHttp
      settings={settings}
      onLanguageChange={(language) => setSettings((s) => ({ ...s, language }))}
      onClientChange={(client) => setSettings((s) => ({ ...s, client }))}
    />
  )
}

Props overview:

• settings (required): Settings — language, client, theme, toolbarShow, pickerShow, copyShow, themeShow, config, http
• onLanguageChange / onClientChange — selection callbacks
• ref — GimmeHttpRef with gimmeHttp for the underlying instance

Contributing

GimmeHttp is an open-source project that welcomes contributions from the community. If you would like to contribute, please follow these steps:

1. Fork the repository
2. npm install
3. npm run dev
4. open http://localhost:1111
5. Make your changes
6. Write tests
7. Git commit and push your changes
8. Submit a pull request