Barcode component
Codestype: "barcode"Renders 1D/linear barcodes (Code 128, EAN-13, UPC-A and other bwip-js symbologies) with optional human-readable text — ideal for tickets, SKUs and shipping labels.
Design JSON
{
"title": "Barcode sample",
"description": "A dynamic Code 128 barcode",
"dimensions": {
"width": 800,
"height": 420
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-barcode",
"key": "sku",
"type": "barcode",
"position": {
"x": 240,
"y": 140
},
"rotation": 0,
"size": {
"width": 320,
"height": 140
},
"dynamic": true,
"properties": {
"value": "012345678905",
"format": "code128",
"barColor": "#000000",
"backgroundColor": "#ffffff",
"displayValue": true,
"opacity": 1
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorBarcode examples
Real renders of the barcode — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Parcel tracking label
A shipping label strip with the carrier tracking number in Code 128.
API overrides for this example
{
"sku.value": "1Z999AA10123456784"
}Warehouse bin label
A bin location code printed for rack labelling, text kept below the bars.
API overrides for this example
{
"sku.value": "BIN-A12-045",
"sku.barColor": "#1E3A8A"
}All barcode styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the barcode component.
- Shipping labels with the tracking number encoded per parcel
- Event and cinema tickets with unique entry codes
- Retail shelf labels and price tags with product SKUs
- Warehouse bin and asset labels generated in bulk
Use it dynamically via the API
Encode a different SKU/ticket per render via '<key>.value' (or just '<key>'); format and colors can also be overridden.
Full API request with the sample design's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"sku.value": "012345678905",
"sku.format": "code128",
"sku.barColor": "#000000",
"sku.backgroundColor": "#ffffff",
"sku.displayValue": true,
"sku.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the barcode component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| value | string | text | — | The raw value encoded into the barcode. |
| format | string | code128code39code93ean13ean8upcaupceitf14interleaved2of5codabarmsipharmacodegs1-128 | "code128" | Barcode symbology (bwip-js bcid), e.g. 'code128', 'ean13', 'upca'. |
| barColor | color | #000000 | "#000000" | Color of the bars (dark modules). |
| backgroundColor | color | #ffffff | "#ffffff" | Background color behind the barcode. |
| displayValue | boolean | true | true | Show the human-readable text below the bars. |
| textColor | color | #888888 | — | Human-readable text color (defaults to barColor). |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |