{
  "id": 11154648,
  "title": "Building a Chinese stroke-order practice tool with hanzi-writer",
  "url": "https://urgent.news/2026/10/01/building-a-chinese-stroke-order-practice-tool-with-hanzi-writer",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-01T09:17:32.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/tuvung123/building-a-chinese-stroke-order-practice-tool-with-hanzi-writer-47fg"
  },
  "original_language": "en",
  "account": "Chinese characters are written using a consistent stroke order. Learners who ignore this order develop slow, untidy handwriting and characters that may not be recognized by handwriting keyboards. To address this, the hanzi-writer JavaScript library offers an animated stroke order practice tool. This post explores the aspects that required additional consideration.\n\nHanzi-writer generates characters as SVG from stroke data, consisting of outline paths and a median line for each stroke. It provides three learning modes: Animate, displaying each stroke in order, Outline + Trace, showing a faint outline for learners to draw over, and Quiz, hiding the character and comparing the learner's strokes against the expected median with adjustable leniency.\n\nTo create a HanziWriter instance, import it from the library and configure the target element, character, dimensions, padding, outline display, and a function to load character data. For a learning website, fetching character data from a CDN can lead to numerous third-party requests and issues when the CDN experiences delays. To mitigate this, serve the data files from a dedicated static path and provide a custom charDataLoader function to fetch the data via fetch and handle the loading or error scenarios.\n\nCreating printable practice sheets is essential for learners who still prefer physical materials. The 米字格 (rice grain grid), featuring a square with diagonal and central guide lines, is a standard practice grid. Due to hanzi-writer's output of SVG, this stroke data can be integrated into a printable grid, with rows for each character, solid cells for initial tracing, faint outlines for tracing, and empty cells for independent practice. By generating the sheet as SVG within an HTML page and utilizing @media print with a defined A4 size and margins, clean output can be achieved without relying on a PDF library.\n\nAdjusting the leniency of the Quiz mode is crucial. The default setting of 1 may be too stringent for beginners, leading to frustration during the early stages of learning. Increasing the leniency allows for a more forgiving assessment, reducing frustration early on. Additionally, pairing characters with their components, such as the radicals 女 and 子 in 好, aids memorization and comprehension by relating characters to their constituent parts. The resulting tool, including printable 米字格 sheets, is available on the Chinese handwriting practice page of Tu Vung 123, with the interface in Vietnamese but the writing area being self-explanatory.",
  "summary": "Chinese characters are written in a fixed stroke order, and learners who skip it end up with slow, messy handwriting and characters that handwriting keyboards fail to recognise. When we added a handwriting practice tool for Vietnamese learners of Chinese, we used hanzi-writer , an open-source JavaScript library that animates and quizzes stroke order. This post covers the parts that took more…",
  "key_points": [
    "Hanzi-writer offers animated stroke order practice tool for Chinese characters.",
    "HanziWriter provides three learning modes: Animate, Outline+Trace, and Quiz.",
    "Printable 米字格 sheets included, aiding learners with physical practice materials."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}