Getting Started

Tegaki generates stroke data from any font and renders beautiful handwriting animations. 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).

   Bundle size

   Each bundle ships the full source TTF as a fallback for characters outside the generated subset. 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. Bundles are only loaded when you import them, but if you need a tighter footprint use the interactive generator to produce a custom bundle with just the characters you need.

   Want a different font? Use the interactive generator 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"
   />

   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>

What’s next?

• Framework guides — detailed usage for React, Svelte, Vue, SolidJS, Astro, Web Components, and vanilla JS
• Generating Font Data — learn about pipeline options and customization
• Rendering Animations — control timing, effects, and rendering modes
• Generator Tool — try the interactive generator