QR code generator template

HTML
JavaScript

Turn a URL or any text into a QR code image you can download and print.

A plain HTML and JavaScript app that makes QR codes. Enter a URL or any text, pick the margin, and get a QR code image to download. There’s no framework and no build step, so it’s easy to read and change. Use it to make codes for flyers, packaging and menus, or lift the function to add codes to your own pages.

What it does

Any URL or text: Encode links, plain text or short messages, up to 500 characters.
Download and print: Returns a PNG you can download, with a margin you choose.
No build step: Plain HTML, CSS and JavaScript: open the files and change them, nothing to compile.
Keeps your key private: The page calls a Vercel function in api/, which holds the key, checks the input and limits each visitor to 10 codes a minute.
Runs locally in one command: npm run dev serves the page and runs the api/ functions together, the same way Vercel does, with no CLI to install.

How it works

The Vercel function: it checks the value and margin, then calls QR Code Generator.

api/qr.js

import { guard, callApi, respond, fail, str } from '../lib/apiverve.js';

const MARGINS = [0, 1, 2, 4];

/** POST /api/qr { value, margin }: a PNG QR code, returned as a temporary download URL. */
export async function POST(request) {
  const blocked = guard(request);
  if (blocked) return blocked;

  const body = await request.json().catch(() => ({}));
  const value = str(body.value, 500);
  const margin = Number(body.margin ?? 0);
  if (!value) return fail('Enter a URL or text for the QR code');
  if (!MARGINS.includes(margin)) return fail(`Margin must be one of ${MARGINS.join(', ')}`);

  return respond(() => callApi('qrcodegenerator', { json: { value, margin, format: 'png' } }));
}

See the whole file on GitHub →

Deploy it

Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for APIVERVE_API_KEY: paste your key there.
Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.

Try the QR Code Generator API — the call this template makes

Request

POSTapi.apiverve.com/v1/qrcodegenerator

Body

valuestring

Verification

Format

No key required to try it. Get a key to use it in your app.

Example

{
  "status": "ok",
  "error": null,
  "data": {
    "id": "b07577c8-e17f-4af3-aeff-94c74d9ea04a",
    "format": "png",
    "type": "url",
    "correction": "M",
    "size": 5,
    "margin": 0,
    "expires": 1766096864874,
    "downloadURL": "https://storage.googleapis.com/apiverve/APIData/qrcodegenerator/2556d708-7ec4-45ce-b0fb-98d47fcf170f.png?GoogleAccessId=635500398038-compute%40developer.gserviceaccount.com&Expires=1766096864&Signature=fRvOFggSHakWfnBqT46dyv9trO4sVcwPjvjV8hpFG9yI2G2UG%2FoAvJFwzX%2F%2FYPcxRfzcR5Cnc6uSx74iJANJXn42Hpcgr5EudNa%2BxtAo106LfyWBaQgaZggNVai4D6WsDYyBL8sTPGIDxjnldVFIJy7HFMRCKUZ%2B3KQMiYujmFoc2tVMVi7lngxrfAFIylHOmEgCXDaAWXGb6NwV%2BZNsDE1Ju9DLseLnhZ%2Fh2LxIbxRiF042MLkg2hp54P%2FrIhABfOcwW7CoV9Hpn4N88t5818ljyCrLfeLQpxM5gtcRCZJ3MYiICwLkmr%2F62KDmx5JBMFLB%2FVfh%2Bewsc0QJytB3vg%3D%3D"
  }
}