### Install globally and run

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/cli/README.md

Installs the CLI globally with npm, then runs it with the 'qrgrid' command. The example encodes 'Hello World'.

```bash
npm install -g @qrgrid/cli

qrgrid -i "Hello World"
```

--------------------------------

### Install @qrgrid/server with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using bun.

```sh
bun add @qrgrid/server
```

--------------------------------

### Install @qrgrid/server with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using yarn.

```sh
yarn add @qrgrid/server
```

--------------------------------

### Install @qrgrid/core with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using bun.

```sh
bun add @qrgrid/core
```

--------------------------------

### Install @qrgrid/server with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using npm.

```sh
npm install @qrgrid/server
```

--------------------------------

### Install @qrgrid/server with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Install the package using pnpm.

```sh
pnpm install @qrgrid/server
```

--------------------------------

### Install @qrgrid/vue with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using bun.

```sh
bun add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/react

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Installs the @qrgrid/react package from npm.

```bash
npm install @qrgrid/react
```

--------------------------------

### Install @qrgrid/core with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using yarn.

```sh
yarn add @qrgrid/core
```

--------------------------------

### Install @qrgrid/styles with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using bun.

```sh
bun add @qrgrid/styles
```

--------------------------------

### QRGrid CLI usage examples

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use the CLI without installation. Examples show printing to terminal, saving as SVG, and generating a WiFi QR code.

```bash
# print to terminal
npx @qrgrid/cli -i "Hello World"

# save as SVG
npx @qrgrid/cli -i "https://qrgrid.com" -f qr.svg

# WiFi QR code
npx @qrgrid/cli -i "WIFI:T:WPA;S:MyNetwork;P:MyPassword;;" -f wifi.svg
```

--------------------------------

### Install @qrgrid/server with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for server applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/server
```

```sh
bun add @qrgrid/server
```

```sh
pnpm install @qrgrid/server
```

```sh
yarn add @qrgrid/server
```

--------------------------------

### Install @qrgrid/core with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using pnpm.

```sh
pnpm install @qrgrid/core
```

--------------------------------

### Install @qrgrid/core with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Install the core package using npm.

```sh
npm install @qrgrid/core
```

--------------------------------

### Install @qrgrid/styles with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using yarn.

```sh
yarn add @qrgrid/styles
```

--------------------------------

### Install @qrgrid/vue with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using npm.

```sh
npm install @qrgrid/vue
```

--------------------------------

### Start docs dev server with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Starts the VitePress development server for the documentation site, using the @qrgrid/docs filter.

```sh
npm run dev -- --filter @qrgrid/docs
```

--------------------------------

### Install @qrgrid/vue with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using yarn.

```sh
yarn add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/react with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for React applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/react
```

```sh
bun add @qrgrid/react
```

```sh
pnpm install @qrgrid/react
```

```sh
yarn add @qrgrid/react
```

--------------------------------

### Install @qrgrid/styles with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using npm.

```sh
npm install @qrgrid/styles
```

--------------------------------

### Install @qrgrid/core with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the core Qr Grid library for web applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/core
```

```sh
bun add @qrgrid/core
```

```sh
pnpm install @qrgrid/core
```

```sh
yarn add @qrgrid/core
```

--------------------------------

### Run docs site locally

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Starts the documentation development server at http://localhost:5173.

```bash
cd docs && pnpm dev
```

--------------------------------

### Install @qrgrid/vue with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Install the Vue package using pnpm.

```sh
pnpm install @qrgrid/vue
```

--------------------------------

### Install dependencies with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Run this command in the project root to install all required dependencies for the documentation site.

```sh
npm install
```

--------------------------------

### Install @qrgrid/styles with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Install the @qrgrid/styles package using pnpm.

```sh
pnpm install @qrgrid/styles
```

--------------------------------

### Install @qrgrid/angular with bun

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using bun, a fast JavaScript runtime and package manager.

```sh
bun add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/vue with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for Vue applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/vue
```

```sh
bun add @qrgrid/vue
```

```sh
pnpm install @qrgrid/vue
```

```sh
yarn add @qrgrid/vue
```

--------------------------------

### Install @qrgrid/angular with yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using yarn, a popular package manager.

```sh
yarn add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using npm. This is the standard package manager for Node.js.

