logoImejis.io

QR Code component

Codestype: "qr"

Generates a scannable QR code from any string — URLs, coupon codes, Wi-Fi payloads — with configurable colors, margin and error-correction level.

Edit it — this is the actual editor panel
Design JSON
{
  "title": "QR code sample",
  "description": "A dynamic QR code",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-qr",
      "key": "link",
      "type": "qr",
      "position": {
        "x": 290,
        "y": 100
      },
      "rotation": 0,
      "size": {
        "width": 220,
        "height": 220
      },
      "dynamic": true,
      "properties": {
        "value": "https://imejis.io",
        "errorCorrectionLevel": "M",
        "margin": 4,
        "colorDark": "#000000",
        "colorLight": "#ffffff",
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

QR Code examples

Real renders of the qr code — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Event ticket check-in code

A per-attendee check-in QR encoding the unique ticket URL.

API overrides for this example
{
  "link.value": "https://imejis.io/e/TKT-84721?utm_source=ticket"
}

Coupon redemption code

A personal discount code encoded as plain text for in-store scanning.

API overrides for this example
{
  "link.value": "SAVE20-9F3K7Q",
  "link.colorDark": "#111827"
}

All qr code 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.

BrandedOn-brand module colors instead of plain black on white.
High error correctionLevel 'H' survives up to 30% damage — use when printing small or overlaying a logo.
Dark inverseLight modules on a dark ground — for dark-mode designs and night-time signage.

Use cases

What developers typically build with the qr code component.

  • Event tickets with a unique check-in QR per attendee
  • Coupon images that encode a personal redemption code
  • Print and packaging visuals linking to campaign landing pages
  • Wi-Fi access cards for venues and rentals

Use it dynamically via the API

Set '<key>.value' (or just '<key>') to encode a different URL or string in every render; module colors are overridable as well.

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 '{
    "link.value": "https://imejis.io",
    "link.errorCorrectionLevel": "M",
    "link.margin": 4,
    "link.colorDark": "#000000",
    "link.colorLight": "#ffffff",
    "link.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 qr code component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
valuestringtext—The string encoded into the QR code.
errorCorrectionLevel'L' | 'M' | 'Q' | 'H'LMQH"M"QR error-correction level (higher survives more damage).
marginnumber44Quiet-zone margin around the code in modules.
colorDarkcolor#000000"#000000"Color of the dark modules.
colorLightcolor#ffffff"#ffffff"Color of the light modules (background).
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Yes — send '<key>.value' (or just the key) with any string per render: URLs, coupon codes, Wi-Fi payloads or plain text.

colorDark and colorLight control the module and background colors. Keep strong contrast between them so scanners still read the code reliably.

Levels L, M, Q and H (default M). Level H survives up to 30% damage — use it when printing small or overlaying a logo on the code.

Keep the default quiet-zone margin of 4 modules, maintain contrast between colorDark and colorLight, and raise errorCorrectionLevel for small or decorated codes.