This content originally appeared on DEV Community and was authored by Anthony Max
Hello everyone! Today, I would like to share a small achievement that our project has received after 10 months of work on it! Check it out (and support us with the star if you like it - thank you! ❤️). We'll talk about what this project is and how it can help you.
🐜 What is this project?
This project is a template language that will help you create modern web applications without using frameworks, just with an API and a language compiler included.
Let's take as an example a small registration form with fields such as login and password. Similar ones are simply used in millions of sites around the world.
import { compile } from "hmpl-js";
const templateFn = compile(
`<div>
<form onsubmit="function prevent(e){e.preventDefault();};return prevent(event);" id="form">
<div class="form-example">
<label for="login">Login: </label>
<input type="text" name="login" id="login" required /><br/>
<label for="password">Password: </label>
<input type="password" name="password" id="password" required />
</div>
<div class="form-example">
<input type="submit" value="Register!" />
</div>
</form>
<p>
{
{
"src":"/api/register",
"after":"submit:#form",
"repeat":false,
"indicators": [
{
"trigger": "pending",
"content": "<p>Loading...</p>"
}
]
}
}
</p>
</div>`
);
const initFn = (ctx) => {
const event = ctx.request.event;
return {
body: new FormData(event.target, event.submitter),
credentials: "same-origin",
};
};
const obj = templateFn(initFn);
const wrapper = document.getElementById("wrapper");
wrapper.appendChild(obj.response);
Here, from the server, if everything is ok, we will receive a response in the form of a simple HTML code with a p tag and Text inside it such as Hello, ${login}!
// Detect dark theme var iframe = document.getElementById('tweet-1901382820049592495-906'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1901382820049592495&theme=dark" }
It is also worth noting that we received text with dynamic processing, that is, we received our login from the backend.
👀 How can the project help you?
First of all, this project will help developers make their web applications much smaller than if they were written on modern frameworks.
The diagram is based on this repository. This result is achieved thanks to a server-oriented approach, when we move entire pages, components, etc. to the server, and leave an empty framework on the client.
Unlike Alpine.js and similar libraries, HMPL has a fairly convenient syntax based on objects with customized requests via fetch.
🌱 Contributors
I want to give a huge thank you to the contributors who helped and help make the project better. Without their help, it would be difficult, since it is simply impossible to implement something that should work as it should.
All contributors from the old repository and the new one, many thanks to them all again ❤️!
📢 Project promotion
With this, things are always bad for me (ᵕ—ᴗ—). I focused only on development and did not think at all about the need to somehow promote it or something like that. For me, the main goal was different - to close those necessary issues every day, without which it would be simply impossible to use it today.
But at least I created a blog on dev.to, and I also tweet about it sometimes, and I created a blog where we also share our thoughts. I also write about it sometimes and other things, so you can check out all the resources.
Also, you can support us by giving a star to our project on GitHub! Thank you 🌊!
👽 What's next?
Make a cool template language, how else?) In fact, a Roadmap was recently made that describes what needs to be done by 2025.
// Detect dark theme var iframe = document.getElementById('tweet-1891829442575581660-448'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1891829442575581660&theme=dark" }
There are not so many tasks, but as development will be added. After all, "competitors" HTMX and Apine.js, so the template language must have more functionality to be the best tool of all, but, for this also work!
✅ This project is Open Source
So you can take part in it too! This also means you can use it for commercial purposes:
Repo: https://github.com/hmpl-language/hmpl
Website: https://hmpl-lang.dev
🖋️ Conclusion
I would like to express my enormous gratitude to everyone who supported and supports the project with their likes, comments, contributions, and just activity. This is very important to us and I hope that we can continue to do something cool and interesting for the template language! Thank you, once again, everyone ❤️!
This content originally appeared on DEV Community and was authored by Anthony Max
Anthony Max | Sciencx (2025-03-17T09:13:04+00:00) Our Project Got 100 Second Stars on Github🔥. Retrieved from https://www.scien.cx/2025/03/17/our-project-got-100-second-stars-on-github%f0%9f%94%a5/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.