@antv/t8/README.md

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.

<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.zh-CN.md)

<h1 align="center">
<b>🧬 T8: Narrative Text Visualization</b>
</h1>

<div align="center">

`T8` is a text visualization solution for unstructured data within the AntV technology stack, where `T` stands for Text, and `8` represents a byte of 8 bits, symbolizing that it can deeply uncover insights hidden beneath the text.

![gzip size](https://img.badgesize.io/https://unpkg.com/@antv/t8/dist/t8.min?compression=gzip)
[![Build Status](https://github.com/antvis/t8/actions/workflows/build.yml/badge.svg)](https://github.com/antvis/T8/actions/workflows/build.yml)
[![codecov](https://codecov.io/gh/antvis/T8/graph/badge.svg?token=A8fR9pUkbc)](https://codecov.io/gh/antvis/T8)
[![npm Version](https://img.shields.io/npm/v/@antv/t8.svg)](https://www.npmjs.com/package/@antv/t8)
[![npm License](https://img.shields.io/npm/l/@antv/t8.svg)](https://www.npmjs.com/package/@antv/t8)

<video src="https://github.com/user-attachments/assets/ecf953a9-efd1-4c72-9d12-d84316004b88" />
</div>

`T8` is a declarative markdown `syntax` that can be used to describe the content of data interpretation reports. Technically, based on the assumption that the markdown `syntax` is generated by the server, the frontend simply consumes the syntax for rendering. As the demand for diversity and immediacy in data representation grows, along with the increasing application of AI and NLP technologies, maintaining text templates on the frontend will become unsustainable. In this context, using T8 for unified rendering will be the optimal choice.

## 📚 Documentation

- **[Quick Start](https://t8.antv.vision/tutorial/quick-start.html)** - Get started with T8 in minutes with installation and basic usage examples
- **[Tutorial](https://t8.antv.vision/tutorial/quick-start)** - Learn about themes, events, plugins, streaming, and LLM integration
- **[Syntax](https://t8.antv.vision/syntax/)** - Complete T8 syntax reference and structure guide
- **[API Reference](https://t8.antv.vision/api/)** - Detailed API documentation and usage guides

## ✨ Features

- 🛫 **Technology stack agnostic** - Can be used into `React`, `Vue`, and other frontend stack.
- 🤖 **LLM friendly** - The T8's `syntax` is easy to be generated by `AI` with prompt.
- 🛠️ **Extensible** - Register custom `EntityPhrase` to easily customize the T8's ui elements.
- 🪩 **Lightweight** - Few dependencies, small footprint, before gzip it was less than `20` Kb.

## 🔨 Installation

Install T8 using npm or yarn:

```bash
npm install @antv/t8
```

```bash
yarn add @antv/t8
```

## 🚀 Quick Example

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

const text = new Text({ container: 'container' });
text.theme('light').render(`
  # Sales Report
  Total sales reached [¥1,234,567](metric_value, origin=1234567).
`);
```

For complete usage examples and advanced features, see the **[Quick Start Guide](https://t8.antv.vision/tutorial/quick-start.html)**.

## 🤖 Using with LLM

T8 is designed to be LLM-friendly. The T8 syntax can be easily generated by AI models, making it ideal for automated data narrative generation. To help you integrate T8 with AI agents:

- **[Prompt Templates](./prompt.md)** - Ready-to-use prompts for LLMs to generate T8 syntax
- **[LLM Integration Guide](https://t8.antv.vision/tutorial/advanced/llm.html)** - Complete guide for using T8 with large language models
- **[Examples](./example/example.md)** - Sample T8 syntax outputs

## 📮 Contributing

This project exists thanks to all the people who contribute. And thank you to all our backers! 🙏

- [Issues](https://github.com/antvis/t8/issues) - report bugs or request features
- [Discussions](https://github.com/antvis/t8/discussions) - discuss on GitHub

## 📄 License

MIT@[AntV](https://github.com/antvis).