Quickstart

Three ways to render a deterministic Navii avatar. Pick the one that fits your stack — they all use the same engine, all produce the same SVG for the same seed.

Hosted (zero install)

Drop an <img> tag. No build step, no SDK. Works in HTML, React, Vue, anywhere a URL fits.

<img src="https://navii-api.uxderrick.com/avatar/alice@example.com?size=96" />

Append .png to the seed if you need a raster image (emails, OG images, native apps):

<img src="https://navii-api.uxderrick.com/avatar/alice@example.com.png?size=256" />

@usenavii/core (any JS runtime)

npm i @usenavii/core

import { createAvatar } from '@usenavii/core';

const svg = createAvatar(user.id, { size: 96 });
document.body.insertAdjacentHTML('beforeend', svg);

Pure TypeScript, no dependencies. Runs on Node, Bun, Deno, Cloudflare Workers, browsers — anywhere ES modules run.

@usenavii/react

npm i @usenavii/react

import { Navii } from '@usenavii/react';

<Navii seed={user.id} size={64} title={user.name} animated />

Memoized <img src="data:image/svg+xml;...">. The data URI is computed during both server and client render via useMemo, so SSR (Next.js, Remix) emits the same markup the client hydrates — no mismatch. The browser treats the data URI as an opaque image (no inline scripting surface).

Where to go next

Concepts — what "seed" means and why determinism matters.
Parts catalog — every variant rendered, so you know what you're choosing from.
HTTP API — full endpoint reference for the hosted service.