{"id":22447352,"url":"https://github.com/marketingpipeline/json-tag","last_synced_at":"2025-08-01T21:32:34.219Z","repository":{"id":62982232,"uuid":"564060515","full_name":"MarketingPipeline/JSON-Tag","owner":"MarketingPipeline","description":"Render JSON data in HTML \u0026 LOTS more using a json tag","archived":false,"fork":false,"pushed_at":"2022-11-12T05:45:57.000Z","size":74,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T08:44:40.457Z","etag":null,"topics":["browser","client-side","custom-element","fetch-api","frontend","html","javascript","json","json-api","json-converter","json-data","json-parser","json-tag","json-template","json-templates","json-to-html","mustache","mustache-js","template-engine"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarketingPipeline.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}},"created_at":"2022-11-09T22:51:39.000Z","updated_at":"2024-02-07T22:51:56.000Z","dependencies_parsed_at":"2023-01-22T00:21:07.801Z","dependency_job_id":null,"html_url":"https://github.com/MarketingPipeline/JSON-Tag","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/MarketingPipeline/JSON-Tag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FJSON-Tag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FJSON-Tag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FJSON-Tag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FJSON-Tag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarketingPipeline","download_url":"https://codeload.github.com/MarketingPipeline/JSON-Tag/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarketingPipeline%2FJSON-Tag/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268297832,"owners_count":24228135,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"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":["browser","client-side","custom-element","fetch-api","frontend","html","javascript","json","json-api","json-converter","json-data","json-parser","json-tag","json-template","json-templates","json-to-html","mustache","mustache-js","template-engine"],"created_at":"2024-12-06T04:16:07.732Z","updated_at":"2025-08-01T21:32:33.887Z","avatar_url":"https://github.com/MarketingPipeline.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JSON-Tag\n \n\u003cp align=\"center\"\u003e\n  \u003cimg height=\"400\" alt=\"JSON Tag Repo Banner\" src=\"https://user-images.githubusercontent.com/86180097/201008829-13b55fa3-7016-4eeb-aa9b-3acc3e884e21.png\" /\u003e\n\u003c/p\u003e\n                                                                     \n\n\n   \u003cp align=\"center\"\u003e\n The easiest way to show JSON data in HTML \u0026 LOTS more!\n  \n  \u003cbr\u003e\n  \u003csmall\u003e \u003cb\u003e\u003ci\u003eShow your support!\u003c/i\u003e \u003c/b\u003e\u003c/small\u003e\n  \u003cbr\u003e\n   \u003ca href=\"https://github.com/MarketingPipeline/JSON-Tag\"\u003e\n    \u003cimg title=\"Star on GitHub\" src=\"https://img.shields.io/github/stars/MarketingPipeline/JSON-Tag.svg?style=social\u0026label=Star\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/MarketingPipeline/JSON-Tag/fork\"\u003e\n    \u003cimg title=\"Fork on GitHub\" src=\"https://img.shields.io/github/forks/MarketingPipeline/JSON-Tag.svg?style=social\u0026label=Fork\"\u003e\n  \u003c/a\u003e\n   \u003c/p\u003e  \n\n\n\n\u003cb\u003e\u003ci\u003eJSON Tag\u003c/b\u003e\u003c/i\u003e allows you to -\n- fetch \u0026 easily render JSON data from a API / URL\n- render JSON stored directly inside your HTML document\n- and **LOTS** more\n \nDirectly inside of a HTML document using a  ```\u003cjson\u003e``` tag - with no JavaScript experience needed.\n\n\n\n## Example and usage\n\n\n\nYou can view a demo of \u003cb\u003e\u003ci\u003eJSON Tag\u003c/b\u003e\u003c/i\u003e in use [here.](https://marketingpipeline.github.io/JSON-Tag/demo)\n\n\nHow to use \u003cb\u003e\u003ci\u003eJSON Tag\u003c/b\u003e\u003c/i\u003e:\n\nTo use JSON data locally - first you must define the data inside of a  \u003ccode\u003e\u003cscript\u003e\u003c/code\u003e tag or another JavaScript file that the DOM can access.  \n\n\nExample JSON data - \n\n```js\n\u003cscript\u003e\n   let YourJSONData = {\n  example: \"hello\",\n  example2: \"world\"\n}; \n\u003c/script\u003e\n```\n\nCreate a ```\u003cjson\u003e``` tag with the attribute ```local-json``` with your variable name of the JSON data - then you can access it like so using pure HTML. \n\n```html\n \u003cjson local-json=\"YourJSONData\"\u003e@{{example}} @{{example2}}.\u003c/json\u003e\n````\n\n\n\ninclude this [script](https://github.com/MarketingPipeline/JSON-Tag/blob/main/dist/json-tag.min.js) in your HTML document. \n         \n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/MarketingPipeline/JSON-Tag@v1.0.0/dist/json-tag.min.js\" type=\"module\"\u003e\u003c/script\u003e \n\n\n\u003cbr\u003e\n\nHow to fetch \u003cb\u003e\u003ci\u003eJSON data\u003c/b\u003e\u003c/i\u003e from a \u003cb\u003eAPI / URL\u003c/b\u003e:\n\nInstead of using a ```\u003cjson\u003e``` tag with the attribute ```local-json``` use ```fetch-json``` with a URL to JSON data.\n\nNote:  fetched JSON data will be returned inside of a nested JSON object called ```json```. \n\nExample of usage below! \n\n```html\n\u003cjson fetch-json=\"https://api.github.com/users/MarketingPipeline/repos\"\u003e Showing a repo from MarketingPipeline\u003cbr\u003e Repo title {{json.0.name}} \u003cb\u003eDescription\u003c/b\u003e {{json.0.description}} \u003cb\u003eStars\u003c/b\u003e: {{json.0.stargazers_count}} Repo URL \u003ca href=\"{{json.0.url}}\"\u003eClick to view!\u003c/a\u003e\u003cbr/\u003e\u003c/json\u003e  \n```\n\n\u003cbr\u003e\n\nHow to prevent \u003cb\u003eFlash of Unstyled Content\u003c/b\u003e:\n\n\u003cb\u003e\u003ci\u003eJSON Tag\u003c/i\u003e\u003c/b\u003e adds a \u003ccode\u003ejson-rendered\u003c/code\u003e attribute after the element(s) content(s) has been rendered to HTML. This allows you to style / hide unrendered content until it is rendered however you please (via JavaScript page loader, CSS or etc), here is a basic example of hiding un-rendered content using a \u003ccode\u003e:not()\u003c/code\u003e CSS selector.\n\n\u003e Note: by default, if an error occurs a \u003ccode\u003ejson-error\u003c/code\u003e attribute will be added to the element. \n\n```css\njson:not([json-rendered]) { display: none }\n```\n\n\n\u003cbr\u003e\n\n\nHow to customize \u003cb\u003eError Messages\u003c/b\u003e:\n\n\u003cb\u003e\u003ci\u003eJSON Tag\u003c/i\u003e\u003c/b\u003e by default will return any errors inside of the JSON tag. To customize / use your own error message. Simply use a ```error-message``` attribute like the following example below - \n\n```html\n\u003cjson error-message=\"Your Message Here!\"\u003e\u003c/json\u003e\n```\n\n\u003cbr\u003e\n\nHow to handle \u003cb\u003eErrors\u003c/b\u003e:\n\n\u003cb\u003e\u003ci\u003eJSON Tag\u003c/i\u003e\u003c/b\u003e adds a \u003ccode\u003ejson-error\u003c/code\u003e attribute if the element(s) content(s) has **NOT** been successfully rendered to HTML. This allows you to style / hide unrendered content however you please (via JavaScript, CSS or etc), here is a basic example of hiding un-rendered JSON content using a \u003ccode\u003e:has()\u003c/code\u003e CSS selector.\n\n```css\njson:has(json-error) {\n  display:none;\n}\n```\n\n## Using For Loops\n\n\u003cdetails\u003e\n\u003csummary\u003e\nHow to use a \u003cb\u003e\u003ci\u003efor loop\u003c/b\u003e\u003c/i\u003e with \u003cb\u003elocal JSON data\u003c/b\u003e:\n\u003c/summary\u003e\n\n\u003cbr\u003e\n\nTo use a for loop with local JSON data. Your JSON data must be inside of a nested object - example below.\n\n```js\nvar data = {\"list\" : [\n   {\n       \"email\": \"abc@example.com\",\n       \"name\": \"abc\",\n       \"date\": \"05/01/2015\"\n   },\n   {\n       \"email\": \"xyz@example.com\",\n       \"name\": \"xyz\",\n       \"date\": \"05/01/2015\"\n   }\n]};  \n\n```\n\n\n\n\nYou can then access it via object key name like the example below - \n\n```html\n\u003cjson local-json=\"data\"\u003e{{#list}} Your name is {{name}} and email is {{email}} \u003cbr/\u003e{{/list}}\n```\n\n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\nHow to use a \u003cb\u003e\u003ci\u003efor loop\u003c/b\u003e\u003c/i\u003e with \u003cb\u003efetched JSON data\u003c/b\u003e:\n\u003c/summary\u003e\n\u003cbr\u003e\n\nNote:  fetched JSON data will be returned inside of a nested JSON object called ```json```. - example below.\n\n```js\n{\n    \"json\": {\n        \"list\": [\n            {\n                \"email\": \"abc@example.com\",\n                \"name\": \"abc\",\n                \"date\": \"05/01/2015\"\n            },\n            {\n                \"email\": \"xyz@example.com\",\n                \"name\": \"xyz\",\n                \"date\": \"05/01/2015\"\n            }\n        ]\n    }\n}\n```\n\nYou can then access it via object key name like the example below - \n\n```html\n\u003cjson fetch-json=\"https://YOUR_URL_HERE.com\"\u003e{{#json.list}} Your name is {{title}}  \u003cbr/\u003e{{/json.list}}\u003c/json\u003e\n```\n\n\u003c/details\u003e\n\n \n \n## Functions\n \n \n \n\u003cdetails\u003e\n\u003csummary\u003e\n How to use \u003cb\u003e\u003ci\u003efunctions\u003c/b\u003e\u003c/i\u003e with \u003ci\u003e\u003cb\u003eJSON Tag\u003c/b\u003e\u003c/i\u003e:\n\u003c/summary\u003e\n\n\u003cbr\u003e\n\nTo use a JSON key as a function - set the JSON value key as a function like the example(s) below - \n\n```js\n \u003cscript\u003e\nlet FunctionExample = {\n  title: \"Joe\",\n  calc: function () {\n    return 2 + 4;\n  },\n   bold: function () {\n    return function (text) {\n      return `\u003cb\u003e ${text} was bolded \u003c/b\u003e`;\n    }\n   },\n};\n \u003c/script\u003e\n```\n\n and then use the function(s) in your HTML document - example below.\n \n```html\n\u003cjson local-json=\"FunctionExample\"\u003eCalculate function - {{title}} spends {{calc}}. Bold function - {{#bold}} {{title}}.{{/bold}}\u003c/json\u003e\n```      \n \n \u003c/details\u003e\n \n\n## Notice\n \n \u003cb\u003e\u003ci\u003eJSON Tag\u003c/i\u003e\u003c/b\u003e uses [Mustache](http://mustache.github.io/) templating language which is compiled with [Hogan.js](https://github.com/twitter/hogan.js/). For information\non Mustache, see the [manpage](http://mustache.github.io/mustache.5.html) and\nthe [spec](https://github.com/mustache/spec).\n\n**psstt** - you might find another cool function that \u003cb\u003e\u003ci\u003eJSON Tag\u003c/b\u003e\u003c/i\u003e is capable of via Mustache templating language, if you think you came across something \u0026 it should be documented or added, feel free to submit a PR or feature request, etc!\n \n\n## Contributing ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/JSON-Tag)\n\nWant to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!\n\nSee also the list of\n[contributors](https://github.com/MarketingPipeline/JSON-Tag/graphs/contributors) who\nparticipate in this project.\n\n## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/JSON-Tag)\n\nThis project is licensed under the GPL-3.0 License - see the\n[LICENSE](https://github.com/MarketingPipeline/JSON-Tag/blob/main/LICENSE) file for\ndetails.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarketingpipeline%2Fjson-tag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarketingpipeline%2Fjson-tag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarketingpipeline%2Fjson-tag/lists"}