CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jsbarcode

JavaScript barcode generator library that creates various types of 1D barcodes with extensive customization options for both browsers and Node.js environments.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Configuration and Options

JsBarcode provides extensive customization options for barcode appearance, sizing, colors, fonts, and text positioning. All options can be passed as the third parameter to the main JsBarcode function.

Capabilities

Core Configuration Options

const defaultOptions = {
  // Barcode dimensions
  width: 2,              // Width of a single bar in pixels
  height: 100,           // Height of the barcode in pixels

  // Format and detection
  format: "auto",        // Barcode format or "auto" for automatic detection

  // Text display
  displayValue: true,    // Show text below/above barcode
  font: "monospace",     // Font family for text
  fontOptions: "",       // Font style: "", "bold", "italic", "bold italic"
  fontSize: 20,          // Font size in pixels
  textAlign: "center",   // Text alignment: "left", "center", "right"
  textPosition: "bottom", // Text position: "top", "bottom"
  textMargin: 2,         // Space between barcode and text in pixels

  // Colors
  background: "#ffffff", // Background color (hex, rgb, rgba, named)
  lineColor: "#000000",  // Barcode line color (hex, rgb, rgba, named)

  // Margins and spacing
  margin: 10,            // All margins in pixels
  marginTop: undefined,  // Top margin override
  marginBottom: undefined, // Bottom margin override  
  marginLeft: undefined, // Left margin override
  marginRight: undefined, // Right margin override

  // Validation callback
  valid: function(valid) {} // Called with true/false validation result
};

Barcode Dimensions

Control the physical size and proportions of generated barcodes.

/**
 * Configure barcode dimensions
 */
JsBarcode(element, content, {
  width: 2,     // Width of individual bars (1-5 recommended)
  height: 100   // Overall barcode height in pixels
});

Usage Examples:

// Small barcode for labels
JsBarcode("#small", "123456", {
  width: 1,
  height: 50
});

// Large barcode for posters
JsBarcode("#large", "123456", {
  width: 4,
  height: 200
});

// Standard retail size
JsBarcode("#retail", "123456789012", {
  format: "EAN13",
  width: 2,
  height: 100
});

// Compact industrial barcode
JsBarcode("#industrial", "PART123", {
  format: "CODE39",
  width: 1.5,
  height: 40
});

Text and Font Configuration

Customize the appearance and positioning of text displayed with barcodes.

/**
 * Configure text display and styling
 */
JsBarcode(element, content, {
  displayValue: true,        // Show/hide text
  font: "monospace",         // Font family
  fontOptions: "bold",       // Font weight/style
  fontSize: 20,              // Font size in pixels
  textAlign: "center",       // Horizontal alignment
  textPosition: "bottom",    // Vertical position
  textMargin: 2             // Space between barcode and text
});

Font Options:

// Font families
JsBarcode("#barcode1", "123", { font: "Arial" });
JsBarcode("#barcode2", "123", { font: "serif" });
JsBarcode("#barcode3", "123", { font: "sans-serif" });
JsBarcode("#barcode4", "123", { font: "monospace" }); // Default

// Font styles
JsBarcode("#barcode5", "123", { fontOptions: "" });        // Normal
JsBarcode("#barcode6", "123", { fontOptions: "bold" });    // Bold
JsBarcode("#barcode7", "123", { fontOptions: "italic" });  // Italic
JsBarcode("#barcode8", "123", { fontOptions: "bold italic" }); // Both

// Font sizes
JsBarcode("#small-text", "123", { fontSize: 12 });  // Small
JsBarcode("#medium-text", "123", { fontSize: 16 }); // Medium
JsBarcode("#large-text", "123", { fontSize: 24 });  // Large

Text Positioning:

// Horizontal alignment
JsBarcode("#left", "123456", { textAlign: "left" });
JsBarcode("#center", "123456", { textAlign: "center" }); // Default
JsBarcode("#right", "123456", { textAlign: "right" });

