Slidev Typed.js Addon

A Slidev addon that integrates Typed.js to create animated typewriter effects for text and code in your presentations.

Features

• 🎭 Typewriter animations for text and code
• 💻 Syntax highlighting with Shiki (same as Slidev)
• 🔄 Loop animations with customizable delays
• ⚡ Configurable typing speeds and behaviors
• 🎨 Multiple language support for code highlighting
• 🎯 Callback functions for animation events
• 📱 Responsive design that works on all screen sizes
• ✨ Code fence integration - Use {type-lines} for natural syntax
• 🚀 Line-by-line code animation - Progressive code building
• 🔄 Transformer support - Automatic conversion of {type-lines} code fences

Installation

npm install slidev-addon-typed
# or
yarn add slidev-addon-typed
# or
pnpm add slidev-addon-typed

Setup

Add the addon to your Slidev presentation by adding it to the frontmatter or package.json:

Frontmatter approach:

---
addons:
  - typed
---

Package.json approach:

{
  "slidev": {
    "addons": [
      "typed"
    ]
  }
}

Usage

Code Fence Animation (Recommended)

The easiest way to create line-by-line code animations is using the {type-lines} transformer syntax:

function createServer() {
  const server = express();
  
  server.get('/health', (req, res) => {
    res.json({ status: 'ok' });
  });
  
  return server;
}

Syntax Options:

• {type-lines} - Basic line-by-line typing
• {type-lines: speed=60} - Custom typing speed
• {type-lines: speed=40, delay=1000} - Speed + start delay
• {type-lines: cursor=false} - Hide cursor
• {type-lines: cursor="_"} - Custom cursor character

Text Animation

Use the <Typed> component to create typewriter effects for regular text:

<Typed 
  :strings="['Hello World!', 'Welcome to Slidev!', 'Create amazing presentations!']"
  :type-speed="70"
  :back-speed="50"
  :loop="true"
/>

Code Animation

Use the <TypedCode> component to animate code with syntax highlighting:

<TypedCode 
  :code="[
    'function hello() {',
    'function hello() {\n  console.log(\"Hello World!\");',
    'function hello() {\n  console.log(\"Hello World!\");\n  return \"Done!\";\n}'
  ]"
  language="javascript"
  :type-speed="50"
  :loop="true"
/>

Line-by-Line Code Animation

Use the <TypedCodeBlock> component for progressive code building:

<TypedCodeBlock 
  :code="`function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}`"
  language="javascript"
  :type-speed="40"
/>

Component Properties

Typed Component

| Property | Type | Default | Description | |----------|------|---------|-------------| | strings | string[] | ['Hello World!'] | Array of strings to type out | | typeSpeed | number | 70 | Typing speed (milliseconds between characters) | | backSpeed | number | 50 | Backspacing speed | | backDelay | number | 2000 | Delay before backspacing (milliseconds) | | startDelay | number | 0 | Delay before typing starts | | loop | boolean | false | Whether to loop the animation | | loopCount | number | Infinity | Number of loops (if loop is true) | | showCursor | boolean | true | Whether to show the cursor | | cursorChar | string | '|' | Character to use for cursor | | smartBackspace | boolean | true | Smart backspacing (only backspace to common string) | | shuffle | boolean | false | Shuffle the strings array | | fadeOut | boolean | false | Fade out animation | | fadeOutClass | string | 'typed-fade-out' | CSS class for fade out | | fadeOutDelay | number | 500 | Fade out delay |

TypedCode Component

| Property | Type | Default | Description | |----------|------|---------|-------------| | code | string[] | ['console.log("Hello World!");'] | Array of code strings to type | | language | string | undefined | Language for syntax highlighting | | typeSpeed | number | 50 | Typing speed | | backSpeed | number | 30 | Backspacing speed | | backDelay | number | 1500 | Delay before backspacing | | startDelay | number | 0 | Delay before typing starts | | loop | boolean | false | Whether to loop the animation | | showCursor | boolean | true | Whether to show the cursor | | cursorChar | string | '|' | Character to use for cursor | | smartBackspace | boolean | true | Smart backspacing |

TypedCodeBlock Component

| Property | Type | Default | Description | |----------|------|---------|-------------| | code | string | '' | Single code block to animate line by line | | language | string | undefined | Language for syntax highlighting | | typeSpeed | number | 50 | Typing speed | | startDelay | number | 0 | Delay before typing starts | | showCursor | boolean | true | Whether to show the cursor | | cursorChar | string | '|' | Character to use for cursor |

