Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Value

Level Error correction. H survives a logo.

Size

Margin The quiet zone. Below 4 some scanners fail.

import { createQrCode } from '@devix-labs/qr-code';
import '@devix-labs/qr-code/styles.css';

createQrCode(document.querySelector('#target'), {
  value: 'https://devix.pk/resources',
  level: 'M',
  size: 192,
  margin: 4
});

import { QrCode } from '@devix-labs/qr-code/react';
import '@devix-labs/qr-code/styles.css';

<QrCode
  value="https://devix.pk/resources"
  level="M"
  size={192}
  margin={4}
/>

<script setup>
import { QrCode } from '@devix-labs/qr-code/vue';
import '@devix-labs/qr-code/styles.css';
</script>

<template>
  <QrCode
  value="https://devix.pk/resources"
  level="M"
  :size="192"
  :margin="4"
/>
</template>

<script>
  import { qrCode } from '@devix-labs/qr-code/svelte';
  import '@devix-labs/qr-code/styles.css';
</script>

<div use:qrCode={{
  value: 'https://devix.pk/resources',
  level: 'M',
  size: 192,
  margin: 4
}} />

Every option here is in the documentation, along with the ones that are not worth a control.