@antv/t8/README.md

T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative JSON Schema 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)
[![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"></video>

</div>

`T8` is a declarative JSON Schema syntax that can be used to describe the content of data interpretation reports. Technically, based on the assumption that the JSON Schema data is generated by the server, the frontend simply consumes the Schema 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.

- [Introduction](https://t8.antv.vision/tutorial/quick-start.html) - a brief overview and T8's motivations.
- [T8's Schema](https://t8.antv.vision/schema/) - the JSON Schema and description for T8.
- [API](https://t8.antv.vision/api/) - interactive case-driven guides of T8's core concepts, and how to use them.
- [Example]() - a live agent for using T8 with ai.

## ✨ Features

- 🛫 **Technology stack agnostic** - Can be used into `React`, `Vue`, and other frontend stack.
- 🤖 **LLM friendly** - The T8's schema 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.

## 🔨 Getting Started

T8 is usually installed via a package manager such as npm or Yarn.

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

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

The `Text` object then can be imported from T8.

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

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

// A text json schema to be visualized.
const schema = {
  /*  */
};

// Instantiate a new Text.
const text = new Text({
  container: 'container',
});

// Specify schema visualization.
text.schema(schema).theme('light');

// Render visualization.
const unmont = text.render();

// Destroy.
unmont();
```

If all goes well, you can get the following narrative text visualization!

<img alt="T8 examples light" width="768" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GDPUToCi8ncAAAAATrAAAAgAemJ7AQ/fmt.webp" />

## 📮 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).