```sh
npm install @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Install the Qr Grid library for Angular applications. Choose the command matching your package manager.

```sh
npm install @qrgrid/angular
```

```sh
bun add @qrgrid/angular
```

```sh
pnpm install @qrgrid/angular
```

```sh
yarn add @qrgrid/angular
```

--------------------------------

### Install @qrgrid/angular with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Install the package using pnpm, a package manager that saves disk space.

```sh
pnpm install @qrgrid/angular
```

--------------------------------

### Clone and build QRGrid with pnpm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use these commands to clone the repository, install dependencies, and build or watch the packages. Requires pnpm >= 10 and Node.js >= 20.

```bash
git clone https://github.com/yadav-saurabh/qrgrid.git
cd qrgrid
pnpm install    # requires pnpm >= 10, Node.js >= 20
pnpm build      # build all packages
pnpm dev        # watch mode
```

--------------------------------

### Generate a simple QR code

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Example of generating a simple QR code using generateQr.

```typescript
import { generateQr } from "@qrgrid/server";

const qr = generateQr("hello world from server");
```

--------------------------------

### Run CLI without global installation using bunx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use bunx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
bunx @qrgrid/cli -i "Hello world"
```

--------------------------------

### getNeighbor usage example

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Imports getNeighbor from @qrgrid/styles/common and retrieves the state of all 8 neighbors around a module. The returned object contains boolean-like values for each direction, and the example checks for a concave inner corner condition.

```javascript
import { getNeighbor } from "@qrgrid/styles/common";

const neighbors = getNeighbor(i, qr);
// { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight }

if (neighbors.top && neighbors.left && !neighbors.topLeft) {
  // concave inner corner
}
```

--------------------------------

### Run CLI without global installation using npx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use npx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
npx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Render QR to canvas with raw data

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Creates a QR instance, draws dark modules on a canvas, and fills the background. Uses qr.data (flat Uint8Array) and qr.gridSize. The example assumes a canvas element with id 'qr'.

```js
import { QR } from "@qrgrid/core";

const qr = new QR("https://qrgrid.com");
const canvas = document.getElementById("qr");
const ctx = canvas.getContext("2d");

// figure out how big each module should be
const size = Math.floor(400 / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - 400) + size * 2;
canvas.height = 400 + border;
canvas.width = 400 + border;

// draw every dark module
ctx.fillStyle = "black";
let x = size,
  y = size;
for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    ctx.fillRect(x, y, size, size);
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}

// fill the background behind everything
ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
```

--------------------------------

### Using CanvasQr component

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Import the CanvasQr component and use the <qr> element with the input property to render a QR code. The example shows encoding "Hello World!".

```typescript
import { CanvasQr } from "@qrgrid/angular";

<qr input="Hello World!"/>
```

--------------------------------

### Run CLI without global installation using pnpm dlx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use pnpm dlx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
pnpm dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Basic usage of QR class from @qrgrid/core

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Imports the QR class and creates a new instance with a string. The constructor computes the grid immediately; access properties like data, gridSize, version, errorCorrection, segments, reservedBits, and maskPattern. For example, data is a Uint8Array of 1s and 0s, and gridSize is the number of modules per side (e.g., 25).

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!");

qr.data; // Uint8Array of 1s and 0s
qr.gridSize; // e.g. 25 (meaning 25x25 modules)
qr.version; // QR version used (1-40)
qr.errorCorrection; // "M" by default
qr.segments; // how the input was split into encoding segments
qr.reservedBits; // what each module is (finder pattern, alignment, timing, etc.)
qr.maskPattern; // which mask pattern was applied (0-7)
```

--------------------------------

### getFinderPatternDetails usage example

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Imports getFinderPatternDetails from @qrgrid/styles/common and retrieves pixel positions and sizes for the three finder patterns. The returned object contains inner and outer coordinates and sizes, useful for custom finder pattern shapes.

```javascript
import { getFinderPatternDetails } from "@qrgrid/styles/common";

const { positions, sizes } = getFinderPatternDetails(moduleSize, qr);
// positions.inner -> 3 {x, y} coordinates for the inner 3x3 squares
// positions.outer -> 3 {x, y} coordinates for the outer 7x7 squares
// sizes.inner -> pixel size of inner square
// sizes.outer -> pixel size of outer square
```

--------------------------------

### Run CLI without global installation using yarn dlx

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Use yarn dlx to run the CLI without installing it globally. The -i flag specifies the input data for the QR code.

```sh
yarn dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Import and use SvgQr component

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Import SvgQr from @qrgrid/angular and use the <qr> element with the input prop to render a QR code. The example shows a minimal usage with the input set to 'Hello World!'.

```typescript
import { SvgQr } from "@qrgrid/angular";

<qr input="Hello World!"/>
```

--------------------------------

