Quick Start

What is T8

T8 is a text visualization solution under the AntV technology stack, where T stands for Text, and 8 represents a byte of 8 bits, implying that this tool can deeply analyze insights beneath the text.

Currently, it mainly focuses on a specific area: Insight-based narrative text display and editing capabilities.

"Why should I use T8 instead of directly concatenating DOM?"

The answer lies in T8's declarative syntax - the core feature that sets it apart.

T8 syntax is a lightweight, markdown-based DSL (Domain Specific Language) designed specifically for narrative text visualization. Instead of manually constructing DOM elements or maintaining complex templates, you write simple, human-readable syntax that describes your data narrative. This syntax can be easily generated by LLMs (Large Language Models), making it ideal for AI-powered analytics and automated reporting.

As data expression requirements grow more diverse and immediate, maintaining text templates on the frontend becomes unsustainable. T8's syntax-first approach provides a better solution for dynamic, AI-generated content.

If your business has simple, fixed templates with limited extensibility needs, traditional DOM manipulation may suffice. However, T8's syntax brings significant advantages:

LLM-Friendly: The syntax is intuitive and can be easily generated by AI models with simple prompts;
Declarative & Readable: Write what you want, not how to build it - the syntax is self-documenting;
Standardized Styling: Professional, consistent appearance by default without manual styling;
Built-in Data Visualizations: Word-scale charts (mini pie, mini line) are native to the syntax;
Framework Agnostic: Works seamlessly with React, Vue, or vanilla JavaScript;
Extensible: Easily add custom entity phrases to match your design system;

Usage Scenarios

In the full process of data analysis display, besides visualization charts, describing data phenomena and providing insight conclusions through text to assist analysis is also very important.

Especially with the development of augmented analytics, the data text descriptions directly output with the help of NLP (Natural Language Processing) need a rendering engine to present them in the user interface. Narrative-text related technical solutions are aimed at solving this scenario.

Features

T8 Syntax: A declarative markdown-based DSL for data narrative text (T8 syntax reference);
Pure JS Rendering Engine Text: Converts T8 syntax into beautiful, interactive HTML;
- Parses T8 syntax structure into semantic HTML elements;
- Standard visual representation of data phrases (metric values, ratios, deltas, proportions, contribution rates, etc.);
- Data-driven inline charts (mini pie, mini line) to improve text reading efficiency;

Basic Usage

T8 can be installed using regular package management tools such as npm or Yarn.

bash

$ npm install @antv/t8

bash

$ yarn add @antv/t8

After installation, you can export the Text object and API from the T8 library.

html

<div id="container"></div>

import { Text } from '@antv/t8';

// Narrative text using T8-DSL syntax
const narrativeText = `
# Sales Report

This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).

[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
`;

// Instantiate Text
const text = new Text(document.getElementById('app'));

// Render with T8 syntax string
text.theme('dark').render(narrativeText);

// Unmount
const unmount = text.render(narrativeText);
unmount();

If you haven't encountered any other issues, you should get the following clear data text visualization effect.

You can also use the T8-DSL syntax for a more intuitive way to create narrative text:

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Using in HTML (via CDN)

T8 can be used directly in HTML pages via unpkg CDN. This is the easiest way to get started without any build tools:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>T8 Example</title>
</head>
<body>
  <div id="container"></div>

  <!-- Import T8 from unpkg CDN -->
  <script src="https://unpkg.com/@antv/t8@0.3.0/dist/t8.min.js"></script>
  
  <script>
    // T8 is available as a global variable
    const { Text } = window.T8;

    // Initialize T8 instance
    const text = new Text(document.getElementById('container'));

    // Render narrative text
    const narrativeText = `
# Sales Report

This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).

[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
    `;

    text.theme('light').render(narrativeText);
  </script>
</body>
</html>

You can also use the latest version by omitting the version number:

html

<script src="https://unpkg.com/@antv/t8/dist/t8.min.js"></script>

Using in React

T8 is framework-agnostic and works seamlessly with React. Here's how to integrate it:

tsx

import { Text } from '@antv/t8';
import { useEffect, useRef } from 'react';

function T8Component() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Initialize T8 instance
    const text = new Text(containerRef.current);

    // Render narrative text
    const narrativeText = `
# Sales Report

This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).

[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
    `;

    text.theme('light').render(narrativeText);

    // Cleanup on unmount
    return () => {
      text.unmount();
    };
  }, []);

  return <div ref={containerRef} />;
}

export default T8Component;

Using in Vue

T8 also works great with Vue. Here's a Vue 3 example:

vue

<template>
  <div ref="containerRef"></div>
</template>

<script setup lang="ts">
import { Text } from '@antv/t8';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const containerRef = ref<HTMLDivElement>();
let textInstance: Text | null = null;

onMounted(() => {
  if (!containerRef.value) return;

  // Initialize T8 instance
  textInstance = new Text(containerRef.value);

  // Render narrative text
  const narrativeText = `
# Sales Report

This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).

[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
  `;

  textInstance.theme('light').render(narrativeText);
});

onBeforeUnmount(() => {
  if (textInstance) {
    textInstance.unmount();
  }
});
</script>

For Vue 2, you can use the Options API:

vue

<template>
  <div ref="container"></div>
</template>

<script>
import { Text } from '@antv/t8';

export default {
  name: 'T8Component',
  data() {
    return {
      textInstance: null,
    };
  },
  mounted() {
    // Initialize T8 instance
    this.textInstance = new Text(this.$refs.container);

    // Render narrative text
    const narrativeText = `
# Sales Report

This quarter, [bookings](metric_name) are higher than usual. They are [¥348k](metric_value, origin=348.12).

[Bookings](metric_name) are up [¥180.3k](delta_value, assessment="positive") relative to the same time last quarter.
    `;

    this.textInstance.theme('light').render(narrativeText);
  },
  beforeDestroy() {
    if (this.textInstance) {
      this.textInstance.unmount();
    }
  },
};
</script>

Quick Start ​

What is T8 ​

Usage Scenarios ​

Features ​

Basic Usage ​

Using in HTML (via CDN) ​

Using in React ​

Using in Vue ​

Quick Start

What is T8

Usage Scenarios

Features

Basic Usage

Using in HTML (via CDN)

Using in React

Using in Vue