// Vertical position
JsBarcode("#bottom", "123456", { textPosition: "bottom" }); // Default
JsBarcode("#top", "123456", { textPosition: "top" });

// Text spacing
JsBarcode("#tight", "123456", { textMargin: 0 });  // No gap
JsBarcode("#loose", "123456", { textMargin: 10 }); // Large gap

// Hide text entirely
JsBarcode("#no-text", "123456", { displayValue: false });

Color Customization

Configure barcode and background colors with full CSS color support.

/**
 * Configure colors
 */
JsBarcode(element, content, {
  background: "#ffffff",  // Background color
  lineColor: "#000000"   // Barcode line color
});

Color Format Support:

// Hexadecimal colors
JsBarcode("#hex", "123", { 
  background: "#ffffff",
  lineColor: "#000000" 
});

// RGB colors
JsBarcode("#rgb", "123", { 
  background: "rgb(255, 255, 255)",
  lineColor: "rgb(0, 0, 0)" 
});

// RGBA colors with transparency
JsBarcode("#rgba", "123", { 
  background: "rgba(255, 255, 255, 0.8)",
  lineColor: "rgba(0, 0, 0, 0.9)" 
});

// Named colors
JsBarcode("#named", "123", { 
  background: "white",
  lineColor: "black" 
});

// Brand colors
JsBarcode("#brand", "123", { 
  background: "#f8f9fa",
  lineColor: "#212529" 
});

Color Themes:

// High contrast (accessibility)
JsBarcode("#high-contrast", "123", {
  background: "#ffffff",
  lineColor: "#000000"
});

// Inverted colors
JsBarcode("#inverted", "123", {
  background: "#000000", 
  lineColor: "#ffffff"
});

// Blue theme
JsBarcode("#blue", "123", {
  background: "#e3f2fd",
  lineColor: "#1976d2"
});

// Transparent background
JsBarcode("#transparent", "123", {
  background: "transparent",
  lineColor: "#333333"
});

Margin and Spacing Control

Fine-tune whitespace around barcodes for different layout requirements.

/**
 * Configure margins and spacing
 */
JsBarcode(element, content, {
  margin: 10,              // All margins (shorthand)
  marginTop: 15,          // Individual margin overrides
  marginBottom: 15,
  marginLeft: 20,
  marginRight: 20
});

Margin Examples:

// Uniform margins
JsBarcode("#uniform", "123", { margin: 10 });

// No margins (tight layout)
JsBarcode("#tight", "123", { margin: 0 });

// Large margins (lots of whitespace)
JsBarcode("#spacious", "123", { margin: 30 });

// Custom margins for specific layouts
JsBarcode("#custom", "123", {
  marginTop: 5,     // Minimal top
  marginBottom: 20, // Extra bottom space
  marginLeft: 15,   // Standard sides
  marginRight: 15
});

// Asymmetric margins
JsBarcode("#asymmetric", "123", {
  margin: 10,       // Default for unspecified
  marginLeft: 0,    // Flush left
  marginRight: 30   // Extra right space
});

Format Selection and Auto-Detection

Control barcode format selection and automatic format detection behavior.

/**
 * Configure format selection
 */
JsBarcode(element, content, {
  format: "auto"    // Format name or "auto" for detection
});

Format Options:

// Automatic detection (default)
JsBarcode("#auto", "123456789012", { format: "auto" });

// Specific formats
JsBarcode("#code128", "Hello123", { format: "CODE128" });
JsBarcode("#ean13", "123456789012", { format: "EAN13" });
JsBarcode("#code39", "PRODUCT123", { format: "CODE39" });

// Format with fallback handling
JsBarcode("#fallback", "invalid-data", {
  format: "EAN13",
  valid: function(isValid) {
    if (!isValid) {
      // Retry with auto-detection
      JsBarcode("#fallback", "invalid-data", { format: "auto" });
    }
  }
});

Validation and Error Handling

Configure custom validation callbacks and error handling behavior.

