Barcode Generator

Generate Code 128, Code 39, EAN, UPC, QR Code, Data Matrix and other barcode images with custom width and height.

Open tool Back to tools
// about

About this Tool

Create a barcode image from text, product numbers, URLs, or identifiers. Choose a symbology and set the exact image dimensions before downloading it.

How to use it

  1. Enter the value to encode and choose the barcode format.
  2. Set the width and height in pixels, then select Generate.
  3. Preview the barcode and download the image file.

Why people use this tool

  • Supports common retail, logistics, developer, and 2D barcode formats.
  • Custom width and height make the image suitable for labels, documents, and screens.
  • The generated image can be downloaded immediately without an account.
Guides · QR & barcodes · 7 min read

Making QR Codes That Scan: Error Correction Levels, Print Size and Barcodes

QR codes are on flyers, business cards, menus and packaging—but printed codes that phones struggle to read are surprisingly common. Here is how to create codes that scan first time.

The QR code was developed in 1994 by Denso Wave in Japan to track car parts and is standardised as ISO/IEC 18004. The three large squares in the corners (finder patterns) let scanners read it quickly from any angle.

How QR codes work, choosing error correction (L, M, Q, H), minimum print size and quiet zone, why codes fail to scan, and QR vs product barcodes.
Read guide →
Build it with AI

Build this tool yourself with AI

Want your own version of this tool? Copy the work-order prompt into an AI chat, or save the skill file for an AI coding agent. Both describe the features, edge cases and test cases we used when building it.

AI work-order prompt

Paste it as-is into an AI chat such as Claude, ChatGPT or Gemini.

You are an experienced full-stack web developer. Build a web tool called "Barcode Generator" that meets the requirements below.

## Goal

Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.

## Core features

- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit

## Inputs

- Value to encode
- Format, width, height

## Outputs

- Barcode image
- Final value including check digit

## Edge cases and handling rules

- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- Check digit is computed for EAN-13 '880123456789'
- Invalid characters raise an error

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

Skill (SKILL.md)

Save it as .claude/skills/build-barcode-generator/SKILL.md for AI coding agents such as Claude Code to reuse whenever you build or change this tool.

---
name: build-barcode-generator
description: Use when building or changing a Barcode Generator tool. Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.
---

# Build: Barcode Generator

## Goal

Build a tool that renders linear barcodes such as Code 128 and EAN-13 at a chosen size.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Formats: Code 128, EAN-13, UPC-A, Code 39
- Width and height in pixels
- Optional human-readable text below
- Download SVG/PNG
- Automatic EAN-13 check digit

## Inputs

- Value to encode
- Format, width, height

## Outputs

- Barcode image
- Final value including check digit

## Rules

- Validate allowed characters and lengths per format (EAN-13: 12–13 digits)
- Error when a supplied check digit is wrong
- Output exactly the requested dimensions
- Note that retail EAN numbers must be issued by GS1
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] Code 128 '123456789012' at 500×160 gives an SVG with width=500 and height=160
- [ ] Check digit is computed for EAN-13 '880123456789'
- [ ] Invalid characters raise an error

Tips for working with AI

  • Tell the AI your stack (for example React, Vue or plain HTML) on the first line so the code matches your project.
  • Ask it to run the listed test cases and show the results before you accept the code.
  • Never paste real secrets, customer data or API keys into the prompt; use sample values instead.