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. See the SVG renderer reference when you need its options or exact return contract.

React

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/browser @qrcodesdk/react

Render an SVG component in React or Next.js:

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

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

Vue

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/browser @qrcodesdk/vue

Render an SVG component in Vue:

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

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

Svelte

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/browser @qrcodesdk/svelte

Render an SVG component in Svelte:

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

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

Angular

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/core @qrcodesdk/browser @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 data="https://qrcodesdk.dev" />',
})
export class App {}

Choose by runtime and output

Where will it run?	Output you need	Start here
Any supported JavaScript runtime	SVG or terminal text strings	@qrcodesdk/core
Browser DOM	Canvas, PNG-backed Image element, or file download	@qrcodesdk/browser
Node.js-compatible runtime	PNG Buffer for files or responses	@qrcodesdk/node
React or Next.js	SVG, Image, or Canvas component	@qrcodesdk/react
Vue	SVG, Image, or Canvas component	@qrcodesdk/vue
Svelte	SVG, Image, or Canvas component	@qrcodesdk/svelte
Angular	SVG, Image, or Canvas component	@qrcodesdk/angular
Terminal, shell script, or CI	Terminal text, SVG file, or PNG file	@qrcodesdk/cli

Choose your setup for the matching install command, or compare every built-in return type in Renderer outputs.

Next step

Try the Playground to explore appearance visually, or follow Customize appearance to style the SVG you just rendered.