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

npm install svelte-barcode-gen
# or
pnpm add svelte-barcode-gen

Basic Usage

<script>
	import { Barcode } from 'svelte-barcode-gen';
</script>

<Barcode value="Hello World" />

Advanced Usage

With Custom Options

<script>
	import { Barcode } from 'svelte-barcode-gen';
</script>

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

With Validation

<script>
	import { Barcode } from 'svelte-barcode-gen';

	let isValid = $state(true);

	function handleValidation(valid) {
		isValid = valid;
		if (!valid) {
			console.error('Invalid barcode value');
		}
	}
</script>

{#if !isValid}
	<p>Invalid barcode value for the selected format</p>
{/if}

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

Multiple Barcodes with Chaining (Advanced)

<script>
	import { BarcodeAdvanced } from 'svelte-barcode-gen';

	const operations = [
		{
			type: 'options',
			options: { font: 'OCR-B' }
		},
		{
			type: 'barcode',
			format: 'EAN13',
			value: '1234567890128',
			options: { fontSize: 18, textMargin: 0 }
		},
		{
			type: 'blank',
			size: 20
		},
		{
			type: 'barcode',
			format: 'EAN5',
			value: '12345',
			options: { height: 85, textPosition: 'top' }
		}
	];
</script>

<BarcodeAdvanced {operations} elementTag="svg" />

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

<Barcode>

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 |

<BarcodeAdvanced>

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 |

JsBarcodeOptions

| 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:

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

# 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.