Typewriter Component ✍

📌 Warning

XMarkdown Component has been released and can be used in combination with the Typewriter Component. Please upgrade to version beta 1.2.2.

💌 Info

v1.2.0 version provides simple solutions for style override, chart rendering, and custom code highlighting styles, custom plugins

1. We've added the official prismjs CSS style file to the component library, which can be directly imported in projects to solve md code block highlighting issues.

2. We've added Mermaid.js to the component library. Used to solve simple chart rendering issues with mermaid format.

3. We've exposed the code highlighting methods and plugins built into markdown-it. Making it easier for developers to better integrate third-party ecosystem styles and plugins

🐵 This friendly reminder update time: 2025-07-06

Introduction

Typewriter is a highly customizable typewriter component, inspired by the ant-design-x official bubble component case, extracting the typing method. Supports Markdown rendering and dynamic typing effects.

Code Examples

Basic Usage

Basic

Basic usage.

<template>
  <ClientOnly>
    <Typewriter content="content attribute sets typewriter content" />
  </ClientOnly>
</template>

Markdown Rendering

Support Markdown Content Rendering

Control whether to enable Markdown rendering mode through the isMarkdown attribute.

<script setup lang="ts">
const markdownText = ref(
  `#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\``
);
</script>

<template>
  <ClientOnly>
    <Typewriter :content="markdownText" :is-markdown="true" />
  </ClientOnly>
</template>

MD-Code Block Highlighting (v1.2.0 New)

Provides a built-in style

Built-in Prism Style Files

// Import different theme styles for Prism syntax highlighting (based on style files provided by vue-element-plus-x plugin)
// Each file corresponds to an independent code highlighting theme style, which can be selected and enabled according to project requirements

// 1. Coy theme (simple light style, suitable for daily reading)
import 'vue-element-plus-x/styles/prism-coy.min.css'

// 2. Dark theme (dark background theme, suitable for night mode or low-light environments)
import 'vue-element-plus-x/styles/prism-dark.min.css'

// 3. Funky theme (vibrant color style, strong contrast in code syntax highlighting)
import 'vue-element-plus-x/styles/prism-funky.min.css'

// 4. Okaidia theme (dark high-contrast theme, focuses on code structure distinction)
import 'vue-element-plus-x/styles/prism-okaidia.min.css'

// 5. Solarized Light theme (soft light theme, based on Solarized color scheme)
import 'vue-element-plus-x/styles/prism-solarizedlight.min.css'

// 6. Tomorrow theme (modern minimalist style, suitable for wide screens and large fonts)
import 'vue-element-plus-x/styles/prism-tomorrow.min.css'

// 7. Twilight theme (twilight color theme, balanced style between light and dark)
import 'vue-element-plus-x/styles/prism-twilight.min.css'

// 8. Prism core base styles (must be imported, contains basic styles and structure for syntax highlighting)
import 'vue-element-plus-x/styles/prism.min.css'

/* Usage Instructions:
1. prism.min.css is the core style of Prism, containing basic code block layout and common styles, must be retained
2. Other files starting with prism- are different theme styles, which can be selected and imported according to project visual design
3. If multiple themes are imported simultaneously, later imported styles will override earlier ones (can dynamically switch themes by switching class names)
4. Theme names correspond to Prism official preset themes (such as Coy, Okaidia, etc.), style details can refer to Prism theme documentation
*/

<script setup lang="ts">
import { ref } from 'vue';
// import Typewriter from 'vue-element-plus-x/src/components/Typewriter/index.vue';
// import { usePrism } from 'vue-element-plus-x/src/hooks/usePrism.js'
// import AppConfig from 'vue-element-plus-x/src/components/AppConfig/index.vue'
// Here you can import Prism core styles, or import other third-party theme styles yourself
// import 'vue-element-plus-x/styles/prism.min.css';

const markdownText = ref(
  `#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`js \n console.log('Hello, world!'); \n \`\`\``
);
</script>

<template>
  <ClientOnly>
    <div>
      <Typewriter :content="markdownText" :is-markdown="true" />
    </div>
  </ClientOnly>
