Skip to main content
Lab Grimoire
TW EN
☕ Coffee
Spellbook / tegaki ↗ Visit project
dev-tools

tegaki

A pure TypeScript library that converts any font into stroke-by-stroke handwriting animations. Native support for React, Vue, Svelte, SolidJS, Astro, and Web Components. Zero native dependencies, MIT licensed. 2,157 stars, actively maintained with API updates in April 2026.

Best For

Frontend developers who want handwriting animations in web applications without manually tracing SVG paths or calling any third-party API. Particularly suited for:

  • React, Vue, Svelte, or Astro applications that want animated quality on titles, milestones, or dashboard elements
  • Lean frontend projects that want to avoid a heavy animation framework
  • Developers who need all animation logic to run client-side without backend dependencies

If you need precise control over each individual stroke path, tegaki gives you font-driven automatic parsing, not manual drawing. If that trade-off works for your use case, there is almost no reason not to use it.

How I Actually Use It

tegaki solves a specific problem: you have text, you want it to appear as if it is being written in real time, and you do not want to spend hours tracing SVG paths by hand. Give it a font file, it parses the glyph geometry automatically and draws the animation in a natural stroke sequence — no manual intervention required.

The typical failure modes of tools in this category are single-framework lock-in and unexpected native dependencies. tegaki avoids both. Separate packages for tegaki/react, tegaki/vue, tegaki/svelte, tegaki/solid, tegaki/astro, and tegaki/wc (Web Components) ship independently, with no wrapper layer.

The engineering quality is worth noting. Bun for bundling, Biome for linting, Changeset for versioning. This toolchain signals a maintainer who has thought about long-term maintenance. Version 0.15.0 shipped on April 20, 2026, with API-level changes (strokeGradient/globalGradient split, render-stage hooks). This is not an abandoned repository.

image

Where It Is Strong

  • Provide a font file and the glyph geometry is parsed automatically. No path design work required.
  • Native cross-framework support: Independent packages for React, Vue, Svelte, SolidJS, Astro, and Web Components with no wrapper layer
  • Pure TypeScript frontend. npm install tegaki is the complete installation, no backend or API key needed.
  • Bun + Biome + Changeset toolchain, active updates in April 2026, reliable maintenance
  • MIT licensed, no commercial use restrictions

Where It Fails

  • Stroke sequence is inferred from glyph geometry, not authoritative. For scripts where stroke order matters (traditional Chinese, Japanese kanji), the result may not match correct calligraphic order.
  • Documentation focuses on Latin fonts. How traditional Chinese characters parse and animate requires hands-on verification.
  • When using commercially licensed fonts, confirming the font's terms allow animation generation is on you.
  • You must provide your own font file, a minor friction point for developers unfamiliar with font management.

Pricing, Difficulty, and Risk

Free and open source under MIT. Low difficulty — React users run npm install tegaki/react and follow the component documentation without needing to understand glyph parsing internals. The main risk is CJK font compatibility if your use case includes Chinese or Japanese text; test on your target font before committing.

Verdict

The best current option for frontend handwriting animations. No overengineering, solves one thing well, clean cross-framework support, reliable maintenance.

For React or TypeScript applications, this is the lowest-friction path to handwriting animation. If your use case includes CJK fonts, test glyph rendering before committing to the integration.

Source