{"id":26059979,"url":"https://github.com/atomicptr/attr2json","last_synced_at":"2026-04-14T06:33:33.359Z","repository":{"id":279384719,"uuid":"936743622","full_name":"atomicptr/attr2json","owner":"atomicptr","description":"An utility library for extracting JSON data from HTML attributes.","archived":false,"fork":false,"pushed_at":"2025-02-21T17:39:05.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-19T20:42:27.943Z","etag":null,"topics":["html","html-attributes","htmx","javascript-library","json"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomicptr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"github":"atomicptr","buy_me_a_coffee":"atomicptr"}},"created_at":"2025-02-21T15:59:18.000Z","updated_at":"2025-02-21T17:41:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"2d5cc94a-3657-466b-8970-e39a221d8e71","html_url":"https://github.com/atomicptr/attr2json","commit_stats":null,"previous_names":["atomicptr/attr2json"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/atomicptr/attr2json","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicptr%2Fattr2json","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicptr%2Fattr2json/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicptr%2Fattr2json/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicptr%2Fattr2json/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicptr","download_url":"https://codeload.github.com/atomicptr/attr2json/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicptr%2Fattr2json/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31785677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: 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":["html","html-attributes","htmx","javascript-library","json"],"created_at":"2025-03-08T13:48:49.486Z","updated_at":"2026-04-14T06:33:33.343Z","avatar_url":"https://github.com/atomicptr.png","language":"TypeScript","funding_links":["https://github.com/sponsors/atomicptr","https://buymeacoffee.com/atomicptr"],"categories":[],"sub_categories":[],"readme":"# attr2json\n\nAn utility library for extracting JSON data from HTML attributes.\n\n## Motivation\n\nWhen using setups where you are mostly rendering static HTML pages on the server, you often want to pass some sort of data to your JavaScript,\nwhich is often either done via an API endpoint or somehow dumping JSON into the DOM. Both of these approaches are quite cumbersome which is what\nthis library tries to solve:\n\nLets see this example where we'll create a solution to render [chart.js](https://www.chartjs.org/) charts using HTML attributes:\n\n```html\n\u003c!-- this site is using daisyui --\u003e\n\u003cdiv class=\"card bg-base-200 my-4\"\u003e\n    \u003cdiv class=\"card-body\"\u003e\n        \u003ch2 class=\"card-title\"\u003e\n            Pie Chart\n        \u003c/h2\u003e\n\n        \u003ccanvas\n            chartjs \u003c!-- this is used as a marker to init the thing later you could use something else though like an id --\u003e\n            chartjs:type=\"pie\"\n            chartjs:data.labels[0]=\"40%\"\n            chartjs:data.labels[1]=\"60%\"\n            chartjs:data.datasets[0].data[0]=\"40\"\n            chartjs:data.datasets[0].backgroundColor[0]=\"red\"\n            chartjs:data.datasets[0].data[1]=\"60\"\n            chartjs:data.datasets[0].backgroundColor[1]=\"blue\"\n        \u003e\u003c/canvas\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- this is the JS we use to initialize chartjs --\u003e\n\u003cscript type=\"module\"\u003e\n    import { Chart } from \"chart.js\";\n    import extractJson from \"attr2json\";\n\n    // for every element that has the marker we defined here \"chartjs\"\n    document.querySelectorAll(\"[chartjs]\").forEach(elem =\u003e {\n        const data = extractJson(elem, \"chartjs\");\n\n        /*\n         * Representation of what \"data\" is right now:\n         *\n         * {\n         *     type: \"pie\",\n         *     data: {\n         *         labels: [\"40%\", \"60%\"],\n         *         datasets: [{\n         *             data: [40, 60],\n         *             backgroundColor: [\"red\", \"blue\"],\n         *         }\n         *     }\n         * }\n         */\n\n        // init chart.js\n        new Chart(elem, data);\n    });\n\u003c/script\u003e\n```\n\n## Syntax\n\nThe syntax of attr2json parse syntax contains always a prefix, a colon, a path and a value\n\nfor example\n\n```html\n\u003cdiv prefix:path=\"value\"\u003e\u003c/div\u003e\n````\n\nthis is equivalent with\n\n```json\n{\n    \"path\": \"value\"\n}\n```\n\nThe prefix can generally be whatever you want it to be just make sure its unique and doesn't collide with other things.\n\nThe **path** however is a bit special, here are a few example on how it might be parsed:\n\n- prefix:path -\u003e key is path\n- prefix:very.nested.path -\u003e This will create a JSON object like this: ``{ very: nested: path: ... }``\n- prefix:numbers[3] -\u003e This will create an array, the index gets used to determine the order of the element inside the array, e.g. prefix:numbers[3]=\"5\" will create [5] and not [undefined, undefined, 5]\n- prefix:start-at-zero -\u003e since it's common to use camel case in JS names and HTML attributes are case insensitive, we parse kebab case into camel case e.g. prefix:start-at-zero becomes startAtZero\n\nThe **value** also has some special parsing rules:\n\n- if it can be parsed as a number it will be e.g. \"1337\" becomes 1337, \"13.37\" becomes 13.37\n- if it is \"true\" or \"false\" (or \"TRUE\", \"FALSE\") it will be parsed as a boolean\n- if none of the above rules match it will be a string\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicptr%2Fattr2json","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicptr%2Fattr2json","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicptr%2Fattr2json/lists"}