QRCodeSDK

Start with your stack

Core

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core

Render a scalable SVG string with the runtime-neutral Core package:

import {QRCodeSVGRenderer, qrcode} from '@qrcodesdk/core';

const svg = qrcode('https://qrcodesdk.dev').render(QRCodeSVGRenderer());

SVG is the recommended default for most user-facing QR codes: it stays sharp at any size and works in browsers, servers, email, and static assets.

Browser

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/browser

Render a PNG-backed image element in the browser:

import {QRCodePNGImageRenderer} from '@qrcodesdk/browser/png';
import {qrcode} from '@qrcodesdk/core';

const image = qrcode('https://qrcodesdk.dev').render(QRCodePNGImageRenderer());

document.body.append(image);

Node.js

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/node

Render PNG bytes on the server, or WebP, GIF, and JPEG bytes with their renderers:

import {qrcode} from '@qrcodesdk/core';
import {QRCodePNGRenderer} from '@qrcodesdk/node';

const png = qrcode('https://qrcodesdk.dev').render(QRCodePNGRenderer());

React

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/react

Render an SVG component in React or Next.js:

import {QRCodeSVG} from '@qrcodesdk/react';

export function App() {
  return <QRCodeSVG payload="https://qrcodesdk.dev" />;
}

Vue

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/vue

Render an SVG component in Vue:

<script setup lang="ts">
import {QRCodeSVG} from '@qrcodesdk/vue';
</script>

<template>
  <QRCodeSVG payload="https://qrcodesdk.dev" />
</template>

Svelte

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/svelte

Render an SVG component in Svelte:

<script lang="ts">
  import {QRCodeSVG} from '@qrcodesdk/svelte';
</script>

<QRCodeSVG payload="https://qrcodesdk.dev" />

Angular

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/angular

Render a standalone SVG component in Angular:

import {Component} from '@angular/core';
import {QRCodeSVG} from '@qrcodesdk/angular';

@Component({
  selector: 'app-root',
  imports: [QRCodeSVG],
  template: '<qrcode-svg payload="https://qrcodesdk.dev" />',
})
export class App {}

Compare packages by runtime and output in Choose your setup. For terminal commands, start with the CLI.

Next step

Try the Playground to explore appearance visually, or follow Customize appearance to style your QR code.