explaingit

chanind/hanzi-writer

★ 4,768TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A JavaScript library that animates Chinese character stroke order on any web page and includes a quiz mode where learners trace strokes themselves and receive instant right or wrong feedback.

Mindmap

mindmap
  root((Hanzi Writer))
    What it does
      Animates stroke order
      Quiz mode tracing
      Simplified and Traditional
    Tech
      TypeScript
      JavaScript
      Browser only
    Data Source
      Make Me A Hanzi dataset
      Arphic Technology fonts
    Use Cases
      Language learning apps
      Stroke order diagrams
      Mobile tracing practice
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add animated Chinese character stroke-order diagrams to a language-learning website with a few lines of JavaScript

USE CASE 2

Build a stroke-order quiz where learners trace characters on mobile and receive correct or incorrect feedback

USE CASE 3

Display both simplified and traditional Chinese characters with proper animations in any browser-based app

USE CASE 4

Embed Hanzi Writer in a React or Vue component to teach handwriting to beginners without a backend

Tech stack

TypeScriptJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Stroke data ships as a separate dataset under the Arphic Public License, both the library and the dataset are needed.

MIT, use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

Hanzi Writer is a JavaScript library for animating the stroke order of Chinese characters and running practice quizzes on a web page. When a learner wants to see how to write a character correctly, the library draws each stroke in sequence, showing the proper direction and order. It supports both simplified and traditional Chinese characters. The library can be added to any website or web application. A developer points it at a character, and it handles the drawing automatically. There is also a quiz mode where learners trace strokes themselves and receive feedback. The stroke data comes from a separate open-source dataset called Make Me A Hanzi, which in turn traces back to fonts released by a Taiwanese company called Arphic Technology in 1999. That data is stored in a companion repository and is covered by its own license, the Arphic Public License. The Hanzi Writer library itself is available under the MIT license. The project is minimal and focused. It does one thing: show how Chinese characters are written. There is no backend, no account system, and no dependency on any larger framework. The README is brief and points to a separate documentation site and a live demo for anyone who wants to see it in action before adding it to a project.

Copy-paste prompts

Prompt 1
Show me how to add hanzi-writer to my HTML page and animate the stroke order for the character 爱 automatically when the page loads.
Prompt 2
I am building a Chinese learning app with hanzi-writer. How do I set up quiz mode so students trace strokes on a touchscreen and see feedback when they are wrong?
Prompt 3
How do I display a row of vocabulary characters side-by-side on a single page, each with its own animation and a Start Quiz button?
Prompt 4
Walk me through integrating hanzi-writer into a React component, installing the package and creating a reusable StrokeOrder component.
Open on GitHub → Explain another repo

← chanind on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.