{"id":14959538,"url":"https://github.com/streamlit/mintaka","last_synced_at":"2026-01-30T22:42:36.931Z","repository":{"id":195605551,"uuid":"681731677","full_name":"streamlit/mintaka","owner":"streamlit","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-15T03:43:37.000Z","size":2043,"stargazers_count":20,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T17:54:57.930Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/streamlit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-22T16:27:20.000Z","updated_at":"2025-04-19T22:13:16.000Z","dependencies_parsed_at":"2024-03-15T04:49:22.016Z","dependency_job_id":null,"html_url":"https://github.com/streamlit/mintaka","commit_stats":{"total_commits":138,"total_committers":2,"mean_commits":69.0,"dds":"0.036231884057971064","last_synced_commit":"211762a436ef5ac7905f483f76c3183c91d37149"},"previous_names":["streamlit/deneb","streamlit/mintaka"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/streamlit/mintaka","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlit%2Fmintaka","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlit%2Fmintaka/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlit%2Fmintaka/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlit%2Fmintaka/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamlit","download_url":"https://codeload.github.com/streamlit/mintaka/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamlit%2Fmintaka/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28921707,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T22:32:35.345Z","status":"ssl_error","status_checked_at":"2026-01-30T22:32:31.927Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T13:19:56.525Z","updated_at":"2026-01-30T22:42:36.907Z","avatar_url":"https://github.com/streamlit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://github.com/streamlit/mintaka/assets/103002884/6d6e762d-c428-4110-a5d6-7bd1717ba44b\" width=\"100px\"\u003e\n\n# Mintaka\n\n**Mintaka is an open-source chart builder library for Vega-Lite written in React.**\n\nWhat makes it special is that it's ultra-configurable:\n\n* Mintaka uses your React components. All labels, selectboxes, etc, that it draws are provided _by you._\n* You choose which Vega-Lite properties to expose to the user, and which are TMI.\n* You can specify smart chart presets, so users don't need to know anything about Vega-Lite to get\nstarted.\n* And much more! See below for more.\n\n👉 [Live demo](https://streamlit.github.io/mintaka/)\n\n\n## How to use it in your project\n\n1. Install Mintaka:\n\n   ```sh\n   npm install mintaka\n   ```\n\n1. Import the `Mintaka` component:\n\n   ```js\n   import { Mintaka } from \"mintaka\"\n   import { Vega } from \"react-vega\"\n   ```\n\n1. Insert the `\u003cMintaka\u003e` component somewhere in your React project:\n\n   ```jsx\n   const [ generatedSpec, setGeneratedSpec ] = useState(null)\n\n   return (\n     ...\n\n     \u003cMintaka\n         columnTypes={columnTypes}  // \u003c-- Tell us what your data looks like \n         setGeneratedSpec={setGeneratedSpec}\n         initialSpec={null}  // \u003c-- Pass an initial VL spec for us to load into the builder\n         ui={{\n           MintakaContainer: MyContainer,  // \u003c-- Bring your own UI components\n           ChannelContainer: MyChannelContainer,\n           GenericPickerWidget: MyGenericPickerWidget,\n           ...\n         }}\n         config={{\n           ...  // \u003c-- Which VL properties to show, how to group them, etc.\n                //     This has a pretty rich structure, and it's still in motion,\n                //     so I'm leaving it out of this spec for the time being! \n         }}\n         presets={{\n           \"Pie chart\": {...},  // Specify presets.\n           ...\n         }}\n       /\u003e\n\n     \u003cVega data={myDataGoesHere} spec={generatedSpec} /\u003e  // \u003c-- Just pass the spec into VegaLite\n\n     ...\n   )\n   ```\n\n\n## More info\n\n- **The builder doesn’t draw the chart itself.** It just outputs a VL spec, and which you draw by passing into your own Vega-Lite component. Or you can use one I provide. Up to you!\n\n    This allows you pass whatever settings you’d like to your VL component. Streamlit, for example, does some magic in order to support fast `.add_rows()`. This component doesn’t interfere with that.\n\n\n- **The builder doesn’t actually need to access your data.** It only needs to know which columns it has, and what kinds of columns they are, via the `columnTypes` parameter. **This allows it to work with *any* data format**\n\n    For example: Streamlit can continue to use Arrow, Snowsight can continue to use… whatever it uses today (it doesn’t matter what it is!)\n\n\n- **The `\u003cMintaka\u003e` component doesn’t actually draw a single HTML element onscreen,** like divs, buttons, etc. Instead, it tells React to use the UI components provided via the `ui` prop. This means:\n    - You can make it **use your own widget library**\n\n        For example: The Mintaka component could use Streamlit widgets when inside Streamlit, and Snowsight widgets when inside Worksheets.\n\n    - You can **customize it** *quite a bit!*\n\n        For example: you could make the `mark` selectbox show little icons next to each mark, with a nice explanation below them. Or you could make the `color -\u003e value` input use an actual color picker.\n\n\n- **There’s a very powerful `config` parameter in there,** which allows you to do a few things:\n    - Specify **how much of VL you’d like to expose** to users.\n\n        For example: Don’t want to show the `aggregate` option? You can just omit it from the `config` object!\n\n\n- **For complete noobs, you can specify presets** via a `presets` prop.\n\n    For example: add a “Pie chart” preset that automatically builds a VL spec for a pie chart based on your data.\n\n    - Here’s how this pie chart preset can be specified\n\n        ```jsx\n        presets={{\n          \"Pie chart\": {\n            mark: {  // Add this to the VL spec\n              type: \"arc\",\n              tooltip: true,\n            },\n            findColumns: {  // Search for matching columns, and name them A1, B1, etc.\n              A1: { type: [\"quantitative\"] },\n              B1: { type: [\"nominal\", \"ordinal\"], maxUnique: 20 },\n              A2: {},\n              B2: {},\n            },\n            ifColumn: {\n              A1: {  // If A1 was found, add this to the VL spec\n                encoding: {\n                  theta: { field: \"A1\", aggregate: \"sum\" },\n                }\n              },\n              B1: {  // If B1 was found, add this\n                encoding: {\n                  color: { field: \"B1\", bin: null },\n                }\n              },\n              A2: {   // etc.\n                encoding: {\n                  theta: { field: \"A2\", aggregate: \"count\" },\n                }\n              },\n              B2: {\n                encoding: {\n                  color: { field: \"B2\", bin: true },\n                }\n              },\n            },\n          },\n        }}\n        ```\n\n\n_Proper documentation_ is coming soon! In the meantime, check out [the demo code](https://github.com/streamlit/mintaka/blob/main/demo/src/Demo1.jsx)\nfor a full-featured example of how to use Mintaka. I also find the [TypeScript type defs](https://github.com/streamlit/mintaka/tree/main/package/src/types)\nvery useful in lieu of docs.\n\n\n## UI Structure\n\nBelow are the custom containers you should pass into `\u003cMintaka\u003e`'s `ui` prop, and how they\nget structured in the DOM:\n\n* `\u003cMintakaContainer\u003e`\n  * `\u003cTopUtilBlock\u003e`\n\n    This is a utility component. It's a place for you to add whatever your want.\n\n    In particular, it's a good place to add a pagination widget for changing the editor's current\n    \"mode\":\n    * modes: Record\u003cstring, any\u003e\n    * currentMode: any\n    * setMode: (any) =\u003e void\n\n    ...and it's also a good place to add a reset button:\n    * reset: () =\u003e void\n\n  * `\u003cPresetsContainer\u003e` _(if exists in current viewMode)_\n    * title: \"Chart type\"\n    * statePath: [\"preset\"]\n    * groupName: null\n    * viewMode: null\n    * customState: any\n    * setCustomState: (any) =\u003e void\n\n    * `\u003cGenericPickerWidget\u003e`\n\n  * `\u003cLayerBuilder\u003e`\n\n    * `\u003cMarkContainer\u003e` _(if exists in current viewMode)_\n      * title: \"Mark\"\n      * statePath: [\"mark\"]\n      * groupName: null\n      * viewMode: string\n      * customState: any\n      * setCustomState: (any) =\u003e void\n\n      * `\u003cGenericPickerWidget\u003e` x N\n        * statePath: [\"mark\", propertyName]\n        * groupName: string\n        * widgetHint: string\n        * label: string\n        * value: any\n        * setValue: (any) =\u003e void\n        * items: Record\u003cstring, any\u003e\n        * customState: any\n        * setCustomState: (any) =\u003e void\n\n    * `\u003cEncodingContainer\u003e` _(if exists in current viewMode)_\n      * title: \"Encoding\"\n      * statePath: [\"encoding\"]\n      * groupName: null\n      * viewMode: string\n      * customState: any\n      * setCustomState: (any) =\u003e void\n\n      * `\u003cChannelContainer\u003e` x N _(if exists in current viewMode)_\n        * title: \"Encoding\"\n        * statePath: [\"encoding\", channelName]\n        * groupName: null\n        * viewMode: string\n        * customState: any\n        * setCustomState: (any) =\u003e void\n\n        * `\u003cGenericPickerWidget\u003e` x N\n          * statePath: [\"encoding\", channelName, propertyName]\n          * groupName: string\n          * widgetHint: string\n          * label: string\n          * value: any\n          * setValue: (any) =\u003e void\n          * items: Record\u003cstring, any\u003e\n          * customState: any\n          * setCustomState: (any) =\u003e void\n\n  * `\u003cBottomUtilBlock\u003e`\n\n    This is another util component. Its props are identical to the TopUtilContainer, so you can\n    choose where you want your mode picker and reset button to live.\n\n    * modes: Record\u003cstring, any\u003e\n    * currentMode: any\n    * setMode: (any) =\u003e void\n    * reset: () =\u003e void\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamlit%2Fmintaka","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamlit%2Fmintaka","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamlit%2Fmintaka/lists"}