← All demos

Svelte 5 custom element

The Svelte build ships a self-contained <ania-avatar> element bundle — drop the one script, write the tag.

● LIVE from CDN cdn.jsdelivr.net/gh/rob-d3v/ania-avatar-svelte/dist/ania-avatar-element.js

Running demo

checking…
ℹ️ The Svelte custom-element bundle exposes a focused subset of props (source, size, theme, idle/talk speed, basic lip-sync, initial action). Paste an avatar URL (+ password for encrypted files) to load one live. For the full prop surface (TTS/STT/wake-word/webhook) use the <AniaAvatar> Svelte component in a SvelteKit app.
cdn drop-in
<script src="https://cdn.jsdelivr.net/gh/rob-d3v/ania-avatar-svelte/dist/ania-avatar-element.js"></script>

<ania-avatar avatar-url="avatar.ania" width="320" height="320"
             theme="dark" lip-sync-enabled></ania-avatar>
or, in a SvelteKit app
<script>
  import { AniaAvatar } from 'ania-avatar-svelte';
</script>

<AniaAvatar avatarUrl="/avatar.ania" lipSyncEnabled
            onload={() => console.log('loaded')} />