Ever wished you could make an API request without writing a single line of JavaScript?
Yeah… me too 😅
So I built fetchtl — a tiny library that lets you do things like:
<div $get="/api/user"></div>
or even:
<form $post="/api/register" $send-on="submit">
<input name="email" />
<button type="submit">Register</button>
</form>
That’s it. No JS. No frameworks. No fetch(). Just HTML.
🌟 Why I Created fetchtl
As a web developer, I got tired of doing this 100 times:
fetch("/api/user")
.then(res => res.json())
.then(data => {
document.querySelector("#user").innerHTML = data.name;
});
Too much boilerplate. Too much repetition.
I wanted something like:
“Just write HTML and let the page fetch automatically.”
So I created fetchtl — a tool that gives HTML magical new attributes:
$get→ Load data from an API
$post→ Submit a form via AJAX
🚀 What Exactly Is fetchtl?
fetchtl is a JavaScript helper that watches your HTML for special attributes and automatically performs API calls.
No build tools. No configs. No React. No Vue.
Just include it and start using it:
<script src="https://cdn.jsdelivr.net/gh/jahongir2007/fetchtl/fetchtl.js"></script>
Now HTML becomes smart.
🤯 Example: Load API Data with Just One Attribute
Before fetchtl (traditional way)
<div id="user"></div>
<script>
fetch("/api/user")
.then(res => res.json())
.then(data => {
document.getElementById("user").innerHTML = data.name;
});
</script>
With fetchtl 🚀
<div $get="/api/user">
Loading...
</div>
fetchtl does everything automatically:
- fetches the URL
- replaces the inside HTML
- handles JSON
- updates instantly
📝 Example: AJAX Form Without JavaScript
Before
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault();
const formData = new FormData(e.target);
fetch("/api/register", {
method: "POST",
body: formData
});
});
With fetchtl 💛
<form $post="/api/register" $send-on="submit" $reload="false">
<input name="email" placeholder="Your email" />
<button type="submit">Register</button>
</form>
- The form submits via AJAX automatically.
- The page doesn’t reload.
- You didn’t write any JavaScript.
Built-in template engine (e.g. $name → replaced by JSON value)
So you can get directly and json object value by calling its name
<div $get='/user'>
User name: $name
</div>
🔄 Auto-refresh sections
With $poll you can refresh any section of your web page
<div $get='/api/status' $poll='2000'>
User status: $status
</div>
$pollmeans that every 2000 ms or 2 seconds fetchtl sends request to server
Useful for:
- live dashboards
- instant search
- real-time forms
Github page: https://github.com/Jahongir2007/fetchtl