Documentation

Everything to integrate Tronche into your projects

Installation

Shell

npm install tronche

Vanilla JS

Use the core generators directly — no framework required.

TypeScript

import { generateBeamSvg } from 'tronche'

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

Nuxt Module

Add the module in your nuxt.config.ts :

JavaScript

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

Components are auto-imported:

Vue

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

Vue.js

Vue

<script setup>
import Avatar from 'tronche/vue/components/Avatar.vue'
</script>

<template>
  <Avatar name="Grace Hopper" :colors="[
    '#fb6900',
    '#f63700',
    '#004853',
  ]" />
</template>

Props

Prop	Type	Default	Description
name	string	Clara Barton	Name to generate the avatar
variant	string	marble	marble, beam, pixel, sunset, ring, bauhaus
size	number	80	Size in pixels
square	boolean	false	Square avatar
colors	string[]	palette	5 hexadecimal colors
title	boolean	false	Title tag

REST API

Generate avatars remotely via our API.

GET/api/avatar/:name

Parameter	Type	Default	Description
variant	string	marble	marble, beam, pixel, sunset, ring, bauhaus
size	number	80	16 to 512
square	boolean	false	true or false
colors	string	—	Comma-separated hex colors

Examples

Shell

curl "https://tronche.app/api/avatar/Clara%20Barton?variant=beam"

Shell

curl "https://tronche.app/api/avatar/test?size=200&square=true&colors=FF6B6B,4ECDC4,45B7D1"

Rate limiting

The free plan allows 100 requests per minute per IP. For higher volume, create an account and use an API key.

Variants

beam

Expressive faces

pixel

8×8 pixel art

sunset

Color gradients

ring

Concentric circles

bauhaus

Geometric shapes

marble

Blurry organic shapes