Svelte

Tegaki provides a Svelte 5 component with SSR support and reactive prop updates.

Installation

npm

npm install tegaki svelte

pnpm

pnpm add tegaki svelte

yarn

yarn add tegaki svelte

bun

bun add tegaki svelte

Basic example

<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"
/>

Controlled time

Bind the time to a reactive variable:

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';

  let time = $state(0);
</script>

<input type="range" min={0} max={10} step={0.01} bind:value={time} />

<TegakiRenderer
  font={bundle}
  text="Scrub me!"
  time={time}
  style="font-size: 48px"
/>

Plugins

Glows, gradients, tapered ends and the rest are plugins. Import the factories from tegaki/svelte and pass the plugins in a list:

<script>
  import { glowPlugin, strokeGradientPlugin, TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';

  const plugins = [strokeGradientPlugin(), glowPlugin({ radius: 0.1, color: '#00ccff' })];
</script>

<TegakiRenderer
  font={bundle}
  text="Glowing rainbow"
  time={{ mode: 'uncontrolled', speed: 1, loop: true }}
  {plugins}
  style="font-size: 48px"
/>

Registered plugins can also be named: plugins={['taper', ['glow', { radius: 0.1 }]]}. See Style plugins and Naming plugins. The pressure prop (0 to 1, default 1) sets how much the ink’s width follows the pen’s pressure.

Streaming text

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';

  let { text } = $props();
</script>

<TegakiRenderer
  font={bundle}
  {text}
  time={{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }}
  style="font-size: 32px"
/>

Props

The Svelte component accepts all TegakiEngineOptions plus standard HTML div attributes (class, style, etc.).