tronche

Avatars nothing like you.

Tronche generates unique SVG avatars from a name and a color palette. Available as a vanilla JS package (no framework), a Vue component, a React component, a Solid component, a Svelte component, a Lit component, an Angular component, a Nuxt module, and a REST API.

npm install tronche

node_modules/tronche/
├── dist/
│   ├── index.js         # Core library (ESM, framework-agnostic)
│   ├── index.d.ts       # Core TypeScript declarations
│   ├── vue/
│   │   ├── index.js     # Vue components (pre-compiled)
│   │   └── index.d.ts   # Vue component types
│   ├── react/
│   │   ├── index.js     # React components (pre-compiled)
│   │   └── index.d.ts   # React component types
│   ├── solid/
│   │   ├── index.js     # Solid components (pre-compiled)
│   │   └── index.d.ts   # Solid component types
│   ├── svelte/
│   │   ├── index.js     # Svelte components (pre-compiled)
│   │   └── index.d.ts   # Svelte component types
│   ├── lit/
│   │   ├── index.js     # Lit components (pre-compiled)
│   │   └── index.d.ts   # Lit component types
│   ├── angular/
│   │   ├── index.js     # Angular components (pre-compiled)
│   │   └── index.d.ts   # Angular component types
│   ├── module.js        # Nuxt module
│   └── module.d.ts      # Module types
└── package.json

Use the core generators directly in any JavaScript environment — no framework required.

import { generateBeamSvg } from 'tronche'

const svg = generateBeamSvg('Clara Barton', ['#E07A5F', '#3D405B', '#81B29A', '#F4D06F', '#D8A47F'], {
  size: 120,
  square: false,
})
// svg is a string: '<svg viewBox="0 0 36 36"...'
document.body.innerHTML = svg

Each variant exports three functions:

Replace Marble with Beam, Pixel, Sunset, Ring, or Bauhaus for other variants.

import {
  generateMarbleSvg, generateBeamSvg, generatePixelSvg,
  generateSunsetSvg, generateRingSvg, generateBauhausSvg,
} from 'tronche'

Add the module to your nuxt.config.ts — components are auto-imported.

export default defineNuxtConfig({
  modules: ['tronche/module'],
})

<template>
  <Avatar name="Maria Mitchell" variant="beam" />
</template>

tronche: {
  prefix: 'T',  // components become TAvatar, TAvatarBeam, etc.
}

<script setup>
import { Avatar, AvatarMarble, AvatarBeam } from 'tronche/vue'
</script>
<template>
  <Avatar
    name="Grace Hopper"
    :colors="['#fb6900', '#f63700', '#004853']"
    variant="marble"
    :size="120"
    square
  />
</template>

import { Avatar, AvatarMarble } from 'tronche/react'

function Profile() {
  return (
    <Avatar
      name="Grace Hopper"
      colors={['#fb6900', '#f63700', '#004853']}
      variant="marble"
      size={120}
      square
    />
  )
}

Props are the same as Vue.

import { Avatar, AvatarMarble } from 'tronche/solid'

function Profile() {
  return (
    <Avatar
      name="Grace Hopper"
      colors={['#fb6900', '#f63700', '#004853']}
      variant="marble"
      size={120}
      square
    />
  )
}

Props are the same as Vue.

<script>
  import { Avatar, AvatarMarble } from 'tronche/svelte'
</script>

<Avatar
  name="Grace Hopper"
  colors={['#fb6900', '#f63700', '#004853']}
  variant="marble"
  size={120}
  square
/>

Props are the same as Vue.

Import the module — custom elements are auto-registered.

<script type="module">
  import 'tronche/lit'
</script>

<tronche-avatar
  name="Grace Hopper"
  variant="marble"
  size="120"
  square
></tronche-avatar>

Or import specific variant classes:

import { AvatarMarble } from 'tronche/lit'

Props are the same as Vue. Set array/boolean props via Lit property bindings (.colors=${palette}, ?square).

import { Component } from '@angular/core'
import { TroncheAvatar } from 'tronche/angular'

@Component({
  standalone: true,
  imports: [TroncheAvatar],
  template: `
    <tronche-avatar
      name="Grace Hopper"
      [colors]="['#fb6900', '#f63700', '#004853']"
      variant="marble"
      [size]="120"
      square
    />
  `,
})
export class Profile {}

Or import individual variant components:

import { TroncheMarble, TroncheBeam } from 'tronche/angular'

Props are the same as Vue.

Base URL: https://tronche.cc

GET /api/avatar/:name

Generates an SVG avatar from a name. No auth required — IP rate limited.

curl "https://tronche.cc/api/avatar/Clara%20Barton?variant=beam"
curl "https://tronche.cc/api/avatar/test?size=200&square=true&colors=FF6B6B,4ECDC4,45B7D1"

Rate limit: 1 000 requests/min per IP. Create an account for API key access with higher limits.

POST /api/auth/register   # Create account
POST /api/auth/login      # Sign in (sets session cookie)
POST /api/auth/logout     # Sign out
GET  /api/auth/session    # Current user (or null)

Register and login accept a JSON body with email, name, and password. Login and register set a session cookie — use it for the endpoints below.

GET    /api/api-keys       # List your keys (with usage stats)
POST   /api/api-keys       # Create a key (body: { name })
PUT    /api/api-keys/:id   # Update name or isActive
DELETE /api/api-keys/:id   # Delete a key

API keys are prefixed with tr_ and used via Authorization: Bearer tr_... for authenticated avatar generation (v1 — coming soon).

POST   /api/admin/promote/{email}   # Promote user to admin (requires secret)

GET    /api/admin/stats             # System-wide stats
GET    /api/admin/users             # List users (paginated)
GET    /api/admin/users/:id         # User details + API keys
PUT    /api/admin/users/:id         # Update role or isActive
DELETE /api/admin/users/:id         # Delete user + keys

GET    /api/admin/api-keys           # List all API keys (paginated)
PUT    /api/admin/api-keys/:id       # Update any key
DELETE /api/admin/api-keys/:id       # Delete any key

• Core lib — Framework-agnostic SVG generators (src/lib/)
• Vue components — Thin wrappers over the core lib (src/vue/)
• React components — Thin wrappers over the core lib (src/react/)
• Solid components — Thin wrappers over the core lib (src/solid/)
• Svelte components — Thin wrappers over the core lib (src/svelte/)
• Lit components — Custom elements over the core lib (src/lit/)
• Angular components — Thin wrappers over the core lib (src/angular/)
• Nuxt module — Auto-import via tronche/module (src/module.ts)
• Nuxt 4 — Frontend + API (Nitro)
• @nuxthub/core — Cloudflare deployment (D1, KV, R2)
• nuxt-auth-utils — Sessions and authentication
• Drizzle ORM — SQLite/D1 database
• @noble/hashes — Password hashing (scrypt)

Tronche is a spiritual successor to boring-avatars by Boring Designs. The avatar generation algorithms are ported from the original JavaScript library.

MIT