# Getting Started

> Install Tegaki, the handwriting animation library, and render your first animated handwriting in React, Svelte, Vue, SolidJS, Astro, Web Components or vanilla JS.

Source: https://tegaki.ink/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

```sh
npm install tegaki
```

## Quick Start

1. **Pick a font bundle**

   Use one of the built-in font bundles:

   ```tsx
   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`](https://tegaki.ink/api/renderer/#fallbackfont). Bundles are only loaded when you `import` them, but if you need a tighter footprint use the [studio](https://tegaki.ink/studio/) to produce a custom bundle with just the characters you need.

   Want a different font? Use the [studio](https://tegaki.ink/studio/) to create stroke data for any Google Font, then import the downloaded bundle instead:

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

2. **Render the animation**

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

   **React**

   ```tsx
   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**

   ```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**

   ```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**

   ```tsx
   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**

   ```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](https://tegaki.ink/frameworks/astro/).

   **Web Components**

   ```html
   <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**

   ```html
   <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](https://tegaki.ink/guides/bundlers/#vite).

## What's next?

- [Framework guides](https://tegaki.ink/frameworks/react/): React, Svelte, Vue, SolidJS, Astro, Web Components, and vanilla JS
- [Generating Font Data](https://tegaki.ink/guides/generating/): the pipelines and their options
- [Rendering Animations](https://tegaki.ink/guides/rendering/): timing, effects, and time modes
- [Studio](https://tegaki.ink/studio/): generate a bundle for any font in the browser