Styling Options

Customize the appearance of your QR codes by passing a style object when creating or updating.

Style Object Structure

{
  "style": {
    "dotsOptions": { ... },
    "cornersSquareOptions": { ... },
    "cornersDotOptions": { ... },
    "backgroundOptions": { ... },
    "image": "https://example.com/logo.png",
    "imageOptions": { ... }
  }
}

Dots Options

Control the appearance of individual QR data dots.

Field	Type	Description
type	string	Dot shape (see table below)
color	string	Hex color (e.g., "#000000")
gradient	object	Gradient config (overrides color)

Dot Types

Value	Description
square	Standard square dots (default)
rounded	Rounded squares
dots	Circular dots
classy	Classy triangular style
classy-rounded	Classy with rounded edges
extra-rounded	Extra rounded squares

Example with solid color

{
  "dotsOptions": {
    "type": "rounded",
    "color": "#1a1a2e"
  }
}

Example with gradient

{
  "dotsOptions": {
    "type": "dots",
    "gradient": {
      "rotation": 45,
      "colorStops": [
        { "offset": 0, "color": "#667eea" },
        { "offset": 1, "color": "#764ba2" }
      ]
    }
  }
}

Corners Square Options

Control the large corner square patterns (3 finder patterns).

Field	Type	Description
type	string	Corner shape
color	string	Hex color
gradient	object	Gradient config

Corner Square Types

Value	Description
square	Standard square
dot	Circular
rounded	Rounded
extra-rounded	Extra rounded

Corners Dot Options

Control the small dot inside each corner square.

Same fields as corners square options. Types available: square, dot, rounded, extra-rounded.

Background Options

Field	Type	Description
color	string	Background hex color (default: "#ffffff")
gradient	object	Background gradient

{
  "backgroundOptions": {
    "color": "#f0f0f0"
  }
}

Gradient Object

All gradient configurations follow this structure:

Field	Type	Description
rotation	number	Rotation angle in degrees (0–360)
colorStops	array	Array of 2 color stops

Each color stop:

Field	Type	Description
offset	number	Position (0 = start, 1 = end)
color	string	Hex color

Logo / Image Embedding

Embed a logo in the center of the QR code.

Field	Type	Description
image	string	URL to the logo image
imageOptions.hideBackgroundDots	boolean	Remove dots behind the logo (default: true)
imageOptions.imageSize	number	Logo size ratio (0.1–1.0, default: 0.4)
imageOptions.margin	number	Margin around the logo in px

{
  "image": "https://example.com/logo.png",
  "imageOptions": {
    "hideBackgroundDots": true,
    "imageSize": 0.3,
    "margin": 5
  }
}

TIP

Logos are embedded via SVG <image> tags. For best results, use a square logo that is clearly visible at small sizes. The error correction in the QR code compensates for the occluded area.

Full Style Example

{
  "style": {
    "dotsOptions": {
      "type": "classy-rounded",
      "gradient": {
        "rotation": 135,
        "colorStops": [
          { "offset": 0, "color": "#667eea" },
          { "offset": 1, "color": "#764ba2" }
        ]
      }
    },
    "cornersSquareOptions": {
      "type": "extra-rounded",
      "color": "#1a1a2e"
    },
    "cornersDotOptions": {
      "type": "dot",
      "color": "#667eea"
    },
    "backgroundOptions": {
      "color": "#ffffff"
    },
    "image": "https://example.com/logo.png",
    "imageOptions": {
      "hideBackgroundDots": true,
      "imageSize": 0.35,
      "margin": 4
    }
  }
}