██FR█████ █INTELL███████████

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


This content originally appeared on DEV Community and was authored by Jahongir Sobirov

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


This content originally appeared on DEV Community and was authored by Jahongir Sobirov