### Basic usage: generateQr returns SVG string

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Imports generateQr from @qrgrid/server and calls it with a string to get a complete SVG string. The comment indicates the returned value is ready to use.

```js
import { generateQr } from "@qrgrid/server";

const svg = generateQr("Hello World");
// returns a complete SVG string ready to use
```

--------------------------------

### Separate finder and data colors (SVG)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Uses an object for the `color` prop to set different colors for the finder patterns and the codeword (data) modules. This example is for SVG rendering.

```tsx
<Qr input="Hello World" color={{ finder: "#ff3131", codeword: "#173B45" }} />
```

--------------------------------

### React QR component with styling

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use the Qr component from @qrgrid/react/canvas. The second example shows styling with dotModuleStyle and additional options like bgColor, color, qrOptions, and image.

```tsx
import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!" />;

// or with styling
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";

<Qr
  input="https://qrgrid.com"
  bgColor="#1a1a2e"
  color="#e94560"
  moduleStyle={dotModuleStyle}
  qrOptions={{ errorCorrection: "H" }}
  image={{ src: "/logo.png", overlap: false }}
/>;
```

--------------------------------

### Canvas element for QR rendering

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

HTML canvas element used as the rendering target in the plain HTML example.

```html
<canvas id="qr" width="400" height="400"></canvas>
```

--------------------------------

### Express API endpoint returning QR SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Sets up an Express server with a GET /qr route that generates an SVG QR code from a query parameter (defaulting to "Hello World") with size 400 and error correction level H, then sends it as image/svg+xml. The server listens on port 5000.

```js
import { generateQr } from "@qrgrid/server";
import express from "express";

const app = express();

app.get("/qr", (req, res) => {
  const data = req.query.data || "Hello World";
  const svg = generateQr(data, {
    size: 400,
    qrOptions: { errorCorrection: "H" },
  });
  res.set("Content-Type", "image/svg+xml");
  res.send(svg);
});

app.listen(5000);
```

--------------------------------

### Gradient fill (Canvas)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Provides a function to the `color` prop to create a linear gradient. The function receives the canvas context and returns a gradient object. This example is for Canvas rendering.

```tsx
<Qr
  input="Hello World"
  color={(ctx) => {
    const gradient = ctx.createLinearGradient(0, 0, 400, 400);
    gradient.addColorStop(0, "#e94560");
    gradient.addColorStop(1, "#0f3460");
    return gradient;
  }}
/>
```

--------------------------------

### Run @qrgrid/cli with npm, bun, pnpm, or yarn

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/index.md

Run the Qr Grid CLI to generate a QR code for the input 'Hello world'. Choose the command matching your package manager.

```sh
npx @qrgrid/cli -i "Hello world"
```

```sh
bunx @qrgrid/cli -i "Hello world"
```

```sh
pnpm dlx @qrgrid/cli -i "Hello world"
```

```sh
yarn dlx @qrgrid/cli -i "Hello world"
```

--------------------------------

### Build docs with npm

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/README.md

Builds the documentation site for production, using the @qrgrid/docs filter.

```sh
npm run docs:build -- --filter @qrgrid/docs
```

--------------------------------

### Download QR code as Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Shows how to download the QR code as a canvas using downloadQr from @qrgrid/styles/canvas/utils.

```vue
<script>
  import { Qr } from "@qrgrid/vue/canvas";
  import { downloadQr} from "@qrgrid/styles/canvas/utils";

  const qrRef = ref<InstanceType<typeof Qr> | null>(null);

  const download = () => {
    if (qrRef.value?.canvasRef) {
      downloadQr(qrRef.value?.canvasRef);
    }
  };
</script>

<template>
  <Qr input="Hello World!" ref="qrRef" />
</template>
```

--------------------------------

### Generate and display QR code

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World" and displays it in the terminal.

```sh
npx @qrgrid/cli -i "Hello World"
```

--------------------------------

### Download QR code as Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Shows how to download the QR code as a canvas using downloadQr from @qrgrid/styles/canvas/utils. Requires a ref to the canvas element.

```tsx
import { Qr } from "@qrgrid/react/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils";

const qrRef = useRef<HTMLCanvasElement | null>(null);

const download = () => {
  if (qrRef.current) {
    downloadQr(qrRef.current);
  }
};

<Qr input="Hello World!" ref={qrRef} />
```

--------------------------------

### Canvas gradient color function

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/vue/README.md

For Canvas, pass a function that receives the canvas context and returns a gradient. The example creates a linear gradient and uses it as the `color` prop.

