https://github.com/hmpl-lang/hmpl Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + GitHub Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions By size + Enterprise + Teams + Startups By industry + Healthcare + Financial services + Manufacturing By use case + CI/CD & Automation + DevOps + DevSecOps * Resources Topics + AI + DevOps + Security + Software Development Explore + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Enterprise + Enterprise platform AI-powered developer platform Available add-ons + Advanced Security Enterprise-grade security features + GitHub Copilot Enterprise-grade AI features + Premium Support Enterprise-grade 24/7 support * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up Reseting focus You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} hmpl-lang / hmpl Public * Notifications You must be signed in to change notification settings * Fork 2 * Star 28 Template language for displaying UI from server to client hmpl-lang.github.io License MIT license 28 stars 2 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 0 * Pull requests 0 * Discussions * Actions * Projects 0 * Security * Insights Additional navigation options * Code * Issues * Pull requests * Discussions * Actions * Projects * Security * Insights hmpl-lang/hmpl This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. master BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 88 Commits dist dist src src .babelrc .babelrc .editorconfig .editorconfig .eslintrc.json .eslintrc.json .gitignore .gitignore .prettierrc.json .prettierrc.json CODE_OF_CONDUCT.md CODE_OF_CONDUCT.md CONTRIBUTING.md CONTRIBUTING.md LICENSE LICENSE README.md README.md package-lock.json package-lock.json package.json package.json tsconfig.json tsconfig.json View all files Repository files navigation * README * Code of conduct * MIT license hmpl hmpl - template language for displaying UI from server to client npm-version discussions license Website * Documentation * Demo Sandbox * Examples About hmpl is a small template language for displaying UI from server to client. It is based on requests sent to the server via fetch and processed into ready-made HTML. Reduce the size of your javascript files and display the same UI as if it was written in a modern framework. Example #1 HTML before
API route - /api/test 123 HTML after
123
Example #2 import { compile } from "hmpl-js"; const templateFn = compile( `{ { "src": "/api/test", "indicators": [ { "trigger": "pending", "content": "
Loading...
" }, { "trigger": "rejected", "content": "
Error
" } ] } }` ); const wrapper = document.getElementById("wrapper"); const elementObj = templateFn({ credentials: "same-origin", get: (prop, value) => { if (prop === "response") { if (value) { wrapper.appendChild(value.content); } } }, }); Why hmpl? The HMPL template language extends the capabilities of regular HTML by adding query objects to the markup to reduce the code on the client. When writing SPA, a large amount of javascript code is generated, which is loaded when the user visits the site, so the loading speed can be quite slow. All this can be avoided by generating the markup on the server and then loading it on the client:

Clicks: {{"src":"http://localhost:8000/api/clicks", "after":"click:.increment"}}

Let's say that the same code on popular frameworks such as Vue and others takes up much more code, which, in fact, can be moved to the server. Installation hmpl can be installed in several ways, which are described in this article. 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.). The first and easiest way is to install using a CDN. Package Manager This method involves downloading through npm or other package managers. npm i hmpl-js Node.js is required for npm. Along the path node-modules/hmpl/dist you can find two files that contain a regular js file and a minified one. Manual download You can install the package by simply downloading it as a file and moving it to the project folder. If, for some reason, you do not need the minified file, then you can download the full file from this link. The non-minified file is larger in size, but it is there as it is with all the formatting. CDN This method involves connecting the file through a third-party resource, which provides the ability to obtain a javascript file from npm via a link. This 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. Getting started After installation using any convenient method described in Installation, you can start working with the server in the following way: Or, if you need to work with hmpl as a module, there is a list of imported functions, such as compile: import { compile } from "hmpl-js"; const templateFn = compile( `{ { "src": "/api/test" } }` ); const elementObj = templateFn(); These will be the two main ways to interact with the server. In future versions, the functionality will be expanded, but the methods themselves will not change. Webpack Module has its own loader for files with the .hmpl extension. You can include hmpl-loader and use the template language syntax in separate files: main.hmpl
{ { "src": "/api/test" } }
main.js const templateFn = require("./main.hmpl"); const elementObj = templateFn(); For the loader to work, it is better to use versions 0.0.2 or higher. Changelog Changelog Inspiration If you like hmpl, it will be very cool if you rate the repository with a star Contact Email - camplejs@gmail.com License Licensed under MIT About Template language for displaying UI from server to client hmpl-lang.github.io Topics javascript fetch language rest rest-api templates fetch-api Resources Readme License MIT license Code of conduct Code of conduct Activity Custom properties Stars 28 stars Watchers 0 watching Forks 2 forks Report repository Releases 15 2.1.2 Latest Aug 5, 2024 + 14 releases Packages 0 No packages published Languages * TypeScript 100.0% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.