What If You Could Write AJAX Without JavaScript? Meet fetchtl.

#javascript #html #tooling

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>

$poll means 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

Top comments (2)

Ravavyr • Nov 17

lol, this sounds neat and all, but in a real project...
You're gonna be expanding your lib to process POSTs and callback functions and you're just gonna end up with a lot more boilerplate than a regular fetch just to accomplish the exact same thing.

Yours is still JavaScript... you're just hiding it inside a lib file and it's only a partial solution to the full problem.

If you're just using this for your pet project, enjoy, we all do this stuff eventually.
But please don't use it on client projects that someone else will have to take over/change/fix/debug/whatever in the future.

In the end, someone else is gonna be looking at code you produce in like 2 or 3 years and go "WTF is this?" unless your little library becomes something popular.