```vue
<script setup>
import { Qr } from "@qrgrid/vue/canvas";

function gradientColor(ctx) {
  const gradient = ctx.createLinearGradient(0, 0, 400, 400);
  gradient.addColorStop(0, "#e94560");
  gradient.addColorStop(1, "#0f3460");
  return gradient;
}
</script>

<template>
  <Qr input="Hello World!" :color="gradientColor" />
</template>
```

--------------------------------

### Create a QR instance

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/core.md

Import the QR class and create a new instance with input data. The default error correction level is 'M'.

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!")
```

--------------------------------

### Access QR component with @ViewChild

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/angular/README.md

Use this snippet to get a reference to the QR component and access the underlying canvas element. This is useful for downloading the QR code as an image.

```typescript
@Component({
  imports: [CanvasQr],
  template: `<qr input="Hello World!" />`,
})
export class MyComponent {
  @ViewChild(CanvasQr) qrComponent!: CanvasQr;

  download() {
    const canvas = this.qrComponent.canvas.nativeElement;
    // use downloadQr from @qrgrid/styles/canvas/utils
  }
}
```

--------------------------------

### Describe changes with changeset

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Run this command to create a changeset describing your change before opening a pull request.

```bash
pnpm changeset
```

--------------------------------

### Common use cases for @qrgrid/cli

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/cli/README.md

Shows various input types: URL, WiFi network, email, phone, plain text, and error correction options. Includes saving to file with silent mode.

```bash
# URL
npx @qrgrid/cli -i "https://yoursite.com"

# WiFi network (scannable on phones)
npx @qrgrid/cli -i "WIFI:T:WPA;S:MyNetwork;P:MyPassword;;"

# email address
npx @qrgrid/cli -i "mailto:hello@example.com"

# phone number
npx @qrgrid/cli -i "tel:+1234567890"

# plain text
npx @qrgrid/cli -i "Meet me at the coffee shop at 3pm"

# with high error correction
npx @qrgrid/cli -i "Hello World" -ec H

# save to file with custom error correction, no terminal output
npx @qrgrid/cli -i "Hello World" -ec H -f output.svg -s
```

--------------------------------

### Available pnpm scripts

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

List of package manager commands for building, watching, linting, and formatting the project.

```bash
pnpm build
```

```bash
pnpm dev
```

```bash
pnpm lint
```

```bash
pnpm format
```

--------------------------------

### Download QR code as SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Shows how to download the QR code as an SVG using downloadQr from @qrgrid/styles/svg/utils.

```vue
<script>
  import { Qr } from "@qrgrid/vue/svg";
  import { downloadQr} from "@qrgrid/styles/svg/utils";

  const qrRef = ref<InstanceType<typeof Qr> | null>(null);

  const download = () => {
    if (qrRef.value?.svgRef) {
      downloadQr(qrRef.value?.svgRef);
    }
  };
</script>

<template>
  <Qr input="Hello World!" ref="qrRef" />
</template>
```

--------------------------------

### Generate QR code and save as SVG file

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World" and saves it to the specified file path as an SVG file.

```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg
```

--------------------------------

### Generate QR code silently and save to file

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Generates a QR code for the input "Hello World", saves it to the specified file path, and skips printing the QR code to the terminal using the -s flag.

```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg -s
```

--------------------------------

### Custom moduleStyle for Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Defines a custom moduleStyle for Canvas. The function receives the canvas context, the module's position and size, and the QR data. The example draws a circle at each module's center.

```tsx
<Qr
  input="Hello World!"
  moduleStyle={(ctx, module, qr) => {
    // module has: index, x, y, size
    // draw whatever you want
    ctx.beginPath();
    ctx.arc(
      module.x + module.size / 2,
      module.y + module.size / 2,
      module.size / 3,
      0,
      Math.PI * 2,
    );
    ctx.fill();
  }}
/>
```

--------------------------------

### Download QR code as SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Shows how to download the QR code as an SVG using downloadQr from @qrgrid/styles/svg/utils. Requires a ref to the SVG element.

```tsx
import { Qr } from "@qrgrid/react/svg";
import { downloadQr} from "@qrgrid/styles/svg/utils";

const qrRef = useRef<SVGSVGElement | null>(null);

const download = () => {
  if (qrRef.current) {
    downloadQr(qrRef.current);
  }
};

<Qr input="Hello World!" ref={qrRef} />
```

--------------------------------

### new QR(inputData, options?)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Creates a new QR code instance from the given input data. The optional options object allows specifying the error correction level.

```APIDOC
## `new QR(inputData, options?)`

### Description
Creates a new QR code instance from the given input data. The optional options object allows specifying the error correction level.

