microcharts is a specialized library of tiny, handcrafted SVG charts designed specifically for React applications. Created by Ganapati V S, the library provides a collection of 106 chart types that are engineered to fit within constrained interface elements like table cells, sentence text, KPI cards, and streamed AI chat responses. By focusing on word-sized visualizations, the library avoids the bulkiness of full-featured charting engines while providing clear, glanceable data insights.

The library is built with an 'AI-native' philosophy, ensuring that its grammar is predictable and easy for LLMs to generate during text streams. Each chart is designed to render correctly from raw data, and every component includes automatic, human-readable accessibility summaries generated directly from that data. This approach ensures that charts are not just visual markers, but accessible instruments that convey meaning even without visual access. The library maintains zero runtime dependencies, ensuring that it remains lightweight and suitable for high-performance applications. It is fully compatible with React Server Components, offering static, hook-free SVG rendering for maximum efficiency.

Some of the key features are:

• Word-sized design: Over 100 chart types optimized for small-scale layouts and inline placement.
• Zero dependencies: Ships as pure SVG with no reliance on external charting engines or D3.
• RSC-safe: Static charts render to plain HTML without client JavaScript, perfect for server-side environments.
• AI-native grammar: Predictable, data-driven syntax that allows AI models to generate valid chart components mid-reply.
• Built-in accessibility: Each chart automatically functions as an accessible image with a natural-language description based on the underlying data.
• Uniform API: A single grammar applied across all 106 chart types, making it easy for developers and models to switch between chart styles.
• Interactive subpaths: Optional client-side interactivity is available via specific /interactive imports, keeping static bundles minimal.
• Customizable theming: A robust theming system allows charts to derive accessible palettes from a single brand color.

The library is used by importing specific chart components from their own subpaths, which minimizes bundle sizes by ensuring only necessary code is shipped to the browser. Static entries are designed to be used in Server Components for zero-JS rendering, while interactive entries provide advanced features like hover effects, keyboard navigation, touch support, and live-region announcements. These interactive components are fully compatible with React hooks and client-side rendering requirements.

Some common use cases include:

• Table-cell trends: Displaying a small sparkline or bar chart inside a list of products to show performance trends.
• AI Chat interfaces: Emitting valid, rendered charts directly into a LLM's streamed response to summarize data in a human-readable format.
• KPI cards: Showing progress or status dots on dashboards where space is at a premium.
• Print-ready reports: Embedding inline charts within documents or articles, similar to typography, where standard charts would disrupt the layout.
• Service health monitoring: Using small glyphs or strips to represent system stability in a dense navigation header or sidebar.