> ## 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.

# JavaScript

> Use fully typed Pictum asset helpers without a framework runtime.

`@pictum/core` provides framework-independent helpers for JavaScript and TypeScript applications. Generate asset URLs synchronously or retrieve canonical SVG markup on demand without a component runtime.

The helpers are SSR-friendly and work in browsers or server runtimes with the standard `URL`, `TextEncoder`, and `fetch` APIs.

## Installation

Install the core package with your preferred package manager.

<CodeGroup>
  ```bash npm theme={null}
  npm install @pictum/core
  ```

  ```bash pnpm theme={null}
  pnpm add @pictum/core
  ```

  ```bash bun theme={null}
  bun add @pictum/core
  ```

  ```bash yarn theme={null}
  yarn add @pictum/core
  ```
</CodeGroup>

## Icons

Identify an icon by collection and name. Reading `.url` makes no network request; call `.svg()` when you need canonical SVG markup.

```ts theme={null}
import { icon } from "@pictum/core";

const asset = icon("devicon:typescript");

const url = asset.url;
const svg = await asset.svg();
```

## Avatars

Choose a stable seed, avatar variant, and image format. Realistic avatars also accept an optional `male` or `female` gender.

```ts theme={null}
import { avatar } from "@pictum/core";

const asset = avatar("customer-123", {
  variant: "realistic",
  gender: "female",
});

const url = asset.url;

const svg = await avatar("ada-lovelace", {
  variant: "gradient",
}).svg();
```

The selected format controls `.url`. Generated avatars support `.svg()`; realistic avatars are raster-only and default to WebP.

## QR codes

Pass the text or URL to encode and select an output format.

```ts theme={null}
import { qrCode } from "@pictum/core";

const asset = qrCode("https://pictum.dev", {
  format: "png",
});

const url = asset.url;
const svg = await asset.svg();
```

## Placeholders

Create square or custom-dimension placeholders with optional text, colors, and retina density.

```ts theme={null}
import { placeholder } from "@pictum/core";

const asset = placeholder({
  width: 640,
  height: 360,
  format: "webp",
  density: 2,
  background: "#ffffff",
  color: "#6d28d9",
  text: "Coming soon",
});

const url = asset.url;
const svg = await asset.svg();
```

## Use another Pictum deployment

Pass an absolute `baseUrl` to any helper when you use a custom or staging deployment.

```ts theme={null}
import { icon } from "@pictum/core";

const asset = icon("lucide:sparkles", {
  baseUrl: "https://assets.example.com/v1",
});
```