### Parameters
- `inputData` (string) - Required - The data to encode.
- `options.errorCorrection` ("L" | "M" | "Q" | "H") - Optional - Error correction level, defaults to "M".

### Returns
A QR instance with properties as described in the Properties section.
```

--------------------------------

### Import QR and types from @qrgrid/core

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Shows how to import the QR class and its associated types and enums from the @qrgrid/core package. The enums include ErrorCorrectionLevel, Mode, and ReservedBits, with their corresponding type aliases.

```typescript
import {
  QR,
  QrOptions,
  ErrorCorrectionLevel, // { L, M, Q, H }
  ErrorCorrectionLevelType, // "L" | "M" | "Q" | "H"
  Mode, // { Numeric, AlphaNumeric, Byte, Kanji }
  ModeType, // "Numeric" | "AlphaNumeric" | "Byte" | "Kanji"
  ReservedBits, // { FinderPattern, AlignmentPattern, TimingPattern, ... }
  ReservedBitsType, // "FinderPattern" | "AlignmentPattern" | ...
} from "@qrgrid/core";
```

--------------------------------

### Basic QR Code Usage

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Renders a QR code with the default settings using the <qr> component.

```typescript
<qr input="Hello World!" />
```

--------------------------------

### Use built-in dot module style from @qrgrid/styles

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Imports the dotModuleStyle from @qrgrid/styles/svg/styles and passes it to the moduleStyle option. Requires the @qrgrid/styles package.

```js
import { generateQr } from "@qrgrid/server";
import { dotModuleStyle } from "@qrgrid/styles/svg/styles";

const svg = generateQr("Hello World", {
  moduleStyle: dotModuleStyle,
});
```

--------------------------------

### Custom solid colors and separate finder/data colors

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/vue/README.md

Shows how to set solid background and foreground colors via the `bgColor` and `color` props, and how to specify separate finder and codeword colors using an object (SVG only).

```vue
<!-- solid colors -->
<Qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

<!-- separate finder and data colors (SVG only) -->
<Qr input="Hello World!" :color="{ finder: '#ff3131', codeword: '#173B45' }" />
```

--------------------------------

### Render QR to SVG path

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Builds an SVG path string from QR data and sets it on a path element. Requires an SVG with id 'qrSvg' and a path with id 'qrPath'.

```js
import { QR } from "@qrgrid/core";

const qr = new QR("https://qrgrid.com");
const svg = document.getElementById("qrSvg");
const pathEl = document.getElementById("qrPath");

const size = Math.floor(400 / (qr.gridSize + 1.5));
const border = Math.ceil(size * qr.gridSize - 400) + size * 2;
const total = 400 + border;

svg.setAttribute("width", total);
svg.setAttribute("height", total);
svg.setAttribute("viewBox", `0 0 ${total} ${total}`);
svg.style.background = "white";

let x = size,
  y = size,
  d = "";
for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    d += `M${x} ${y}v${size}h${size}v-${size}z`;
  }
  x += size;
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = size;
    y += size;
  }
}

pathEl.setAttribute("d", d);
pathEl.setAttribute("fill", "black");
```

--------------------------------

### Use built-in module styles from @qrgrid/styles

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Uses built-in module styles from @qrgrid/styles/canvas/styles. The dotModuleStyle and smoothModuleStyle are imported and passed to the moduleStyle prop.

```tsx
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";

<Qr input="Hello World!" moduleStyle={dotModuleStyle} />
<Qr input="Hello World!" moduleStyle={smoothModuleStyle} />
```

--------------------------------

### Custom colors for QR code (solid and two-color)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Shows how to set a solid background and foreground color, or different colors for finder patterns and data modules. The SVG output has separate <path> elements for finder and data, enabling the two-color approach.

```js
// solid color
const svg = generateQr("Hello World", {
  bgColor: "#1a1a2e",
  color: "#e94560",
});
```

```js
// different colors for finder patterns and data
const svg = generateQr("Hello World", {
  bgColor: "#F8EDED",
  color: { finder: "#ff3131", codeword: "#173B45" },
});
```

--------------------------------

### Custom solid colors and finder/data colors

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/angular/README.md

Use the `bgColor` and `color` inputs to set solid background and foreground colors, or pass an object with `finder` and `codeword` properties for separate finder and data colors (SVG only).

```html
<!-- solid colors -->
<qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

