Getting Started

Tegaki generates stroke data from any font and renders it as handwriting animation. It works with React, Svelte, Vue, SolidJS, Astro, Web Components, or vanilla JavaScript.

Installation

npm

npm install tegaki

pnpm

pnpm add tegaki

yarn

yarn add tegaki

bun

bun add tegaki

Quick Start

1. Pick a font bundle

   Use one of the built-in font bundles:

   import bundle from 'tegaki/fonts/caveat';

   Built-in fonts: caveat, italianno, tangerine, parisienne (Latin), suez-one (Hebrew), amiri (Arabic), tillana (Devanagari), klee-one (Japanese), nanum-pen-script (Korean), lxgw-wenkai (Simplified Chinese).

   Bundle size

   Each bundle ships the full source TTF as a fallback for characters outside the generated subset. The browser downloads it only when the text contains such a character. The Latin bundles are small (~250–400 KB), but Hebrew/Arabic/Japanese reflect their source fonts’ size: klee-one is around 7 MB because Klee One’s font contains thousands of kanji. lxgw-wenkai is the exception: LXGW WenKai’s full font is 25 MB, so it ships only the generated subset. Pick a font for the characters outside it with fallbackFont. Bundles are only loaded when you import them, but if you need a tighter footprint use the studio to produce a custom bundle with just the characters you need.

   Want a different font? Use the studio to create stroke data for any Google Font, then import the downloaded bundle instead:

   import bundle from './output/my-font/bundle';

2. Render the animation

   Import the component for your framework and pass the font bundle:

   React

   import { TegakiRenderer } from 'tegaki';
   import bundle from 'tegaki/fonts/caveat';
   
   function App() {
     return (
       <TegakiRenderer
         font={bundle}
         time={{ mode: 'uncontrolled', speed: 1, loop: true }}
         style={{ fontSize: 48 }}
       >
         Hello World
       </TegakiRenderer>
     );
   }

   Svelte

   <script>
     import { TegakiRenderer } from 'tegaki/svelte';
     import bundle from 'tegaki/fonts/caveat';
   </script>
   
   <TegakiRenderer
     font={bundle}
     text="Hello World"
     time={{ mode: 'uncontrolled', speed: 1, loop: true }}
     style="font-size: 48px"
   />

   Vue

   <script setup>
   import { TegakiRenderer } from 'tegaki/vue';
   import bundle from 'tegaki/fonts/caveat';
   </script>
   
   <template>
     <TegakiRenderer
       :font="bundle"
       text="Hello World"
       :time="{ mode: 'uncontrolled', speed: 1, loop: true }"
       :style="{ fontSize: '48px' }"
     />
   </template>

   SolidJS

   import { TegakiRenderer } from 'tegaki/solid';
   import bundle from 'tegaki/fonts/caveat';
   
   function App() {
     return (
       <TegakiRenderer
         font={bundle}
         text="Hello World"
         time={{ mode: 'uncontrolled', speed: 1, loop: true }}
         style={{ 'font-size': '48px' }}
       />
     );
   }

   Astro

   ---
   import TegakiRenderer from 'tegaki/astro';
   import bundle from 'tegaki/fonts/caveat';
   ---
   
   <TegakiRenderer
     font={bundle}
     text="Hello World"
     time={{ mode: 'uncontrolled', speed: 1, loop: true }}
     style="font-size: 48px"
   />

   Also add tegaki() from tegaki/astro/integration to your config’s integrations, so the font loads on server-rendered pages. See the Astro guide.

   Web Components

   <tegaki-renderer
     font="Caveat"
     text="Hello World"
     loop
     style="font-size: 48px"
   ></tegaki-renderer>
   
   <script type="module">
     import { registerTegakiElement, TegakiEngine } from 'tegaki/wc';
     import bundle from 'tegaki/fonts/caveat';
   
     TegakiEngine.registerBundle(bundle);
     registerTegakiElement();
   </script>

   Vanilla JS

   <div id="tegaki" style="font-size: 48px"></div>
   <script type="module">
     import { TegakiEngine } from 'tegaki/core';
     import bundle from 'tegaki/fonts/caveat';
   
     new TegakiEngine(document.getElementById('tegaki'), {
       text: 'Hello World',
       font: bundle,
       time: { mode: 'uncontrolled', speed: 1, loop: true },
     });
   </script>

   Using Vite 7 or earlier?

   Vite’s dev pre-bundler breaks the font bundle’s .ttf URL, so the text is laid out but never draws. Add optimizeDeps: { exclude: ['tegaki'] } to vite.config.ts and restart the dev server. See Bundler Setup.

What’s next?

• Framework guides: React, Svelte, Vue, SolidJS, Astro, Web Components, and vanilla JS
• Generating Font Data: the pipelines and their options
• Rendering Animations: timing, effects, and time modes
• Studio: generate a bundle for any font in the browser