</template>

MD-Plugin Mode (v1.2.0 New)

If you think the built-in styles don't look good or the built-in plugins can't meet your needs, you can customize styles and plugins through plugin mode.

Built-in markdown-it-mermaid Plugin Renders Simple Charts

You can also find custom plugins in the markdown-it community to implement more custom functionality. Through the md-plugins attribute, pass in a markdown-it plugin array to use custom plugins in markdown-it. Through the highlight function, pass in Prism's highlighting function, or other highlighting libraries, to use Prism's highlighting functionality in markdown-it.

For detailed Mermaid format, see: Mermaid.js

<script setup lang="ts">
import markdownItMermaid from '@jsonlee_12138/markdown-it-mermaid';
import { ref } from 'vue';

// This is a code highlighting library Prismjs built into the component library, a custom hooks example. (For integration reference only) Code address: https://github.com/HeJiaYue520/Element-Plus-X/blob/main/packages/components/src/hooks/usePrism.ts
import { usePrism } from 'vue-element-plus-x';
// Here you can import Prism core styles, or import other third-party theme styles yourself
// import 'vue-element-plus-x/styles/prism.min.css';
import 'prismjs/themes/prism.min.css';

const mdPlugins = [markdownItMermaid({ delay: 100, forceLegacyMathML: true })];
const highlight = usePrism();

const markdownText =
  ref(`#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` \n \`\`\`mermaid
 pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
 \n
\`\`\`

\`\`\`mermaid
 xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

 \n
\`\`\`
`);
</script>

<template>
  <ClientOnly>
    <div>
      <Typewriter
        :content="markdownText"
        :is-markdown="true"
        :md-plugins="mdPlugins"
        :highlight="highlight"
      />
    </div>
  </ClientOnly>
</template>

Enable Typing Effect

Support Enable/Disable Typing Mode

Control whether to enable typing rendering mode through the typing attribute. typing can also be an object, setting the step property to control how many characters to type each time, the interval property to control typing interval, and the suffix property to control the suffix added during typing.

📌 Warning

The suffix attribute can only be set to a string, and it becomes ineffective when isMarkdown is true, because the suffix will be affected by markdown rendering and will always be displayed on a new line, which also occurs in ant-design-x. So we temporarily decided not to display the suffix when isMarkdown is true, to make the typewriter as beautiful as possible.

<script setup lang="ts">
onMounted(() => {
  setContents('text');
  setContents('markdown');
});

const isTyping = ref(true);
const content = ref('');
const content1 = ref('');
const markdownText = ref('');

