Anki is a great spaced repetition app, but its Python-based GUI feels outdated — especially the Browse window. I tried several plugins to adjust fonts and scaling, but none worked well.
All I wanted was simple: a bigger font in the Browse table, and better scaling for the left (decks, tags, flags) and right (card editor) panels. After trying various plugins and settings with inconsistent results, I decided to build my own custom browser using the AnkiConnect API.
Main Idea
My first version was built with Laravel, Livewire, and TailwindCSS.
AnkiConnect provided the data, and Laravel rendered it through Livewire components. The interface had a simple header with a small query builder and cards displayed in a grid view instead of a table. I was limited by Liveware writing everything in PHP is not my thing. JS has place in the world. PHP is only for rendering HTML. I was thinking using NativePHP package and Electron. I wasn’t happy with the results. I did a lot of tests at the end I abandoned it.
Then I tried using Svelte and React
From all FE libraries Svelte seems the most elegant solution for BE developer as me. Still not perfect some syntax logic and way of coding, I tried Svelte 5, at the still didn’t feel comfortable with frontend work itself. I had to learn TypeScript, Svelte 5 API wasn’t that good with AI Chats and Agents at that time. Most of the code was for Svelte 4. I have a lot of conflicts and problems.
Eventually, I rebuilt the app in React with AI assistance — and it turned out much better: faster, smoother, and more polished. AI is trained mainly with React in FE world.
Working with AI was interesting. Sometimes it nailed my requests perfectly, sometimes it broke everything. Often, it was faster to start over with a clearer prompt. The project always felt 80% done in an hour, but the last 20% took days of fixing bugs, cleaning unused code, and refining logic.
Challenges and Lessons
My biggest struggle was UI and Tailwind CSS. The utility classes are simple, but too many of them make code cluttered. I prefer a minimal, clean approach.
Designing a simple, efficient interface was also tough — figuring out where and how to place components for quick access without constant tab switching. I wanted everything you need to be right there.
It’s still not perfect, but I’m happy with it. Building reusable components took a lot of testing and trial and error. As a beginner React developer, starting with plain HTML instead of big libraries was a good decision.
I created an Anki Query Builder and Anki Template component — probably the hardest part of the UI. I think I still can make it simpler. It’s very difficult to remove the clutter and keep the only 20% of features that cover 80% of the cases users will use. So first I get over excited with ideas, then after AI disappointed me with tons of junk code, duplications and crazy logic. I return back to original simpler solution, or I have better idea. A lot of decision making that drains my energy.
Conclusion
I love using Anki as a language database, but constantly searching for plugins to tweak it can be frustrating.
Building my own tools around it — like this browser app — gives me more control, flexibility, and enjoyment in the learning process.