← All demos

Web Component <ania-avatar>

A single <script> tag from jsDelivr defines the custom element. No build, no npm, no framework.

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

Running demo

checking…
ℹ️ Paste a reachable .ania / avatar .json URL below (and a password if it's an encrypted personal file), then Load. The element, its props, events and runCommand() are live from the CDN; only the avatar payload is supplied by you.
the entire integration
<script src="https://cdn.jsdelivr.net/gh/rob-d3v/ania-avatar-wc/dist/ania-avatar.js"></script>

<ania-avatar avatar-url="avatar.ania" width="320" height="320"
             theme="dark" lip-sync-enabled></ania-avatar>

<script>
  const el = document.querySelector('ania-avatar');
  el.addEventListener('ania-load', () => console.log('loaded'));
  el.runCommand('action 1');
</script>