{"id":13447402,"url":"https://github.com/moappi/json2html","last_synced_at":"2025-05-15T13:04:52.070Z","repository":{"id":2124460,"uuid":"3067224","full_name":"moappi/json2html","owner":"moappi","description":"Json2html is a lightning fast client side javascript HTML templating library with wrappers for both jQuery and Node.js. ","archived":false,"fork":false,"pushed_at":"2023-12-19T00:04:37.000Z","size":153,"stargazers_count":619,"open_issues_count":7,"forks_count":104,"subscribers_count":33,"default_branch":"master","last_synced_at":"2024-05-19T14:34:59.372Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.json2html.com","language":"JavaScript","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/moappi.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}},"created_at":"2011-12-29T06:13:25.000Z","updated_at":"2024-05-13T14:49:02.000Z","dependencies_parsed_at":"2024-01-06T20:54:54.190Z","dependency_job_id":null,"html_url":"https://github.com/moappi/json2html","commit_stats":{"total_commits":55,"total_committers":8,"mean_commits":6.875,"dds":0.4363636363636364,"last_synced_commit":"7fa4ff4ef6d2aeff715e931b4b97ec1e1895cc00"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moappi%2Fjson2html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moappi%2Fjson2html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moappi%2Fjson2html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moappi%2Fjson2html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moappi","download_url":"https://codeload.github.com/moappi/json2html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248168074,"owners_count":21058766,"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","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-07-31T05:01:16.595Z","updated_at":"2025-04-10T06:30:00.946Z","avatar_url":"https://github.com/moappi.png","language":"JavaScript","readme":"\njson2html\n------------------\n\njson2html is an open source javascript library that uses json templates to render JSON objects into HTML.\n\nBuild lightning fast, interactive client side templates using nothing but javascript.\n\nFree to use under the MIT license.\n\n\u003ca href='http://www.json2html.com'\u003ewww.json2html.com\u003c/a\u003e for full documentation.\n\nFeatures\n--------------\n\n+   Native JS templates that work both the client and server\n+   Interactive with embedded events directly in your templates\n+   Reusable components\n+   Dynamically update parts of your rendered templates when changes occur\n+   Use simple inline js functions for complex logic\n+   100% javascript so no need to learn special syntax\n\nExample\n--------------\n```javascript\njson2html.render(\n    [\n        {\"name\": \"Sasha\", \"age\":27},\n        {\"name\": \"Bobby\", \"age\":45}\n    ], \n    {\"\u003c\u003e\": \"li\", \"html\":[\n    \t{\"\u003c\u003e\": \"span\", \"text\": \"${name} (${age} years old)\"}\n      ]});\n    \n```\n\nWill render the following html\n\n```html\n\u003cli\u003e\n\t\u003cspan\u003eSasha (27 years old)\u003c/span\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\t\u003cspan\u003eBobby (45 years old)\u003c/span\u003e\n\u003c/li\u003e\n```\n\njQuery\n=========\nUse seemlessly with jQuery, oh did we also mention that you can embed events in your template?  Forget attaching your events after you've rendered your templates.\n\n```javascript\n {\"\u003c\u003e\":\"button\",\"text\":\"Click Me\",\"onclick\":(e)=\u003e{\n\talert(\"You just clicked this\");\n  }};\t\t\n```\nWill render into the following html and will alert when clicked :)\n\n```html\n\u003cbutton\u003eClick Me\u003c/button\u003e\n```\n\nNode.js\n=========\nUse your temlpates seemlessly on Node.js\n\nInstallation\n------------\n\n\tnpm install node-json2html\n\n\nUsage\n-----\n```javascript\n\tconst json2html = require('node-json2html');\n        \n\tlet html = json2html.transform([{'name':'Bob','fruit':'Bananas'},{'name':'Rick','fruit':'Apples'}],{\"\u003c\u003e\":\"div\",\"text\":\"${name} likes ${fruit}\"});\n```\n\nTypeScript:\n```javascript\n  import json2html from 'node-json2html'; //Import module\n  const { render, component } = json2html; // Import methods from Json2html\n```\n\n\u003ca href='http://www.json2html.com'\u003ewww.json2html.com\u003c/a\u003e for full documentation.\n","funding_links":[],"categories":["JavaScript","BlogPosts","18. 模板引擎 ##","18. 模板引擎","Template Engine"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","13.20 视差滚动(Parallax Scrolling)","Video"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoappi%2Fjson2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoappi%2Fjson2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoappi%2Fjson2html/lists"}