Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@antv/t8) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
English | 简体中文
🧬 T8: Narrative Text Visualization
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.
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 - a brief overview and T8's motivations.
- Example - a live demo to learn from and copy-paste with ai.
- Tutorials - interactive case-driven guides of T8's core concepts.
✨ 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
AIwith prompt. - 🛠️ Extensible - Register custom
EntityPhraseto easily customize the T8's ui elements. - 🪩 Lightweight - Few dependencies, small footprint, before gzip it was less than
20Kb.
🔨 Getting Started
T8 is usually installed via a package manager such as npm or Yarn.
$ npm install @antv/t8$ yarn add @antv/t8The Text object then can be imported from T8.
<div id="container"></div>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!
📮 Contributing
This project exists thanks to all the people who contribute. And thank you to all our backers! 🙏
- Issues - report bugs or request features
- Discussions - discuss on GitHub
📄 License
MIT@AntV.