The state of miis in the browser

Today (Dec 26, 2025), if you want to render Miis in the browser, there aren't many options. First, the dev ecosystem is like this:

There's a gazillion ways to store Mii data

There's like 5 or so different implementation-defined specs (usually based on the console, including Mii Studio, which is Nintendo's Mii editing web app)

There's a few packages that can encode and decode various Mii formats between some representations

Nevertheless, it is possible to integrate it with the atproto ecosystem. Here's a demo:

The demo

https://atmii.wisp.place/profile/starptr.andref.app

Yeah it's not much 😭 but it gets the idea across. This demo does a few things I wanted to showcase:

1. The encoded Mii data is stored and pulled from the user's repo.

2. The Mii data is decoded client-side in the browser.

I gave up on rendering in the browser; this demo delegates that to Mii studio via Pretendo's mii-js library. Other demos like the FFL.js's demo-basic example fully renders the Mii data in a 3D environment. This is hard to get working for the purposes of this demo though; I'll explain this a bit in the section about libraries below.

The demo is interactive; if you visit https://atmii.wisp.place and go to /profile/<user-handle> or /profile/<did>, as long as you have a record like I do (at://starptr.andref.app/app.andref.atmii.mii/self), it should render on the web page. The above embedded example is from this link: https://atmii.wisp.place/profile/starptr.andref.app.

This demo is a proof-of-concept; there's currently no way to create the record (other than manually editing the user repo). If you're interested in the source code, it's linked at the bottom of this page. I don't have any plans to build this out any further, but I do have some interesting finds I want to share.

Your options of helper libraries

There's a few libraries out there that helps encode/decode/render the Mii binary/Json/base64 data.

KestronProgramming's MiiJS (GitHub)

This is the library I first tried to use and failed. This library seems to have the most features though; it tries to handle Miis from all "consoles" (DS, Wii, Wii U, 3DS, Switch/2, Studio, Miitomo, etc.) and correctly convert between them. This library requires the FFL artifact from a physical console for some operations like rendering (although there's a library function to use the Studio renderer which doesn't need the FFL artifact). What's FFL? See the FFL section below.

@pretendo.network's mii-js (GitHub)

This one is the only one that I got to work. This library uses objects like Buffer, so you'll need a node.js polyfill. Otherwise, it seems to work for the demo by decoding and rendering the Mii byte data.

@ariankordi.net's FFL.js (GitHub)

This library is a wrapper around the FFL artifact, but also has the coolest demo: https://ariankordi.github.io/FFL.js/examples/demo-basic.html. Here's a gif I took since setting it up is a bit tricky:

This package doesn't seem to support importing as an ES module however, and I don't have enough experience messing with web app bundlers to figure out how to make it work :(.

What's the FFL artifact?

The FFL artifact is a file called FFLResHigh.dat or similar. My understanding is that this is a compiled artifact that implements how Miis were rendered on the Wii/3DS/Miitomo. It has insane potential; @ariankordi.net's demo shows that you can interact with the 3D render (eg. rotate, select shaders, etc.). In tandem with user profiles in atproto, you can see how much potential this could have!

Takeaways

This is a quick demo (it took me the whole day😩) and honestly I didn't do much beyond consuming some records from an atproto user repo. With an improved FFL wrapper and someone with a lot more experience than I do writing frontend SPAs, there's a lot of potential for Miis to be used as interactive avatars for atproto users.

Source code for the demo is available on GitHub.