{"id":20878086,"url":"https://github.com/hmpl-language/hmpl","last_synced_at":"2025-04-08T17:16:50.921Z","repository":{"id":261194393,"uuid":"883392680","full_name":"hmpl-language/hmpl","owner":"hmpl-language","description":"🐜 Server-oriented customizable templating for JavaScript. Apply SSR, SSG, ISG without robot indexing on any sites without Next.js, Remix, Nuxt.js!","archived":false,"fork":false,"pushed_at":"2025-03-31T18:47:44.000Z","size":8786,"stargazers_count":239,"open_issues_count":6,"forks_count":25,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-01T16:15:51.711Z","etag":null,"topics":["fetch","fetch-api","hmpl","html","javascript","rest","server-side","ssr","template-engine","typescript"],"latest_commit_sha":null,"homepage":"https://hmpl-lang.dev","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/hmpl-language.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-04T22:13:15.000Z","updated_at":"2025-04-01T14:24:55.000Z","dependencies_parsed_at":"2024-11-05T08:24:12.256Z","dependency_job_id":"5d6925b3-14ae-4078-b0b0-af7b7ccf3105","html_url":"https://github.com/hmpl-language/hmpl","commit_stats":null,"previous_names":["hmpl-language/hmpl"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-language%2Fhmpl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-language%2Fhmpl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-language%2Fhmpl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hmpl-language%2Fhmpl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hmpl-language","download_url":"https://codeload.github.com/hmpl-language/hmpl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247888559,"owners_count":21013001,"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":["fetch","fetch-api","hmpl","html","javascript","rest","server-side","ssr","template-engine","typescript"],"created_at":"2024-11-18T07:00:48.988Z","updated_at":"2025-04-08T17:16:50.916Z","avatar_url":"https://github.com/hmpl-language.png","language":"TypeScript","readme":"\u003cdiv\u003e\n    \u003ca href=\"https://www.npmjs.com/package/hmpl-js\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/hmpl-language/media/refs/heads/main/banner_new.png\" alt=\"hmpl\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cdiv\u003e\n\n[![npm-version](https://img.shields.io/npm/v/hmpl-js?logo=npm\u0026color=0183ff\u0026style=for-the-badge)](https://www.npmjs.com/package/hmpl-js)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/hmpl-js?logo=npm\u0026color=0183ff\u0026style=for-the-badge)](https://bundlephobia.com/package/hmpl-js)\n[![codecov](https://img.shields.io/codecov/c/github/hmpl-language/hmpl?style=for-the-badge\u0026logo=codecov\u0026logoColor=ffffff\u0026label=CODECOV\u0026color=0183ff)](https://codecov.io/github/hmpl-language/hmpl)\n[![issues](https://img.shields.io/github/issues/hmpl-language/hmpl?logo=github\u0026color=0183ff\u0026style=for-the-badge)](https://github.com/hmpl-language/hmpl/issues)\n\n[![x.com](https://img.shields.io/badge/Twitter-000?style=for-the-badge\u0026logo=x\u0026logoColor=fff)](https://x.com/hmpljs)\n[![discord](https://img.shields.io/badge/Discord-7289DA?style=for-the-badge\u0026logo=discord\u0026logoColor=fff)](https://discord.gg/KFunMep36n)\n\n\u003c/div\u003e\n\n\u003ca href=\"https://hmpl-lang.dev\"\u003eWebsite\u003c/a\u003e • \u003ca href=\"https://hmpl-lang.dev/introduction.html\"\u003eDocumentation\u003c/a\u003e • \u003ca href=\"https://codesandbox.io/p/sandbox/basic-hmpl-example-dxlgfg\"\u003eDemo Sandbox\u003c/a\u003e • \u003ca href=\"https://hmpl-lang.dev/examples.html\"\u003eExamples\u003c/a\u003e\n\nhmpl is a small template language for displaying UI from server to client. It is based on \u003cem\u003ecustomizable\u003c/em\u003e requests sent to the server via \u003ca href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API\"\u003efetch\u003c/a\u003e and processed into ready-made HTML. The language is syntactically object-based and integrated with \u003ca href=\"https://www.npmjs.com/package/json5\"\u003eJSON5\u003c/a\u003e and \u003ca href=\"https://www.npmjs.com/package/dompurify\"\u003eDOMPurify\u003c/a\u003e. Reduce the size of your javascript files and display the same UI as if it was written in a modern framework and apply Server-Side Rendering, Static Site Generation, Incremental Static Generation (SSR, SSG, ISG) without robot indexing on any sites without Next.js, Remix, Nuxt.js!\n\n☆ If you find HMPL useful, please consider giving us a star on GitHub! Your support helps us continue to innovate and deliver exciting features.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://devhunt.org/tool/hmpljs\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/hmpl-language/media/refs/heads/main/devhunt.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Usage\n\n```javascript\nimport hmpl from \"hmpl-js\";\n\nconst templateFn = hmpl.compile(\n  `\u003cdiv\u003e\n      \u003cbutton data-action=\"increment\" id=\"btn\"\u003eClick!\u003c/button\u003e\n      \u003cdiv\u003eClicks: {{ src: \"/api/clicks\", after: \"click:#btn\" }}\u003c/div\u003e\n  \u003c/div\u003e`\n);\n\nconst clicker = templateFn(({ request: { event } }) =\u003e ({\n  body: JSON.stringify({ action: event.target.getAttribute(\"data-action\") })\n})).response;\n\ndocument.querySelector(\"#app\").append(clicker);\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eClarify this!\u003c/summary\u003e\n\n```js\nimport hmpl from \"hmpl-js\"; // Import the HMPL library\n\n// Compile an HMPL template with dynamic behavior\nconst templateFn = hmpl.compile(\n  `\u003cdiv\u003e\n      \u003cbutton data-action=\"increment\" id=\"btn\"\u003eClick!\u003c/button\u003e\n      \u003c!-- This div will update with the click count from /api/clicks --\u003e\n      \u003cdiv\u003eClicks: {{ src: \"/api/clicks\", after: \"click:#btn\" }}\u003c/div\u003e\n  \u003c/div\u003e`\n);\n\n// Generate a response handler for the template\n// In the original object, we will have the following: { response: div, status: 200 }\nconst clicker = templateFn(({ request: { event } }) =\u003e ({\n  // Send a JSON payload with the action from the button's data attribute\n  body: JSON.stringify({ action: event.target.getAttribute(\"data-action\") })\n})).response;\n\n// Append the dynamically generated element to the #app container\ndocument.querySelector(\"#app\").append(clicker);\n```\n\nIn this example, we create a dynamic clicker component in which, when a `button` is pressed, we will receive the value of the current clicks that will come from the server. The advantage of this approach is that we can take out not only data in the form of `Text`, but also entire components and even pages!\n\n\u003c/details\u003e\n\n## Why HMPL?\n\nUsing template language capabilities, you can multiply reduce the size of the application bundle. Full customization of the request based on the modern `fetch` standard, as well as support for all the functionality necessary for modern work in applications (request indicator, sending by event, automatic generation of `body` for the `form`, caching) and the syntax of the object in the markup, which requires a minimum number of characters, will help to build interaction with the server and client as efficiently as possible. App size [comparison](https://github.com/hmpl-language/app-size-comparison) (bytes):\n\n\u003cdiv\u003e\n    \u003ca href=\"https://github.com/hmpl-language/app-size-comparison\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/hmpl-language/media/refs/heads/main/comparison.png\" alt=\"App size comparison\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\nAlso, HMPL can be a great alternative to popular tools such as HTMX and Alpine.js.\n\n## Features\n\n- **Customizable**: Send a custom request to the server when receiving the UI\n- **Memory Preserving**: Reduce file sizes on the client by several times\n- **Based on Fetch API**: Use a modern standard instead of `XMLHTTPRequest`\n- **Server-oriented**: Work with the server directly through markup and with a little js\n- **Generate thousands of DOM nodes from a single template**: Work with large components not only on the server but also on the client\n- **Simple**: Get ready-made UI from the server by writing a couple of lines of familiar object syntax\n- **Protected from XSS attacks**: Enable incoming server HTML sanitization with [DOMPurify](https://www.npmjs.com/package/dompurify) and work with it safely\n- **Flexible**: Can be used in almost any project due to not only working through a script, but also working in files with the `.hmpl` extension\n- **Integrated with JSON5**: Flexible writing of objects by [specs](https://spec.json5.org) as in vanilla js, as well as the reliability of the parser used by millions of people\n- **Small bundle size**: Lots of functionality in a couple of kilobytes\n\n## Installation\n\nhmpl can be installed in several ways, which are described in this section. This tool is a simple javascript file that is connected in the usual way through a `script`, or using the `import` construct in an environment that supports this (webpack build, parcel build etc.). Also, starting with version `2.2.0`, the JSON5 module needs to be connected, and starting with version `2.2.5`, the DOMPurify module also needs to be connected. The first and easiest way is to install using a CDN.\n\n### Package Manager\n\nThis method involves downloading through npm or other package managers.\n\n```bash\nnpm i hmpl-js\n```\n\n\u003e [Node.js](https://nodejs.org) is required for npm.\n\nAlong the path node-modules/hmpl/dist you can find two files that contain a regular js file and a minified one.\n\n### CDN\n\nThis method involves connecting the file through a third-party resource, which provides the ability to obtain a javascript file from npm via a link.\n\n```html\n\u003cscript src=\"https://unpkg.com/json5/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/dompurify/dist/purify.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/hmpl-js/dist/hmpl.min.js\"\u003e\u003c/script\u003e\n\u003c!--\n  integrity=\"sha384-...\"\n  crossorigin=\"anonymous\"\n--\u003e\n```\n\nThis resource could be unpkg, skypack or other resources. The examples include unpkg simply because it is one of the most popular and its url by characters is not so long.\n\n### Manual download\n\nYou can install the package by simply [downloading](https://unpkg.com/hmpl-js/dist/hmpl.min.js) it as a file and moving it to the project folder.\n\n```html\n\u003cscript src=\"https://unpkg.com/json5/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/dompurify/dist/purify.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./hmpl.min.js\"\u003e\u003c/script\u003e\n```\n\nIf, for some reason, you do not need the minified file, then you can download the full file from this [link](https://unpkg.com/hmpl-js/dist/hmpl.js).\n\n```html\n\u003cscript src=\"https://unpkg.com/json5/dist/index.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/dompurify/dist/purify.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./hmpl.js\"\u003e\u003c/script\u003e\n```\n\nThe non-minified file is larger in size, but it is there as it is with all the formatting.\n\n## Ecosystem\n\n\u003ca href=\"https://www.npmjs.com/package/hmpl-loader\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/hmpl-language/media/refs/heads/main/Webpack.svg\" alt=\"hmpl-loader\" height=\"40\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://marketplace.visualstudio.com/items?itemName=hmpljs.hmpl\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/hmpl-language/media/refs/heads/main/VS%20Code.svg\" height=\"40\" alt=\"vs-code extension\"/\u003e\u003c/a\u003e\n\n## Community support\n\nThe [documentation](https://hmpl-lang.dev/introduction.html) contains main information on how the HMPL template language works. If you have any questions about how HMPL works, you can use the following resources:\n\n- [Github](https://github.com/hmpl-language/hmpl) - In the discussion and issues sections you can ask any question you are interested in\n- [Discord](https://discord.gg/KFunMep36n) - You can ask your question in the thematic channel \"support\"\n- [𝕏 (Twitter)](https://x.com/hmpljs) - There is a lot of interesting stuff there, concerning the template language and not only :)\n\nYou can also ask your question on [Stack Overflow](https://stackoverflow.com/) and address it in the resources described above.\n\n## Contribution\n\nWe have a [Contributing Guide](https://github.com/hmpl-language/hmpl/blob/main/CONTRIBUTING.md) that describes the main steps for contributing to the project.\n\nThank you to all the people who have already contributed to HMPL, or related projects!\n\n## Roadmap\n\nThe project has a [roadmap](https://github.com/orgs/hmpl-language/projects/5) where you can see the plans for future development.\n\n## Fossa status\n\n[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fhmpl-language%2Fhmpl.svg?type=large\u0026issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2Fhmpl-language%2Fhmpl?ref=badge_large\u0026issueType=license)\n\nLicensed under [MIT](https://github.com/hmpl-language/hmpl/blob/main/LICENSE)\n","funding_links":[],"categories":["Recently Updated","JavaScript","TypeScript","Examples"],"sub_categories":["[Nov 17, 2024](/content/2024/11/17/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmpl-language%2Fhmpl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhmpl-language%2Fhmpl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhmpl-language%2Fhmpl/lists"}