<!-- separate finder and data colors (SVG only) -->
<qr input="Hello World!" [color]="{ finder: '#ff3131', codeword: '#173B45' }" />
```

--------------------------------

### Using built-in module styles

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/vue/README.md

Imports `dotModuleStyle` and `smoothModuleStyle` from `@qrgrid/styles/canvas/styles` and applies them via the `moduleStyle` prop. Shows two Qr components with different styles.

```vue
<script setup>
import { Qr } from "@qrgrid/vue/canvas";
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";
</script>

<template>
  <Qr input="Hello World!" :moduleStyle="dotModuleStyle" />
  <Qr input="Hello World!" :moduleStyle="smoothModuleStyle" />
</template>
```

--------------------------------

### Import smoothModuleStyle for Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Import the smooth module style for Canvas rendering.

```js
// Canvas
import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";
```

--------------------------------

### Color modules by type with ReservedBits

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Iterates over QR data modules and sets a fill style based on the module type from reservedBits (FinderPattern, AlignmentPattern, or default). Requires a canvas context (ctx) and x/y/size variables for drawing.

```typescript
import { QR, ReservedBits } from "@qrgrid/core";

const qr = new QR("Hello World!");

for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    const type = qr.reservedBits[i]?.type;
    if (type === ReservedBits.FinderPattern) {
      ctx.fillStyle = "#ff3131";
    } else if (type === ReservedBits.AlignmentPattern) {
      ctx.fillStyle = "#3131ff";
    } else {
      ctx.fillStyle = "#333";
    }
    ctx.fillRect(x, y, size, size);
  }
  // ... advance x, y
}
```

--------------------------------

### Import dotModuleStyle for Canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Import the dot module style for Canvas rendering.

```js
// Canvas
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
```

--------------------------------

### Color finder patterns differently using reservedBits

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Uses qr.reservedBits to check module types and apply different colors. Finder patterns are red, data is dark gray. Requires a canvas context and qr object.

```js
import { QR, ReservedBits } from "@qrgrid/core";

for (let i = 0; i < qr.data.length; i++) {
  if (qr.data[i]) {
    if (qr.reservedBits[i]?.type === ReservedBits.FinderPattern) {
      ctx.fillStyle = "#ff3131"; // red finder patterns
    } else {
      ctx.fillStyle = "#333"; // dark gray data
    }
    ctx.fillRect(x, y, size, size);
  }
  // ... advance x, y
}
```

--------------------------------

### Download QR code as PNG using downloadQr

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Use a ref to access the underlying canvas element and call downloadQr to download the QR code as a PNG. The downloadQr function supports "png", "jpeg", and "webp" formats for Canvas, and "svg", "png", "jpeg", "webp" for SVG.

```tsx
import { useRef } from "react";
import { Qr } from "@qrgrid/react/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils";

function MyQr() {
  const ref = useRef<HTMLCanvasElement>(null);
  return (
    <>
      <Qr input="Hello World!" ref={ref} />
      <button onClick={() => ref.current && downloadQr(ref.current)}>
        Download PNG
      </button>
    </>
  );
}
```

--------------------------------

### Encode data with @qrgrid/core

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/how-it-works.md

Initializes a QR code instance with the input data. The QR object provides the encoded binary data and grid size used in subsequent steps.

```typescript
import { QR } from "@qrgrid/core";

const qr = new QR("Hello World!");

```

--------------------------------

### @qrgrid/cli

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/cli.md

Command-line tool for generating QR codes in the terminal. Supports input data, error correction level, file output, and silent mode.

```APIDOC
## CLI Command: @qrgrid/cli

### Description
Generates QR codes directly in the terminal using the @qrgrid/cli command-line tool.

### Usage
Run the CLI tool without installing it globally using npx, bunx, pnpm dlx, or yarn dlx.

### Options
- **--input, -i** (string) - Required - Input data for generating the QR code.
- **--errorCorrection, -ec** (string) - Optional - Set the error correction level (L, M, Q, H). Default `M`.
- **--file, -f** (string) - Optional - Save the QR code to a specified file path. (SVG format only)
- **--version, -v** - Optional - Output the version number of the CLI.
- **--silent, -s** - Optional - Skip printing the QR code to the terminal (use with -f).
- **--help, -h** - Optional - Display help information for the CLI.

### Examples
Generate and display a QR code for "Hello World" in the terminal:
```sh
npx @qrgrid/cli -i "Hello World"
```

Generate a QR code and save it as a SVG file:
```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg
```

Run the CLI silently and save the output without displaying it:
```sh
npx @qrgrid/cli -i "Hello World" -f qr.svg -s
```
```

--------------------------------

### Alternative imports from @qrgrid/react root

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/react/README.md

Alternative imports from the root package. Both Canvas and Svg components are available as namespaced components.

```tsx
import { Canvas, Svg } from "@qrgrid/react";

