svelte-barcode-gen

A Svelte 5 wrapper for JsBarcode - Generate barcodes in your Svelte applications with full TypeScript support.

📺 Live Demo | 📦 GitHub Repository

Features

- 🎯 Full TypeScript support with type definitions
- 🔧 Supports all JsBarcode formats (CODE128, EAN, UPC, CODE39, ITF, MSI, Pharmacode, Codabar, CODE93)
- 🎨 Customizable styling (colors, fonts, margins)
- 🖼️ Multiple rendering targets (SVG, Canvas, Image)
- ✅ Built-in validation with callbacks
- 🔗 Advanced chaining API support

Installation

``bash
npm install svelte-barcode-gen


or


pnpm add svelte-barcode-gen
`

Basic Usage

`svelte



`

Advanced Usage

$3

`svelte


value="1234567890128"
elementTag="svg"
options={{
format: 'EAN13',
width: 2,
height: 100,
displayValue: true,
fontSize: 20,
lineColor: '#000000',
background: '#ffffff',
margin: 10
}}
/>
`

$3

`svelte


{#if !isValid}


Invalid barcode value for the selected format

{/if}

value="123"
options={{
format: 'EAN13',
valid: handleValidation
}}
/>
`

$3

`svelte



`

Supported Barcode Formats

- CODE128 - CODE128 (auto mode), CODE128A, CODE128B, CODE128C
- EAN/UPC - EAN13, EAN8, EAN5, EAN2, UPC
- CODE39
- ITF - ITF, ITF14
- MSI - MSI, MSI10, MSI11, MSI1010, MSI1110
- Pharmacode
- Codabar
- CODE93

API Reference

$3

Main component for generating single barcodes.

#### Props

| Prop | Type | Default | Description |
| ------------ | ---------------------------- | -------- | ------------------------------- |
| value | string | required | The value to encode |
| elementTag | 'svg' \| 'canvas' \| 'img' | 'img' | HTML element type for rendering |
| options | JsBarcodeOptions | {} | Configuration options |

$3

Component for advanced use cases with method chaining.

#### Props

| Prop | Type | Default | Description |
| ------------------- | ---------------------------- | ------- | ---------------------------- |
| elementTag | 'svg' \| 'canvas' \| 'img' | 'svg' | HTML element type |
| chainedOperations | ChainedOperation[] | [] | Array of operations to chain |

$3

| Option | Type | Default | Description |
| -------------- | ------------------------------- | ------------- | -------------------------------- |
| format | BarcodeFormat | 'CODE128' | Barcode format |
| width | number | 2 | Width of a single bar |
| height | number | 100 | Height of the barcode |
| displayValue | boolean | true | Show text below/above barcode |
| text | string | undefined | Override display text |
| fontOptions | string | '' | Font styling ('bold', 'italic') |
| font | string | 'monospace' | Font family |
| textAlign | 'left' \| 'center' \| 'right' | 'center' | Text alignment |
| textPosition | 'top' \| 'bottom' | 'bottom' | Text position |
| textMargin | number | 2 | Space between barcode and text |
| fontSize | number | 20 | Font size |
| background | string | '#ffffff' | Background color |
| lineColor | string | '#000000' | Bar color |
| margin | number | 10 | Margin on all sides |
| marginTop | number | undefined | Top margin (overrides margin) |
| marginBottom | number | undefined | Bottom margin (overrides margin) |
| marginLeft | number | undefined | Left margin (overrides margin) |
| marginRight | number | undefined | Right margin (overrides margin) |
| valid | (valid: boolean) => void | undefined | Validation callback |

TypeScript Support

This package includes full TypeScript definitions. Import types as needed:

`typescript
import type {
BarcodeFormat,
JsBarcodeOptions,
BarcodeProps,
ElementTag,
} from "svelte-barcode-gen";
`

Examples

Check out the live interactive demo or view the source code in /src/routes/+page.svelte in the GitHub repository.

Development

`bash


Install dependencies

pnpm install

Start development server

pnpm dev

Build library

pnpm build

Check types

pnpm check
``

License

MIT

Credits

Built on top of JsBarcode by Johan Lindell.