function setContents(type: string) {
  if (type === 'text') {
    content.value = '';
    content1.value = '';
    setTimeout(() => {
      content.value = 'typing attribute enables typing effect';
      content1.value =
        'typing attribute can also be an object to control how many characters to type each time, typing interval, and typewriter suffix';
    }, 800);
  }
  else if (type === 'markdown') {
    markdownText.value = '';
    setTimeout(() => {
      markdownText.value = ` ### 🐒 Combining is-markdown and typing \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\` `;
    }, 800);
  }
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 8px">
      <div>
        <el-button style="width: fit-content" @click="setContents('text')">
          Reset Text
        </el-button>
        <el-button
          style="width: fit-content"
          type="primary"
          @click="setContents('markdown')"
        >
          Reset Markdown
        </el-button>
      </div>
      <div style="display: flex; gap: 8px; flex-direction: column">
        <Typewriter :content="content" :typing="isTyping" />
        <Typewriter
          :content="content1"
          :typing="{ step: 2, interval: 100, suffix: '💩' }"
        />
        <Typewriter
          :content="markdownText"
          :typing="isTyping"
          :is-markdown="true"
        />
      </div>
    </div>
  </ClientOnly>
</template>

Typewriter Fog Effect

Support Fog Effect

Control whether to enable fog effect through the isFog attribute. Note that this attribute only takes effect when isTyping is true. It will override the default typing suffix attribute.

<script setup lang="ts">
const content = ref(
  `#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\``
);

function setContent(type: number) {
  content.value = '';
  setTimeout(() => {
    content.value =
      type === 1
        ? `#### Title \n This is a Markdown example.\n - List item 1 \n - List item 2 **bold text** and *italic text* \n \`\`\`javascript \n console.log('Hello, world!'); \n \`\`\``
        : 'Welcome to Element-Plus-X 💖'.repeat(10);
  }, 800);
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <div style="display: flex; gap: 10px">
        <el-button @click="setContent(1)">
          Fog Markdown
        </el-button>
        <el-button @click="setContent(2)">
          Fog Text
        </el-button>
      </div>

      <Typewriter :content="content" :is-markdown="true" is-fog typing />
    </div>
  </ClientOnly>
</template>

Dynamic Content Updates

🐵 Support Dynamic Content Updates

🐒 When using the typing attribute, updating content will continue output if it's a subset of the previous content, otherwise it will restart output.

<script setup lang="ts">
const content = ref(
  '🥰 Thank you for using Element-Plus-X! Your support is our strongest motivation for open source ~ '
);
const num = ref(1);
function setContents() {
  num.value++;
  content.value = content.value.repeat(num.value);
  if (num.value > 3) {
    num.value = 1;
    content.value =
      '🥰 Thank you for using Element-Plus-X! Your support is our strongest motivation for open source ~ ';
  }
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 10px">
      <el-button style="width: fit-content" @click="setContents">
        Set Content
      </el-button>
      <Typewriter typing :content="content" />
    </div>
  </ClientOnly>
</template>

Control Typing

🐵 Support Component Control Play, Interrupt/Continue, Destroy. Support Component State Monitoring

💩 Better control over interrupting output, continuing typing, and destroying operations You can get the following methods and properties through the component's ref instance:

• interrupt Interrupt typing process typerRef.interrupt()
• continue Continue unfinished typing typerRef.continue()
• restart Restart typing typerRef.restart()
• destroy Destroy component (clean up resources) typerRef.destroy()
• renderedContent Get current rendered content. typerRef.renderedContent.value
• isTyping Get whether currently typing. typerRef.isTyping.value
• progress Get current progress percentage. typerRef.progress.value

💡 Tip

You can also set component monitoring events to get component state.

• @start Triggered when typing starts
• @finish Triggered when typing ends
• @writing Triggered during typing

Three methods, default parameter returns component instance.

<script setup lang="ts">
import type { TypewriterInstance } from 'vue-element-plus-x/types/typewriter';
import {
  Delete,
  RefreshLeft,
  VideoPause,
  VideoPlay
} from '@element-plus/icons-vue';

const markdownContent = ref(
  `# 🔥 Typewriter Instance Methods-Events \n 😄 Make your typewriter highly customizable.\n - More convenient control of typewriter state \n - List item **bold text** and *italic text* \n \`\`\`javascript \n // 🙉 Console can view related typing logs\n console.log('Hello, world!'); \n \`\`\``
);

const isTypingValue = ref(false);
const progressValue = ref(0);
const typerRef = ref();
// Start typing monitoring method
function onStart(instance: TypewriterInstance) {
  console.log('Start typing: component ref instance', unref(instance));
  isTypingValue.value = true;
}
// During typing, progress monitoring method
function onWriting(instance: TypewriterInstance) {
  const progress: number = instance.progress.value;
  // Avoid printing multiple onWriting events 😂
  if (progress > 90 && progress < 100) {
    // Can directly get typing progress, can set more cool styles based on typing progress
    // console.log('Writing', `${progress}%`)
    console.log(
      'Typing isTyping:',
      instance.isTyping.value,
      'progress:',
      progress
    );
  }

  if (~~progress === 80) {
    console.log(
      'Typing content when progress is 80%',
      instance.renderedContent.value
    );
  }
  isTypingValue.value = true;
  progressValue.value = ~~progress; // Use operator ~~ to round down 💩
}
// Monitor typing end event
function onFinish(instance: TypewriterInstance) {
  isTypingValue.value = false;
  console.log(
    'Typing finished isTyping',
    instance.isTyping.value,
    'progress:',
    instance.progress.value
  );
}
// Component instance method, control pause typing
function onInterrupt() {
  typerRef.value.interrupt();
  isTypingValue.value = false;
}
function onDestroy() {
  typerRef.value.destroy();
  isTypingValue.value = false;
  progressValue.value = 0;
}
</script>

<template>
  <ClientOnly>
    <div style="display: flex; flex-direction: column; gap: 12px">
      <div style="display: flex">
        <el-button
          v-if="isTypingValue"
          type="warning"
          style="width: fit-content"
          @click="onInterrupt"
        >
          <el-icon :size="18">
            <VideoPause />
          </el-icon>
          <span>Pause</span>
        </el-button>
        <el-button
          v-if="!isTypingValue && progressValue !== 0 && progressValue !== 100"
          type="success"
          style="width: fit-content"
          @click="typerRef?.continue()"
        >
          <el-icon :size="18">
            <VideoPlay />
          </el-icon>
          <span>Continue</span>
        </el-button>
        <el-button
          v-if="
            !isTypingValue && (progressValue === 0 || progressValue === 100)
          "
          type="primary"
          style="width: fit-content"
          @click="typerRef?.restart()"
        >
          <el-icon :size="18">
            <RefreshLeft />
          </el-icon>
          <span>Replay</span>
        </el-button>
        <el-button type="danger" style="width: fit-content" @click="onDestroy">
          <el-icon><Delete /></el-icon>
          <span>Destroy</span>
        </el-button>
      </div>

      <el-progress
        v-if="progressValue > 0 && progressValue !== 100"
        :duration="0"
        :percentage="progressValue"
      />
      <el-progress
        v-if="progressValue === 100"
        :percentage="100"
        status="success"
      />

      <!-- This shows that if it's markdown, typing.suffix will be ignored -->
      <Typewriter
        ref="typerRef"
        :content="markdownContent"
        :typing="{ suffix: '💩', interval: 40 }"
        :is-markdown="true"
        @start="onStart"
        @writing="onWriting"
        @finish="onFinish"
      />
    </div>
  </ClientOnly>
</template>

Attributes

Attribute	Type	Required	Default	Description
content	String	No	''	Text content to display, supports plain text or Markdown format.
isMarkdown	Boolean	No	false	Whether to enable Markdown rendering mode.
typing	Boolean | { step?: number, interval?: number, suffix?: string }	No	false	Whether to enable typewriter effect.
typing.step	Number	No	2	How many characters to type each time.
typing.interval	Number	No	50	Interval time for each typing, unit (ms).
typing.suffix	String	No	'|'	Typewriter suffix cursor character (only effective in non-Markdown mode).
isFog	Boolean | { bgColor?: string, width?: string }	No	false	Whether to enable fog effect, can set background color and width.

Events

Event Name	Parameters	Type	Description
@start	ref instance	Function	Triggered when typing effect starts
@finish	ref instance	Function	Triggered when typing effect completes
@writing	ref instance	Function	Continuously triggered during typing effect

Ref Instance Methods

Property Name	Type	Description
interrupt	Function	Interrupt typing.
continue	Function	Continue unfinished typing.
restart	Function	Restart typing.
destroy	Function	Actively destroy typewriter component.
renderedContent	String	Get the rendered content of the typewriter component.
isTyping	Boolean	Whether currently typing.
progress	Number	Typing progress, range 0 - 100.

Features

1. Markdown Support: Supports rendering Markdown format text and applies GitHub-style styling.
2. Dynamic Typing Effect: Can simulate typewriter effect, gradually displaying text content.
3. Code Highlighting: Built-in Prism.js, supports syntax highlighting for code blocks.
4. XSS Security: Uses DOMPurify to filter HTML content, preventing XSS attacks.
5. Flexible Configuration: Supports custom typing speed, cursor character, suffix, and other parameters.
6. Customizable Development: Supports customized development based on component typing state.