<Canvas.Qr input="Hello World!" />
<Svg.Qr input="Hello World!" />
```

--------------------------------

### Using Canvas component from @qrgrid/vue

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Import the Canvas component from the main package and use it in a Vue template with an input prop.

```vue
<script>
  import { Canvas } from "@qrgrid/vue";
</script>

<template>
  <Canvas input="Hello World!" />
</template>
```

--------------------------------

### Import smoothModuleStyle for SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Import the smooth module style for SVG rendering.

```js
// SVG
import { smoothModuleStyle } from "@qrgrid/styles/svg/styles";
```

--------------------------------

### Basic usage of generateQr

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/server.md

Imports generateQr and generates an SVG QR code string from a string input.

```typescript
import { generateQr } from "@qrgrid/server";

const svgQr = generateQr("hello world from server");
```

--------------------------------

### Qr with smooth module style

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Applies the smoothModuleStyle from @qrgrid/styles/canvas/styles for a smoother module appearance.

```tsx
import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";

<Qr input="Hello World!" moduleStyle={smoothModuleStyle} />
```

--------------------------------

### Download QR Code (SVG)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Downloads the QR code as an SVG element using @qrgrid/styles.

```typescript
import { SvgQr } from "@qrgrid/angular";
import { downloadQr} from "@qrgrid/styles/svg/utils";

// inside class component
@ViewChild(SvgQr) svgQr!: SvgQr;

download() {
  if (this.svgQr?.svg?.nativeElement) {
    downloadQr(this.svgQr.svg.nativeElement);
  }
}
```

--------------------------------

### generateQr(input, options?)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Generates a QR code as an SVG string. Accepts input data and optional configuration options to customize the QR code appearance and behavior.

```APIDOC
## generateQr(input, options?)

### Description
Generates a QR code as an SVG string. Accepts input data and optional configuration options to customize the QR code appearance and behavior.

### Method
Function

### Signature
`generateQr(input, options?)`

### Parameters
- **input** (any) - Required - The data to encode in the QR code.
- **options** (object) - Optional - Configuration options for the QR code.

### Options
| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `400` | SVG size in pixels |
| `qrOptions` | `{ errorCorrection?: "L"\|"M"\|"Q"\|"H" }` | `{ errorCorrection: "M" }` | QR encoding options |
| `bgColor` | `string` | `"black"` | Background color |
| `color` | `string \| { finder?: string, codeword?: string }` | `"white"` | Module color(s) |
| `moduleStyle` | `(path, module, qr) => void` | square path | Custom path generation per module |
| `getQrData` | `(qr: QR) => void` | none | Callback after QR data is encoded |
| `onGenerated` | `(path, size, qr) => void \| string` | none | Called after path generation. Can return extra SVG content to inject. |

### Returns
- **string** - The generated SVG string.
```

--------------------------------

### QR Properties

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/core/README.md

Describes the properties available on a QR instance after construction, including the encoded grid data and metadata.

```APIDOC
## QR Properties

### Description
These properties are available on a QR instance after construction.

### Properties
- `inputData` (string) - Original input string.
- `data` (Uint8Array) - QR grid as 1s (dark) and 0s (light).
- `gridSize` (number) - Side length of the grid (e.g. 21 means 21x21).
- `version` (number) - QR version (1-40).
- `errorCorrection` (ErrorCorrectionLevelType) - Error correction level used.
- `segments` (Array<{ value: string, mode: ModeType }>) - How the input was segmented for encoding.
- `reservedBits` (Record<number, { type: ReservedBitsType, dark: boolean }>) - Structural metadata for each module.
- `maskPattern` (number) - Mask pattern index (0-7).
```

--------------------------------

### Using built-in dot module style

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/angular/README.md

Import `dotModuleStyle` from `@qrgrid/styles/canvas/styles` and assign it to the `moduleStyle` input to apply a dot-style module rendering.

```typescript
import { CanvasQr } from "@qrgrid/angular";
import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";

@Component({
  imports: [CanvasQr],
  template: `<qr input="Hello World!" [moduleStyle]="moduleStyle" />`,
})
export class MyComponent {
  moduleStyle = dotModuleStyle;
}
```

--------------------------------

### Use Canvas.Qr component from @qrgrid/react

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Alternative import and usage of the Qr component via the Canvas namespace.

```tsx
import { Canvas } from "@qrgrid/react";

