{"id":50748993,"url":"https://github.com/c-cube/hx-plot","last_synced_at":"2026-06-10T23:32:07.886Z","repository":{"id":349254896,"uuid":"1193030712","full_name":"c-cube/hx-plot","owner":"c-cube","description":"htmx extensions for plotting with vega-lite","archived":false,"fork":false,"pushed_at":"2026-04-05T00:39:52.000Z","size":434,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-01T04:25:13.615Z","etag":null,"topics":["extension","html","plot","vega-lite"],"latest_commit_sha":null,"homepage":"https://c-cube.github.io/hx-plot/","language":"JavaScript","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/c-cube.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-26T20:00:36.000Z","updated_at":"2026-04-05T00:38:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/c-cube/hx-plot","commit_stats":null,"previous_names":["c-cube/hx-plot"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/c-cube/hx-plot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-cube%2Fhx-plot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-cube%2Fhx-plot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-cube%2Fhx-plot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-cube%2Fhx-plot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c-cube","download_url":"https://codeload.github.com/c-cube/hx-plot/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-cube%2Fhx-plot/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34175887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["extension","html","plot","vega-lite"],"created_at":"2026-06-10T23:32:04.223Z","updated_at":"2026-06-10T23:32:07.881Z","avatar_url":"https://github.com/c-cube.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hx-plot\n\n**hx-plot** is an [htmx](https://htmx.org) extension that renders [Vega-Lite](https://vega.github.io/vega-lite/) charts directly from JSON — inline on the page or fetched from a server endpoint. Add `hx-ext=\"plot\"` to any element and point it at a JSON spec; htmx handles the rest.\n\n\u003e **[Live playground →](https://c-cube.github.io/hx-plot/)** · [GitHub](https://github.com/c-cube/hx-plot)\n\nTwo builds are available:\n\n| File | Size | How it loads Vega |\n|------|------|-------------------|\n| `hx-plot.min.js` | ~2.5 KiB | Lazy CDN import on first use |\n| `hx-plot.full.min.js` | ~750 kiB | Fully self-contained |\n\n## Usage\n\n```html\n\u003cscript src=\"https://unpkg.com/htmx.org@2\"\u003e\u003c/script\u003e\n\n\u003c!-- slim: loads vega + vega-lite from jsDelivr at runtime --\u003e\n\u003cscript src=\"hx-plot.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- or: fully bundled, no CDN dependency --\u003e\n\u003cscript src=\"hx-plot.full.min.js\"\u003e\u003c/script\u003e\n```\n\n### Inline JSON\n\nRead a Vega-Lite spec from a `\u003cscript type=\"application/json\"\u003e` element. Renders once on load.\n\n```html\n\u003cscript id=\"cfg\" type=\"application/json\"\u003e\n{\n  \"mark\": \"point\",\n  \"data\": {\"values\": [{\"x\": 1, \"y\": 2}, {\"x\": 2, \"y\": 4}]},\n  \"encoding\": {\n    \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n    \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}\n  }\n}\n\u003c/script\u003e\n\n\u003cdiv hx-ext=\"plot\" hx-plot=\"#cfg\" hx-target=\"#chart\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n```\n\n### Fetch from URL\n\nFetch a Vega-Lite spec as JSON from a server endpoint. Supports all htmx trigger and swap options.\n\n```html\n\u003cdiv hx-ext=\"plot\" hx-get=\"/api/chart\" hx-trigger=\"load\" hx-target=\"#chart\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n```\n\n### Error handling\n\nUpon error, a `ht-plot:error` event is emitted, and a message is printed\non the console.\n\n### Live updates with view transitions\n\n```html\n\u003cdiv hx-ext=\"plot\"\n     hx-get=\"/api/chart\"\n     hx-trigger=\"every 2s\"\n     hx-target=\"#chart\"\n     hx-swap=\"innerHTML transition:true\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\" style=\"view-transition-name: my-chart\"\u003e\u003c/div\u003e\n```\n\n## JSON format\n\nThe JSON must be a valid [Vega-Lite spec](https://vega.github.io/vega-lite/docs/). It is passed directly to `vegaLite.compile()` then rendered with Vega.\n\n```json\n{\n  \"mark\": \"line\",\n  \"data\": {\"values\": [{\"x\": 0, \"y\": 0}, {\"x\": 1, \"y\": 1}]},\n  \"encoding\": {\n    \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n    \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}\n  }\n}\n```\n\nLayered charts, facets, and all other Vega-Lite features work as-is.\n\n## Attributes\n\n| Attribute | Description |\n|-----------|-------------|\n| `hx-ext=\"plot\"` | Activates the extension on an element |\n| `hx-plot=\"#selector\"` | Render from inline JSON element (renders on page load) |\n| `hx-get=\"/url\"` | Fetch JSON from URL (respects `hx-trigger`) |\n| `hx-target=\"#id\"` | Where to render the chart (defaults to the element itself) |\n| `hx-trigger=\"...\"` | Standard htmx trigger — `load`, `every 2s`, `click`, etc. |\n| `hx-swap=\"innerHTML transition:true\"` | Enable View Transitions API on swap |\n| `hx-swap-on-error` | On error, replace the chart container with a `\u003cdiv class=\"hx-plot-error\"\u003e` |\n\n## Events\n\n| Event | Fired on | Detail |\n|-------|----------|--------|\n| `hx-plot:render-start` | container | `{ spec }` |\n| `hx-plot:render-done` | container | `{ spec }` |\n| `hx-plot:error` | container (or `document`) | `{ error, spec? }` |\n\nAll events bubble. Listen on a parent element to catch errors from multiple charts.\n\n## Full examples\n\n### Inline JSON\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/htmx.org@2\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/hx-plot/dist/hx-plot.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cscript id=\"spec\" type=\"application/json\"\u003e\n{\n  \"mark\": \"point\",\n  \"data\": {\"values\": [{\"x\": 1, \"y\": 2}, {\"x\": 2, \"y\": 4}, {\"x\": 3, \"y\": 1}]},\n  \"encoding\": {\n    \"x\": {\"field\": \"x\", \"type\": \"quantitative\"},\n    \"y\": {\"field\": \"y\", \"type\": \"quantitative\"}\n  }\n}\n\u003c/script\u003e\n\n\u003cdiv hx-ext=\"plot\" hx-plot=\"#spec\" hx-target=\"#chart\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Fetch from URL (e.g. on page load)\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/htmx.org@2\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/hx-plot/dist/hx-plot.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cdiv hx-ext=\"plot\"\n     hx-get=\"/api/chart\"\n     hx-trigger=\"load\"\n     hx-target=\"#chart\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Live updates every 2 seconds with view transitions\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://unpkg.com/htmx.org@2\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/hx-plot/dist/hx-plot.min.js\"\u003e\u003c/script\u003e\n  \u003cstyle\u003e\n    #chart { view-transition-name: my-chart; }\n    ::view-transition-old(my-chart),\n    ::view-transition-new(my-chart) { animation-duration: 0.3s; }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cdiv hx-ext=\"plot\"\n     hx-get=\"/api/chart\"\n     hx-trigger=\"load, every 2s\"\n     hx-target=\"#chart\"\n     hx-swap=\"innerHTML transition:true\"\u003e\u003c/div\u003e\n\u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Error handling\n\n```html\n\u003cdiv id=\"charts\"\u003e\n  \u003cdiv hx-ext=\"plot\" hx-get=\"/api/chart\" hx-trigger=\"load\" hx-target=\"#chart\"\u003e\u003c/div\u003e\n  \u003cdiv id=\"chart\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n  document.getElementById('charts').addEventListener('hx-plot:error', e =\u003e {\n    console.error('chart failed:', e.detail.error);\n  });\n\u003c/script\u003e\n```\n\n## Building\n\n```sh\nmake install   # pnpm install\nmake           # build dist/hx-plot.min.js and dist/hx-plot.full.min.js\nmake serve     # start dev server at http://localhost:8000/demo/demo.html\nmake update    # upgrade vega + vega-lite and rebuild\nmake lint      # biome lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-cube%2Fhx-plot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc-cube%2Fhx-plot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-cube%2Fhx-plot/lists"}