/**
 * Configure validation callback
 */
JsBarcode(element, content, {
  valid: function(isValid) {
    // Custom validation handling
    if (isValid) {
      console.log("Barcode generated successfully");
    } else {
      console.error("Invalid barcode data");
    }
  }
});

Validation Examples:

// Success/failure logging
JsBarcode("#logging", "123456789012", {
  format: "EAN13",
  valid: function(isValid) {
    console.log(`EAN13 validation: ${isValid ? 'PASS' : 'FAIL'}`);
  }
});

// UI feedback
JsBarcode("#ui-feedback", "invalid", {
  format: "EAN13",  
  valid: function(isValid) {
    const statusEl = document.getElementById('status');
    if (isValid) {
      statusEl.textContent = 'Barcode generated';
      statusEl.className = 'success';
    } else {
      statusEl.textContent = 'Invalid barcode data';
      statusEl.className = 'error';
    }
  }
});

// Retry with different format
JsBarcode("#retry", "ABC123", {
  format: "EAN13",
  valid: function(isValid) {
    if (!isValid) {
      // EAN13 failed, try CODE39
      JsBarcode("#retry", "ABC123", { format: "CODE39" });
    }
  }
});

Practical Configuration Examples

Retail Product Labels

// Standard retail barcode
JsBarcode("#retail-barcode", "501234567890", {
  format: "EAN13",
  width: 2,
  height: 100,
  displayValue: true,
  fontSize: 14,
  font: "Arial",
  textAlign: "center",
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10
});

Industrial Asset Tags

// Compact industrial barcode
JsBarcode("#asset-tag", "ASSET-12345", {
  format: "CODE39",
  width: 1.5,
  height: 40,
  displayValue: true,
  fontSize: 8,
  font: "monospace",
  fontOptions: "bold",
  textPosition: "bottom",
  background: "#ffffff",
  lineColor: "#000000",
  margin: 3
});

Shipping Labels

// Large shipping barcode
JsBarcode("#shipping-label", "1234567890123456", {
  format: "ITF",
  width: 3,
  height: 120,
  displayValue: true,
  fontSize: 16,
  font: "sans-serif",
  fontOptions: "bold",
  textAlign: "center",
  background: "#ffffff",
  lineColor: "#000000",
  marginTop: 20,
  marginBottom: 20,
  marginLeft: 15,
  marginRight: 15
});

Pharmacy Labels

// Small pharmaceutical barcode
JsBarcode("#pharmacy-label", "54321", {
  format: "pharmacode",
  width: 4,
  height: 25,
  displayValue: false, // No text for pharmacode
  background: "#ffffff",
  lineColor: "#000000",
  margin: 2
});

Responsive Barcodes

// Responsive barcode sizing
function generateResponsiveBarcode(elementId, content) {
  const container = document.getElementById(elementId);
  const containerWidth = container.offsetWidth;
  
  // Calculate responsive dimensions
  const width = Math.max(1, Math.floor(containerWidth / 200));
  const height = Math.max(50, Math.floor(containerWidth / 4));
  const fontSize = Math.max(8, Math.floor(height / 5));
  
  JsBarcode(`#${elementId}`, content, {
    format: "CODE128",
    width: width,
    height: height,
    fontSize: fontSize,
    margin: Math.floor(width * 5)
  });
}

// Usage
generateResponsiveBarcode("responsive-barcode", "RESPONSIVE123");

Theme-Based Configuration

// Dark theme
const darkTheme = {
  background: "#2d3748",
  lineColor: "#ffffff",
  // Text would be white on dark background
};

// Light theme  
const lightTheme = {
  background: "#ffffff",
  lineColor: "#000000",
};

// Apply theme
JsBarcode("#themed-barcode", "THEME123", {
  format: "CODE39",
  width: 2,
  height: 80,
  ...darkTheme
});

docs

cli.md

code128.md

configuration.md

ean-upc.md

index.md

industrial-formats.md

tile.json