Splat: A Free Affinity Diagramming Tool in a Single HTML File

As an HCI/UX researcher, I frequently need to analyze qualitative data. Affinity diagramming, a method of sticky note clustering originally invented by Jiro Kawakita and extremely popular in UX research and design, is my go-to method.

Despite enjoying affinity diagramming, a practical problem always crops up—what digital tool should one use? I’ve used Miro, FigJam, and Mural, but they require accounts with cloud services and lag, which compromises privacy and usability. Beside these issues, an operation as simple as sharing a board to a collaborator is frequently paywalled.

For a task as simple as jotting ideas on virtual sticky notes and moving them around, can’t we do better? Why are interfaces so laggy, cloud-first, and paywalled? Faced with a daunting task of needing to cluster 1400+ interview codes, and needing to choose a tool once more, I decided to build my own.

Today, I’m excited to share Splat, a light-weight, free affinity diagramming tool that lives entirely in a single HTML file (demo here). No installation, no account creation, no cloud services unless you need them. Just open it in your browser and start clustering notes. If you’ve ever needed to organize ideas visually, whether for qualitative coding, brainstorming, or clustering user feedback, give Splat a try.

A Quick Example

Say you’re analyzing user interviews about a productivity app. You’ve got quotes and observations like:

• “I wish the app would sync faster” (P3)
• “The notifications are too aggressive” (P1)
• “Love the clean interface” (P2)
• “Sometimes my data doesn’t save” (P3)
• “The daily digest email is helpful” (P1)

You can drag a text file with these notes onto Splat’s canvas, and they appear as sticky notes you can move around. Color-code them (eight super-cool colors available), drag them into clusters, add new notes by double-clicking the canvas. I typically like to name clusters using a new color:

When you select notes in a cluster, Splat shows you all the participant IDs in the status bar. I found this super helpful for checking if a theme is actually representative or just one voice:

If you need to find related notes, the semantic search feature lets you type something like “annoying” and Splat will surface relevant notes even if they don’t use those exact words. It uses embeddings that run locally in your browser, or you can configure it to use Ollama or OpenAI if you prefer. The results list provides visibility on relevance scores:

There’s even a magic, “agentic” AI assistant, which can perform some basic actions on the board. I ran it entirely locally via Ollama and gpt-oss:20b , to great effect:

Again, it’s all in a single HTML file, so it’s fully configurable. Don’t have a feature or something doesn’t work exactly as you’d like for your project? Load splat.html in Cursor, Claude Code, or VS Code, and just vibe-code it.

What Makes Splat Different

Privacy-first design: Everything runs locally by default. Your data never leaves your machine unless you explicitly choose to use cloud-based AI features. For researchers handling sensitive interview data, this matters.

Actually portable: It’s one HTML file. We’d send it to collaborators with an exported JSON board state, and they can load it instantly and inspect. No more “create an account” or “upgrade your plan to share with others.” It is dead-simple to use and inspect other’s work.

Built for real work: I used Splat to cluster over a thousand codes in an actual research project. Features like pinning important notes, drag-selecting multiple items, search, group selection, and auto-save every 60 seconds emerged from these real needs.

Optional AI assistance: There’s an AI agent that can help search, create, and edit notes (it can’t currently auto-cluster for you though —this was an intentional decision I made, although I’m open to revisiting it in the future). Run it locally with Ollama or use OpenAI if you want more power. But you never have to touch the assistant if you don’t want to.

Key Features

Splat supports:

• Eight note colors for visual coding
• Zoom and pan controls
• Drag-and-drop text and CSV file loading
• Group select and move
• Export/import from simple JSON format
• Hybrid search combining keyword matching and semantic similarity (configurable in advanced settings for those who want it)
• Three embedding providers, and you can customize which one you use for semantic search: Transformers.js (in-browser), Ollama (local), or OpenAI (cloud)
• Optional AI assistant, customizable with Ollama (local) or OpenAI

For semantic search, the default uses HuggingFace’s Transformers.js with the bge-small model, which downloads once and then runs entirely in your browser. If you want to use Ollama locally, you’ll need to enable CORS (instructions in the repo).

Who’s this for?

Primarily, I built it for qualitative researchers who need to code interviews and organize observations. But I’ve seen students and colleagues use it for mind-mapping, organizing user feedback, clustering feature requests, and general brainstorming.

Get started

Head over to the GitHub repo and download splat.html. Open it in your browser. That's it.

You can also try a demo immediately, without downloading anything. Just keep in mind that features like Ollama won’t work unless you load it locally.

Splat is completely open-source (GPL-3.0). Want a feature? Raise an Issue or submit a PR on our GitHub. We built this as a community resource.

Thanks to Jingyue Zhang, Ling Xin He, and Yunfan Shang for help with implementing the AI assistance and search ranking list features, and to Claude Sonnet 4.0 for helping me vibe-code the first version.

Happy clustering!

~Ian