JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15
  • Score
    100M100P100Q42316F
  • License MIT

HTML-first data fetching with zero JS, leveraging a revolutionary server-driven DOM.

Package Exports

  • fetchtl
  • fetchtl/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fetchtl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

FetchTL

A lightweight library to fetch data using only HTML—no frontend JavaScript needed.

Description

Fetchtl allows you to fetch data and interact with your server using only HTML. It simplifies HTTP requests, JSON parsing, and error handling, making it perfect for developers who want minimal JS-free solutions or to experiment with server-driven UIs.

Features

  • Fetch data directly with HTML—no frontend JS required
  • Lightweight and minimal dependency footprint
  • Simplified GET, POST, PUT, DELETE requests
  • Automatic JSON parsing and error handling
  • Works seamlessly with server-driven interfaces

Installation (for backend)

# Using npm
npm install fetchtl

Importing (for frontend)

<script src="https://cdn.jsdelivr.net/gh/jahongir2007/fetchtl/fetchtl.js"></script>

Fetchtl Frontend API Guide

Fetchtl is a lightweight HTML-first library to fetch data from your server without writing frontend JavaScript. It uses custom HTML attributes ($get, $post, $put, $delete, $patch, $poll, $realtime) to handle HTTP requests, form submissions, polling, and real-time updates.

Table of Contents

For frontend

For backend

$url: Setting main server host and port

<html $url='http:\\localhost:3000'>

$get: Fetch and render

Use $get on any HTML element to automatically fetch JSON from a URL and render it inside the element.

<div $get="/api/user">
  <p>Name: $name</p>
  <p>Email: $email</p>
</div>
  • Fetchtl will replace $name, $email with the JSON response.
  • Works on dynamically added elements thanks to MutationObserver.

$post, $put, $patch, $delete: Forms

Fetchtl automatically handles forms with $post, $put, $patch, or $delete.

<form $post="/api/submit" $send-on="submit" $reload="false" $single-fetch="true">
  <input type="text" name="username" $required />
  <input type="email" name="email" $required $email />
  <button type="submit">Send</button>
</form>

Features

  • $send-on: Event to trigger submission (default: submit)
  • $reload: Reload page after submit? "true" by default
  • $single-fetch: Prevent multiple submissions at the same time

Custom Events

  • fetchtl:success → Fired after successful submission
  • fetchtl:error → Fired on error
const form = document.querySelector('form[$post]');
form.addEventListener('fetchtl:success', e => console.log("Success:", e.detail));
form.addEventListener('fetchtl:error', e => console.log("Error:", e.detail));

$poll: Automatic polling

Poll a URL every X milliseconds and update the element.

<div $get="/api/status" $poll="5000">
  <p>Status: $status</p>
</div>
  • $poll="5000" → fetch every 5000ms (5 seconds)
  • Template is re-rendered every poll cycle

$realtime: WebSocket updates

Receive real-time JSON updates via WebSocket.

<div $realtime="/ws/updates">
  <p>Message: $message</p>
</div>
  • Sends events as fetchtl:message with the data
  • Auto-renders template variables
const el = document.querySelector('[\\$realtime]');
el.addEventListener('fetchtl:message', e => console.log("New message:", e.detail));

Template Variables

Fetchtl supports $variable syntax inside HTML:

<p>Hello, $user.name!</p>
<p>Your balance: $account.balance</p>
  • Nested properties supported: $user.name, $account.balance
  • If key is missing, it will leave the variable untouched

Form Validation

Add simple validation attributes to inputs:

<input type="text" name="username" $required $min="3" $max="15" />
<input type="email" name="email" $required $email />
  • $required: Field must not be empty
  • $email: Must be valid email format
  • $min / $max: Minimum / maximum string length Validate in JS:
const formEl = document.querySelector('form');
const errors = FetchTL.validateForm(formEl);
console.log(errors); // { username: "Minimum length is 3" }

Fetchtl Backend API

Fetchtl is a mini-DOM store for managing form/input data on the server. It works seamlessly with Express, allowing you to sync with req.body.

Initilization

Import in your Express app:

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json()); // parse JSON bodies

Syncing req.body Automatically

In your route handlers, just call $.sync(req.body) (for syncing you should send data with $post/$patch/$put/$delete):

app.post("/submit", (req, res) => {
  // Sync all form data into $
  $.sync(req.body);

  // Access values via $.input
  const username = $.input("username").val(); // array
  const age = $.input("#age").val();          // string

  console.log("Backend store:", $.store);

  res.json({
    message: "Form data synced successfully",
    username,
    age
  });
});

Reading and Writing Input Values

// GET value by ID
const age = $.input("#age").val();

// GET values by class
const emails = $.input(".email").val();

// GET values by name
const usernames = $.input("username").val();

// SET values by ID, class, or name
$.input("#age").val("19");
$.input(".email").val("new@mail.com");
$.input("username").val("John");
  • IDs → single string
  • Classes / Names → arrays
  • Setting values updates the internal $ store

Selectors

Selector Type Example Returns / Updates
ID #age Single value (string)
Class .email Array of values
Name username Array of values

Example Express + Fetchtl Integration

const express = require("express");
const $ = require("fetchtl");

const app = express();
app.use(express.json());

app.post("/api/form", (req, res) => {
  $.sync(req.body); // sync form data

  // Access some values
  const username = $.input("username").val()[0]; // first value
  const age = $.input("#age").val();

  console.log("Synced $ store:", $.store);

  res.json({
    status: "success",
    data: { username, age }
  });
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

Notes

  • $ is designed for server-driven HTML / JS-free forms.
  • Works perfectly with fetchtl frontend: $post, $put, $patch, $delete attributes.
  • Syncing req.body is as simple as calling $.sync(req.body) in any route.
  • After sync, use $.input(selector).val() to get or set values.