AntV Infographic is an open source framework that turns plain text into a live, editable infographic inside a web app. Instead of waiting for an AI model to finish a whole response and then drawing a chart, it renders progressively: as text chunks arrive, the infographic updates on screen. That makes it a natural fit for AI features where users watch an answer take visual shape in real time.
Watch the 30-second repo signal
Key Takeaways
AntV Infographic renders infographics from a text syntax, so an AI model can generate visuals by generating text.
Its fault-tolerant parser renders progressively, which makes streaming AI output feel live instead of delayed.
It ships with about 200 built-in templates, an SVG renderer, themes, and a built-in visual editor.
It is framework-agnostic at its core, with wrappers for React, Vue, and even Plotly Dash.
The project comes from Alibaba's AntV visualization team, is licensed under MIT, and has 7,070 stars on GitHub as of November 5, 2026.
The Problem It Solves
AI models are good at producing text, and much worse at producing finished graphics. Ask a model for an infographic and you usually get one of two disappointing results: a static image you cannot edit, or a pile of chart code you have to wire up yourself. Both break the flow of an app that wants to show, not just tell.
AntV Infographic takes a third path. The AI writes a compact, indentation-based text syntax describing the infographic: its layout, data items, shapes, icons, and connectors. The framework parses that text and renders it as SVG in the browser. Because the syntax is text, it plays to exactly what language models do well. Because the output is SVG, it stays crisp at any size and remains editable afterward.
How Streaming Actually Works
The streaming story is refreshingly simple, and it is worth describing precisely. Infographic itself does not claim to be a streaming transport. Your app receives AI output chunks however you already stream them, for example over server-sent events or a websocket from your own backend. On each chunk, you append the text to a buffer and call render again with the whole buffer so far.
That pattern works because the syntax parser is fault-tolerant. A half-finished infographic description still parses as far as it can, so the visible graphic grows and corrects itself as more text arrives, instead of failing on incomplete input or waiting for the final token. The official README demonstrates exactly this loop: accumulate chunks in a buffer, then render the buffer on every update.
Getting started is one package install and a few lines of code. Run npm install @antv/infographic from your terminal.
You create an instance pointed at a container element, then render a syntax string into it. From there, the same render call handles both the first draw and every streaming update.
What You Get Out of the Box
The headline number is the template library: about 200 built-in infographic templates, data-item components, and layouts, covering common shapes such as lists, timelines, comparisons, processes, and arrows. Picking a template means the AI does not have to invent a layout from scratch. It fills in a proven structure, which keeps output consistent and reduces broken generations.
Rendering defaults to SVG, which matters for two practical reasons. First, the graphic scales without losing quality, so the same infographic looks sharp on a phone screen and a presentation slide. Second, SVG output can be opened and refined in design tools such as Figma or Illustrator, so a generated graphic is a starting point, not a dead end.
Around that core sit three features that make it feel complete rather than experimental. A theme system offers styles including hand-drawn looks, gradients, and patterns. A built-in editor lets users fine-tune a generated infographic visually after the AI has done its part. And agent skills for Claude Code and Codex help coding agents generate valid syntax in the first place.
The design philosophy behind it is stated plainly in the official docs: simplicity over complexity, clarity over showmanship, and professional plus beautiful. A typical composition is roughly 60 percent graphics and 40 percent text, built from titles, descriptions, data items, shapes, icons, and connectors such as arrows and lines.
AntV Infographic at a Glance
Aspect | Detail |
|---|---|
License | MIT |
Language | TypeScript |
GitHub stars | 7,070, as of November 5, 2026 |
GitHub forks | 564, as of November 5, 2026 |
Templates | About 200 built-in templates, components, and layouts |
Output | SVG by default |
Streaming | Progressive rendering from an accumulating text buffer |
Editor | Built-in visual editor for post-generation edits |
Frameworks | Core is framework-agnostic, plus React, Vue, and Dash integrations |
Where It Fits in a Frontend Stack
The core mounts into a DOM container, so it does not lock you into one framework. The ecosystem around it covers the usual suspects: infographic-for-react for React apps and markstream-vue for Vue 3 apps that stream markdown. The same syntax even shows up outside JavaScript frontends, through feffery-infographic, a Plotly Dash component that lets Python developers render AntV infographics with the same text syntax.
For day-to-day development, there is also editor support. A VS Code extension adds syntax highlighting and a live markdown preview for infographic code blocks, plus a sidebar visual editor with export, so you can iterate on a template without leaving your editor. The official site at infographic.antv.vision gathers the docs, a template gallery, and a live editor for trying syntax before committing to it.
This is also a good example of what open source means in practice: a visualization toolkit from a team with a long track record in charts and graphics, published under MIT, so anyone can inspect it, use it, and build on it.
Who Should Try It
AntV Infographic fits teams adding visual answers to AI products: chatbots that explain a process, dashboards that summarize a report, learning apps that turn a lesson into a diagram, or internal tools that turn a wall of text into something a reader can grasp at a glance. If your AI already streams text, adding a live infographic is a small step from there.
It is less suited to jobs that need pixel-perfect print design or a bespoke illustration. The template system trades some freedom for reliability, and that trade is the point: consistent, editable, good-looking graphics generated on the fly, not one-off artwork.
Try this first: open the live editor on the official site, pick a template close to what you need, and watch how little syntax it takes to describe it. Then imagine that syntax coming from your AI feature, one streaming chunk at a time. That is the whole idea, and it is surprisingly easy to picture once you see it move.
FAQ
Is AntV Infographic free to use?
Yes. It is open source under the MIT license, so you can use it in personal and commercial projects.
Does it work with React and Vue?
Yes. The core is framework-agnostic and mounts into a DOM container, and there are dedicated wrappers for React and Vue.
Can it render AI output before the model finishes?
Yes, that is its signature feature. Append each incoming chunk to a buffer and re-render the buffer, and the fault-tolerant parser draws whatever valid syntax it can parse so far.
Is the output editable after generation?
Yes. Output renders as SVG by default, and the built-in visual editor lets users adjust a generated infographic without regenerating it.
Where does the project come from?
It comes from the AntV visualization team, the same group behind well-known open source visualization libraries, and its repository lives under the antvis organization on GitHub.