Supported Languages

The TypedCode component supports syntax highlighting for:

• javascript / js
• typescript / ts
• python
• css
• html
• json
• bash
• And more...

Callback Functions

Both components support various callback functions:

<Typed 
  :strings="['Hello']"
  :onStringTyped="() => console.log('String typed!')"
  :onComplete="() => console.log('Animation complete!')"
  :onStart="() => console.log('Animation started!')"
/>

Available callbacks:

• preStringTyped
• onStringTyped
• onLastStringBackspaced
• onTypingPaused
• onTypingResumed
• onReset
• onStop
• onStart
• onDestroy
• onComplete (TypedCode only)

Advanced Examples

Progressive Code Building with Code Fences

// Step 1: Create the function
function calculateSum(a, b) {
  // Step 2: Add the numbers
  return a + b;
}

Progressive Code Building with Components

<TypedCodeBlock 
  :code="`// Step 1: Create the function
function calculateSum(a, b) {
  // Step 2: Add the numbers
  return a + b;
}`"
  language="javascript"
  :type-speed="30"
  :start-delay="1000"
/>

Multi-language Demo

<div class="grid grid-cols-2 gap-4">
  <TypedCode 
    :code="['print(\"Hello Python!\")']"
    language="python"
    :type-speed="50"
  />
  <TypedCode 
    :code="['console.log(\"Hello JavaScript!\");']"
    language="javascript"
    :type-speed="50"
  />
</div>

Custom Styled Text

<Typed 
  :strings="['🚀 Launch your presentation!', '✨ With amazing animations!']"
  :type-speed="60"
  :loop="true"
  class="text-4xl font-bold text-gradient"
/>

Styling

Default Styles

The addon comes with sensible defaults:

• Code blocks use a dark VS Code-like theme
• Monospace font family for code
• Responsive design
• Proper cursor animations

Custom Styling

You can override the default styles:

<style>
.typed-code-container {
  background: #2d3748;
  border-radius: 12px;
  border: 1px solid #4a5568;
}

.typed-text {
  font-family: 'Custom Font', monospace;
  color: #your-color;
}
</style>

Methods

Both components expose methods for programmatic control:

<template>
  <div>
    <TypedCodeBlock ref="typedRef" :code="'console.log(\"Hello\");'" language="javascript" />
    <button @click="startTyping">Start</button>
    <button @click="stopTyping">Stop</button>
    <button @click="resetTyping">Reset</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const typedRef = ref()

const startTyping = () => typedRef.value.start()
const stopTyping = () => typedRef.value.stop()
const resetTyping = () => typedRef.value.reset()
</script>

Available methods:

• start() - Start the typing animation
• stop() - Stop the typing animation
• toggle() - Toggle between start/stop
• reset() - Reset the animation
• destroy() - Destroy the instance

How It Works

The addon uses a Slidev transformer that automatically converts {type-lines} code fences into <TypedCodeBlock> components during the build process. This provides a clean, natural syntax that integrates seamlessly with your Slidev presentations.

The transformer processes your markdown and replaces:

// Your code here

With:

<TypedCodeBlock 
  :code="// Your code here" 
  language="javascript" 
  :type-speed="40" 
  :start-delay="500" 
/>

Examples

Check out the example.md file for a complete demonstration of the addon's capabilities.

To run the example:

npm run dev

Troubleshooting

Cursor appearing below text

If you notice the cursor appearing below the typed text, this is usually a CSS line-height issue. The addon includes CSS fixes, but if you're still experiencing issues, you can add this CSS to your slides:

.typed-cursor {
  vertical-align: baseline !important;
  display: inline-block !important;
}

Quote parsing errors in Vue templates

When using quotes in your code strings, make sure to properly escape them:

<!-- ❌ This will cause parsing errors -->
<TypedCode :code="['console.log("Hello");']" />

<!-- ✅ Use HTML entities or template literals -->
<TypedCode :code="['console.log(&quot;Hello&quot;);']" />
<TypedCode :code="[`console.log('Hello');`]" />

Component not found

Make sure you've added the addon to your Slidev configuration:

---
addons:
  - typed
---

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE.md for details.

Credits

• Built with Typed.js by Matt Boldt
• Designed for Slidev by Anthony Fu
• Inspired by the slidev-addon-tldraw structure