<Canvas.Qr input="Hello World!"/>
```

--------------------------------

### Import dotModuleStyle for SVG

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/styles/README.md

Import the dot module style for SVG rendering.

```js
// SVG
import { dotModuleStyle } from "@qrgrid/styles/svg/styles";
```

--------------------------------

### Basic Qr component usage

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Renders a QR code with the default settings using the Qr component from @qrgrid/react.

```tsx
<Qr input="Hello World!" />
```

--------------------------------

### QR Code with Smooth Module Style

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/angular.md

Applies the smooth module style from @qrgrid/styles to the QR code.

```typescript
import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";

<qr input="Hello World!" [moduleStyle]={smoothModuleStyle} />
```

--------------------------------

### SVG path functions for circles and smooth edges

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/README.md

Use getCirclePath and getSmoothEdgesPath from @qrgrid/styles/svg to build SVG path strings for circles and smooth edges.

```js
import { getCirclePath, getSmoothEdgesPath } from "@qrgrid/styles/svg";

// circles
d += getCirclePath(x, y, size);

// smooth edges
d += getSmoothEdgesPath({ index: i, x, y, size }, qr);
```

--------------------------------

### Apply dotModuleStyle and smoothModuleStyle in Angular

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Import dotModuleStyle and smoothModuleStyle from @qrgrid/styles/canvas/styles (or /svg/styles for SVG) and apply them to the qr component in Angular.

```typescript
import { dotModuleStyle, smoothModuleStyle } from "@qrgrid/styles/canvas/styles"; 
// use "@qrgrid/styles/svg/styles" if using svg

<qr input="Hello World" [moduleStyle]="dotModuleStyle" />
<qr input="Hello World" [moduleStyle]="smoothModuleStyle" />
```

--------------------------------

### Import and use Svg component from @qrgrid/vue

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/vue.md

Import the Svg component from the main @qrgrid/vue package and use it in the template with an input prop. This is an alternative to importing from the /svg subpath.

```vue
<script>
  import { Svg } from "@qrgrid/vue";
</script>

<template>
  <Svg input="Hello World!" />
</template>
```

--------------------------------

### Download QR code with downloadQr in React (canvas)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Use downloadQr from @qrgrid/styles/canvas/utils to download the generated QR code as PNG in React. Pass the canvas ref, format 'png', and filename 'qr'.

```typescript
import { Qr } from "@qrgrid/react/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils"

const canvasRef = useRef<HTMLCanvasElement | null>(null);
// pass the ref to the download utility function
downloadQr(canvasRef.current, "png", "qr");

<Qr input="Hello World" ref="canvasRef" />
```

--------------------------------

### Download QR code with downloadQr in Vue (canvas)

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/styles.md

Use downloadQr from @qrgrid/styles/canvas/utils to download the generated QR code as PNG in Vue. Pass the canvas ref, format 'png', and filename 'qr'.

```typescript
import { Qr } from "@qrgrid/vue/canvas";
import { downloadQr } from "@qrgrid/styles/canvas/utils"

const qrRef = ref<InstanceType<typeof Qr> | null>(null);
// pass the ref to the download utility function
downloadQr(qrRef.value.canvasRef, "png", "qr");

<Qr input="Hello World" ref="qrRef" />
```

--------------------------------

### Save QR code SVG to file

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/packages/server/README.md

Generates an SVG string with a size of 600 and writes it to 'qr.svg' using writeFileSync from Node's fs module. Requires Node.js environment.

```js
import { generateQr } from "@qrgrid/server";
import { writeFileSync } from "fs";

const svg = generateQr("https://yoursite.com", { size: 600 });
writeFileSync("qr.svg", svg);
```

--------------------------------

### Loop through QR data for module placement

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/how-it-works.md

Loops through the encoded data to iterate over each module. The loop updates the x and y coordinates, moving to the next row after every gridSize modules.

```typescript
import { QR } from "@qrgrid/core";
// data encoding
const qr = new QR("Hello World!");
// [!code focus:4]
let x = moduleSize;
let y = moduleSize;
for (let i = 0; i < qr.data.length; i++) {
  /**
   * Module Assignment logic in between
   */
  x += size; // [!code focus:6]
  if (i % qr.gridSize === qr.gridSize - 1) {
    x = moduleSize;
    y += moduleSize;
  }
}

```

--------------------------------

### Use Qr component from @qrgrid/react/canvas

Source: https://github.com/yadav-saurabh/qrgrid/blob/main/docs/guide/packages/react.md

Direct import and usage of the Qr component for canvas rendering.

```tsx
import { Qr } from "@qrgrid/react/canvas";

<Qr input="Hello World!"/>
```