[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93994":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":9,"totalLinesOfCode":9,"stars":12,"forks":13,"watchers":14,"openIssues":14,"contributorsCount":9,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":14,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":15,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":16,"hasPages":16,"topics":9,"createdAt":9,"pushedAt":9,"updatedAt":18,"readmeContent":19,"aiSummary":9,"trendingCount":14,"starSnapshotCount":14,"syncStatus":20,"lastSyncTime":9,"discoverSource":21},93994,"flint-chart","microsoft\u002Fflint-chart","microsoft","🪄 Flint is a visualization language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs.",null,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart","TypeScript",2369,130,0,55.35,false,"main","2026-07-30 04:02:14","\u003Ch1>\u003Cimg src=\"assets\u002Fflint-logo.svg\" alt=\"\" width=\"42\" align=\"absmiddle\"> Flint: A Visualization Language for the AI Era\u003C\u002Fh1>\n\n[![npm: flint-chart](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fflint-chart.svg?label=npm%3A%20flint-chart)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fflint-chart)\n[![npm: flint-chart-mcp](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fflint-chart-mcp.svg?label=npm%3A%20flint-chart-mcp)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fflint-chart-mcp)\n[![arXiv: 2607.20775](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FarXiv-2607.20775-b31b1b.svg)](https:\u002F\u002Farxiv.org\u002Fabs\u002F2607.20775)\n[![CI](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\u002Factions\u002Fworkflows\u002Fci.yml)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](LICENSE)\n\n**Please visit:** [**Flint Project Site**](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F) | [**MCP Server Guide**](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F#\u002Fmcp) | [**中文主页**](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F#\u002Fzh)\n\nFlint is a visualization intermediate language that lets **AI agents create\nexpressive, polished visualizations from simple, human-editable chart specs**.\nInstead of asking agents or developers to tune verbose chart configuration\ndetails such as scales, axes, spacing, labels, and layout, the Flint compiler\nderives optimized chart settings from the data, semantic types, chart type, and\nencodings. The result is a compact chart specification that agents can produce\nreliably, people can edit directly, and multiple backends can render as native\n[Vega-Lite](https:\u002F\u002Fvega.github.io\u002Fvega-lite\u002F),\n[ECharts](https:\u002F\u002Fecharts.apache.org\u002F),\n[Chart.js](https:\u002F\u002Fwww.chartjs.org\u002F), or\n[Plotly](https:\u002F\u002Fplotly.com\u002Fjavascript\u002F) specs, and native Excel charts through Office.js.\n\nThis repo contains two main components:\n\n- **`flint-chart`**: a JavaScript\u002FTypeScript library that compiles the same\n  Flint input into Vega-Lite, ECharts, Chart.js, Plotly, or Excel-native output.\n- **`flint-chart-mcp`**: an MCP server that lets agents create, validate, and\n  render charts directly from a chat or coding environment.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Ffigs\u002Fchartwall.png\" alt=\"A wall of charts produced by Flint across its supported visualization backends.\" width=\"100%\">\n\u003C\u002Fp>\n\n## Features\n\n\n- **Semantic chart specs.** Flint captures what each field means using 70+\n  semantic types such as `Rank`, `Temperature`, `Price`, or `Country`.\n- **Automatic layout.** Flint adapts sizing, spacing, labels, marks, and legends\n  to the data cardinality, chart design, and canvas constraints.\n- **Multiple backends.** Compile one input to backend-native output across\n  [Vega-Lite](https:\u002F\u002Fvega.github.io\u002Fvega-lite\u002F),\n  [ECharts](https:\u002F\u002Fecharts.apache.org\u002F),\n  [Chart.js](https:\u002F\u002Fwww.chartjs.org\u002F),\n  [Plotly](https:\u002F\u002Fplotly.com\u002Fjavascript\u002F), and native Excel charts.\n- **Agent-ready chart authoring.** The MCP server gives agents Flint tools and\n  chart guidance so they can choose a template, validate it, and open an\n  interactive chart view in MCP-capable clients.\n\n## Updates\n\n- **July 24, 2026** — Flint 0.4.0 adds 38 Plotly chart types and 18 native,\n  editable Excel chart templates. ([v0.4.0](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\u002Freleases\u002Ftag\u002F0.4.0))\n- **July 19, 2026** — Flint 0.3.0 adds dynamic chart widgets that switch chart\n  types and edit chart properties in place. ([v0.3.0](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\u002Freleases\u002Ftag\u002F0.3.0))\n- **July 15, 2026** — Flint 0.2.2 added compact dodge modes and grouped violin\n  layouts.\n- **July 13, 2026** — Flint 0.2.1 improved chart-property validation and backend\n  consistency. ([v0.2.1](https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\u002Freleases\u002Ftag\u002F0.2.1))\n\nSee the [changelog](CHANGELOG.md) for complete release notes.\n\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Ffigs\u002Fcompile-demo.png\" alt=\"Flint compiling a compact chart spec into a Vega-Lite spec and rendered heatmap visualization.\" width=\"100%\">\n  \u003Cbr>\n  \u003Csub>Flint turns compact chart specs into backend-native specs and rendered visualizations.\u003C\u002Fsub>\n\u003C\u002Fp>\n\n## Install\n\n```bash\n# Use Flint in your JavaScript\u002FTypeScript codebase\nnpm install flint-chart\n\n# For agents and MCP clients\nnpx -y flint-chart-mcp\n```\n\n\u003Cp>\u003Csub>\u003Cspan style=\"color: #6a737d;\">Python package: to be released. The current Python port is a source-only preview in this repo.\u003C\u002Fspan>\u003C\u002Fsub>\u003C\u002Fp>\n\n## Use Flint As A Library\n\nEvery backend accepts the same `ChartAssemblyInput` and returns the target\nlibrary's native spec object.\n\n```ts\nimport { assembleVegaLite } from 'flint-chart';\n\nconst spec = assembleVegaLite({\n  data: { values: myData },\n  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },\n  chart_spec: {\n    chartType: 'Scatter Plot',\n    encodings: { x: { field: 'weight' }, y: { field: 'mpg' }, color: { field: 'origin' } },\n    baseSize: { width: 400, height: 300 },\n  },\n});\n\u002F\u002F → a ready-to-render Vega-Lite spec\n```\n\nSwap the backend without changing the input shape:\n\n```ts\nimport { assembleECharts, assembleChartjs, assemblePlotly, assembleExcel } from 'flint-chart';\n\nconst echartsOption = assembleECharts(input);\nconst chartjsConfig = assembleChartjs(input);\nconst plotlyFigure = assemblePlotly(input);\nconst excelArtifact = assembleExcel(input);\n```\n\nSee the [API reference](docs\u002Fapi-reference.md), backend references for\n[Vega-Lite](docs\u002Freference-vegalite.md), [ECharts](docs\u002Freference-echarts.md),\n[Chart.js](docs\u002Freference-chartjs.md), [Plotly](docs\u002Freference-plotly.md), and\n[Excel](docs\u002Freference-excel.md), plus the\n[live editor](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F#\u002Feditor) for more library examples.\n\n## Use Flint As An MCP Server\n\nInstall `flint-chart-mcp` as a [Model Context Protocol](https:\u002F\u002Fmodelcontextprotocol.io\u002F)\nserver when you want an agent to create charts in the same conversation where\nthe question starts. It can open an interactive chart view, return static\nPNG\u002FSVG output, or produce backend-native chart specs.\n\nFor setup, start with the\n[Flint MCP project page](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F#\u002Fmcp). It\nincludes client configuration, usage examples, and links to deeper references.\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"docs\u002Ffigs\u002Fflint-mcp-experience.png\" alt=\"Agent chat showing Flint Chart as an MCP App with a grouped bar chart preview and chart options.\" width=\"100%\">\n\u003C\u002Fp>\n\nMCP calls let agents embed rows directly as `data.values`, or read local JSON,\nCSV, or TSV files by `data.url`. For agent workflows without MCP,\nuse the standalone [agent skill](agent-skills\u002Fflint-chart-author\u002FSKILL.md).\n\n## Repository overview\n\n```\nflint-chart\u002F\n├── packages\u002F\n│   ├── flint-js\u002F          npm package `flint-chart` (TypeScript)\n│   │   └── src\u002F\n│   │       ├── core\u002F      semantics, layout, decisions, shared types\n│   │       ├── vegalite\u002F  Vega-Lite backend\n│   │       ├── echarts\u002F   ECharts backend\n│   │       ├── chartjs\u002F   Chart.js backend\n│   │       └── test-data\u002F fixtures + generators (drive tests and the gallery)\n│   ├── flint-py\u002F          Python port preview (package to be released)\n│   └── flint-mcp\u002F         npm package `flint-chart-mcp` (MCP render server)\n├── site\u002F                  Vite + React demo: landing, gallery, editor, docs\n├── agent-skills\u002F          fallback copy of the MCP-served agent skill\n├── shared\u002Ftest-data\u002F      JSON fixtures shared across JS + Python\n└── docs\u002F                  architecture and design documents\n```\n\n### Documentation\n\nThe [project site](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F) is the main entry\npoint for examples, the live editor, and concept docs. For source-level\nreferences, start with the [API reference](docs\u002Fapi-reference.md), the\n[Flint MCP project page](https:\u002F\u002Fmicrosoft.github.io\u002Fflint-chart\u002F#\u002Fmcp), or the\n[Development guide](docs\u002FDEVELOPMENT.md). See the [changelog](CHANGELOG.md) for\nnotable changes in each release.\n\n---\n\n## Contributing\n\nContributions are welcome! See [.github\u002FCONTRIBUTING.md](.github\u002FCONTRIBUTING.md)\nand the [Development guide](docs\u002FDEVELOPMENT.md).\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fflint-chart\ncd flint-chart\nnpm install            # root workspaces: packages\u002Fflint-js + flint-mcp + site\n\nnpm run typecheck      # typecheck packages\u002Fflint-js + packages\u002Fflint-mcp\nnpm run test           # Vitest (packages\u002Fflint-js + packages\u002Fflint-mcp)\nnpm run build          # build packages\u002Fflint-js + packages\u002Fflint-mcp\nnpm run site           # demo site (gallery + editor) at http:\u002F\u002Flocalhost:5274\u002F\n```\n\nNode 18+ is required. The demo site aliases `flint-chart` to\n`packages\u002Fflint-js\u002Fsrc`, so library edits hot-reload in the gallery and editor\nwithout rebuilding `dist\u002F`.\n\nWe especially welcome contributions that add new\n[chart templates](docs\u002Fadding-a-chart-template.md) or new\n[rendering backends](docs\u002Fadding-a-backend.md).\n\nThis project has adopted the\n[Microsoft Open Source Code of Conduct](.github\u002FCODE_OF_CONDUCT.md). See\n[SECURITY.md](.github\u002FSECURITY.md) to report vulnerabilities.\n\n## Contributor\n\nFlint is built by [Microsoft Research](https:\u002F\u002Fwww.microsoft.com\u002Fen-us\u002Fresearch\u002F)\nin collaboration with the [IDEAS Lab](https:\u002F\u002Fideas-lab.net\u002F), Renmin University\nof China. We welcome you to join us — see [Contributing](#contributing) to get involved.\n\nA research paper describing Flint is coming soon.\n\n## Trademarks\n\nThis project may contain trademarks or logos for projects, products, or services.\nAuthorized use of Microsoft trademarks or logos is subject to and must follow\n[Microsoft's Trademark & Brand Guidelines](https:\u002F\u002Fwww.microsoft.com\u002Fen-us\u002Flegal\u002Fintellectualproperty\u002Ftrademarks\u002Fusage\u002Fgeneral).\nUse of Microsoft trademarks or logos in modified versions of this project must not\ncause confusion or imply Microsoft sponsorship. Any use of third-party trademarks\nor logos is subject to those third parties' policies.\n\n## License\n\n[MIT](LICENSE) © Microsoft Corporation\n",2,"trending"]