> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictum.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# QR codes

> Turn text and URLs into deterministic SVG, PNG, or WebP QR codes.

Framework integrations provide a QrCode component, and every integration can generate QR code URLs or SVG markup through its `qrCode()` helper.

## Render a QR code

Pass the text or URL to encode through `value`. Integrations handle the API's Base64 encoding automatically.

<CodeGroup>
  ```tsx React theme={null}
  import { QrCode } from "@pictum/react";

  <QrCode
    value="https://pictum.dev"
    format="svg"
    aria-label="Open Pictum"
    className="size-32"
  />
  ```

  ```vue Vue theme={null}
  <script setup lang="ts">
  import { QrCode } from "@pictum/vue";
  </script>

  <template>
    <QrCode
      value="https://pictum.dev"
      format="svg"
      aria-label="Open Pictum"
      class="size-32"
    />
  </template>
  ```

  ```blade Laravel theme={null}
  <x-qr-code
    value="https://pictum.dev"
    format="svg"
    aria-label="Open Pictum"
    class="size-32"
  />
  ```

  ```html Web theme={null}
  <script type="module">
    import { definePictumElements } from "@pictum/web";

    definePictumElements();
  </script>

  <pictum-qr-code
    value="https://pictum.dev"
    format="svg"
    alt="Open Pictum"
    class="size-32"
  ></pictum-qr-code>
  ```
</CodeGroup>

## Use a helper

Use `qrCode()` when you need the selected image URL or canonical SVG markup outside a component.

<CodeGroup>
  ```ts JavaScript theme={null}
  import { qrCode } from "@pictum/react";

  // Generate a PNG URL without making a request.
  const url = qrCode("https://pictum.dev", {
    format: "png",
  }).url;

  // Fetch canonical SVG markup.
  const svg = await qrCode("https://pictum.dev").svg();
  ```

  ```php PHP theme={null}
  // Generate a PNG URL without making a request.
  $url = Pictum\qrCode(
      'https://pictum.dev',
      format: 'png',
  )->url();

  // Fetch canonical SVG markup.
  $svg = Pictum\qrCode('https://pictum.dev')->svg();
  ```
</CodeGroup>

## Preview

<CardGroup cols={2}>
  <Card title="With quiet zone">
    <img src="https://pictum.dev/v1/qr-codes.svg?data=aHR0cHM6Ly9waWN0dW0uZGV2" alt="QR code with a quiet zone that opens pictum.dev" width="192" height="192" />
  </Card>

  <Card title="Without quiet zone">
    <img src="https://pictum.dev/v1/qr-codes.svg?data=aHR0cHM6Ly9waWN0dW0uZGV2&quiet_zone=false" alt="Edge-to-edge QR code that opens pictum.dev" width="192" height="192" />
  </Card>
</CardGroup>

## Control the quiet zone

Pictum includes clear space around QR modules by default. Set `quiet_zone=false` when the surrounding layout already provides enough empty space and you need edge-to-edge image output.

```http theme={null}
GET https://pictum.dev/v1/qr-codes.svg?data=aHR0cHM6Ly9waWN0dW0uZGV2&quiet_zone=false
```

<Warning>
  Removing the quiet zone can make a QR code harder to scan when other content is close to its edges. Keep equivalent clear space in your layout.
</Warning>

## Choose a format

| Value  | Content type                   | Dimensions                | Use case                       |
| ------ | ------------------------------ | ------------------------- | ------------------------------ |
| `svg`  | `image/svg+xml; charset=UTF-8` | Dimensionless             | Components and scalable output |
| `png`  | `image/png`                    | 256×256 pixels by default | Broad raster compatibility     |
| `webp` | `image/webp`                   | 256×256 pixels by default | Compact raster delivery        |

JPEG is not available because lossy compression can reduce QR code readability.

## Set the display size

QR code components forward native attributes. Set display dimensions with width and height attributes or your application's CSS.

Raster images use a 256×256 source by default. The OpenAPI endpoint accepts raster source sizes from 64 through 2048 pixels.

## Handle data safely

<Warning>
  Base64 is not encryption. Never encode passwords, access tokens, personal data, Wi-Fi credentials, or other secrets. QR code URLs may appear in browser history, application logs, analytics, and shared caches.
</Warning>

The decoded value must be non-empty UTF-8 text no larger than 512 bytes. Integrations encode values before building the image URL.

## Direct HTTP access

<Info>
  The [OpenAPI reference](/api-reference/overview) documents Base64 input, raster source sizing, response caching, and validation errors.
</Info>