Getting Started

Tegaki generates stroke data from Google Fonts 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.

   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