VividHanzi: An Open-Source, Free Chinese Character Learning Web App

Learning Chinese characters has always been one of the biggest challenges for language learners — stroke order, pronunciation, and meaning all need to be mastered together. VividHanzi, created by developer ItsCogo, is a completely free, open-source (MIT license) Chinese character learning web app that aims to bring all these elements together using a modern frontend stack — with no ads, no tracking, and no account required.

Core Features: A Closed Learning Loop from Memorization to Writing

VividHanzi breaks Chinese character learning into several key modules, forming a complete learning loop.

Spaced Repetition is the foundation of its memory system. This forgetting-curve-based review mechanism has already been proven effective in tools like Anki — it prompts learners to review material just before they're likely to forget it, improving long-term retention.

Writing Practice and Stroke Order Demonstrations are powered by Hanzi Writer, a well-established open-source library. Correct stroke order not only ensures proper writing form but also aids in character recognition and memorization — especially useful for beginners.

Tone-Colored Pinyin uses color to distinguish the four tones, providing a visual aid that helps reduce the cognitive load of tone memorization — particularly beneficial for Western learners who aren't naturally attuned to tonal distinctions.

A complete built-in dictionary rounds out the experience, so learners don't need to switch between multiple tools.

The specific implementation of spaced repetition typically follows the SM-2 algorithm or a variant. SM-2 was developed by Piotr Woźniak in 1987. Its core idea is to dynamically calculate the interval until the next review based on a difficulty rating the user provides after each session. Higher ratings (better recall) lead to longer intervals; lower ratings shorten the interval or reset it entirely. Anki is one of the most well-known tools using an SM-2 variant, and VividHanzi's spaced repetition system follows the same principles. The strength of this approach is that it delegates the cognitive decision of when to review to the algorithm, freeing learners to focus on the content itself rather than manually planning their study schedule.

Tech Stack: A Modern Frontend in Practice

From a technical standpoint, VividHanzi uses a notably up-to-date frontend combination:

• React 19 with strict-mode TypeScript for type safety and maintainability
• Vite as the build tool for a fast development experience
• Tailwind CSS v4 for styling, reflecting a commitment to staying current
• Hanzi Writer for stroke order animations
• Optional Supabase sync for users who want to save progress across devices

One design detail worth noting: all dictionary data is generated from open datasets via build scripts. This makes the data source transparent and reproducible — a hallmark of auditable open-source projects. Rather than building a closed proprietary data system, the developer builds on top of open datasets.

Hanzi Writer is an open-source JavaScript library derived from the Stroke Order project. It relies on the community-maintained hanzi-writer-data dataset, which provides SVG path stroke data with stroke order annotations for thousands of Chinese characters. Hanzi Writer can render animated stroke-by-stroke character animations in any HTML environment and supports stroke recognition comparison when users practice writing on a Canvas. Because its dataset is also released as open source, using Hanzi Writer as a dependency in VividHanzi ensures full traceability of stroke order data — reinforcing the "transparent and reproducible" design philosophy described above.

Supabase is an open-source BaaS (Backend as a Service) platform built on PostgreSQL, offering database, authentication, and real-time subscription capabilities. It's widely regarded as an open-source alternative to Firebase. VividHanzi uses it for cross-device progress sync — but as an optional integration rather than a hard dependency. This means the app can run in a fully static, backend-free mode. It also makes it easy for developers to swap in their own Supabase instance, further reinforcing the app's privacy-first stance.

A Privacy-First Product Philosophy

At a time when most learning apps rely on ads, data tracking, and account ecosystems to monetize, VividHanzi takes a clear stance: no ads, no tracking, and full functionality without an account. Supabase sync is designed as an opt-in feature, not a requirement — meaning users can access all core functionality in a fully local environment, only bringing in cloud accounts when cross-device sync is needed.

This privacy-first positioning, combined with the MIT open-source license, gives VividHanzi a meaningful point of differentiation among lightweight language learning tools. For users who care about data privacy or want to self-host and customize the app, the open-source code on GitHub provides ample freedom.

Who It's For — and Its Limitations

VividHanzi is best suited for beginner to intermediate Chinese learners, especially those who value a free, distraction-free experience and are open to trying new tools. The combination of stroke order practice, tone-colored pinyin, and spaced repetition covers most foundational needs for learning Chinese characters.

That said, as a project maintained by an individual developer, it has natural limitations: feature completeness, long-term maintenance cadence, and community ecosystem all remain to be seen. Compared to mature solutions like Anki — which offers deep customization and a massive deck ecosystem — VividHanzi's strength lies in its out-of-the-box, character-focused experience rather than deep configurability.

Users who want to try it can visit the live site at vividhanzi.com; for developers, the open-source code on GitHub is the entry point for understanding the implementation, contributing, or self-hosting.

Summary

VividHanzi is a clearly positioned open-source Chinese character learning tool: it leads with privacy-first, free, ad-free design, and uses a modern frontend stack to deliver a complete learning loop covering spaced repetition, stroke order writing, tone-colored pinyin, and a built-in dictionary. It may not replace more powerful all-in-one solutions, but for Chinese learners who prioritize simplicity and open data, it's a lightweight option well worth trying.