A minimalist newsletter signup app with HTMX and Manifest

TLDR;

This simple full stack newsletter signup app has been built with minimal code. See the source code or open the live stackblitz demo

Intro

What is HTMX ?

HTMX is an open source JS library that extends HTML allowing it to make HTTP requests (other than the default form POST) and update the DOM.

Unlike JS frameworks like React, HTMX does not take control of your app. It is a minimalist library that integrates directly into HTML files. It works really well on small projects where you need to interact with a server.

  <script src="https://unpkg.com/htmx.org@2.0.3"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

What is Manifest ?

Manifest is an open source Backend-as-a-Service in 1 file that provides key backend features out-of-the-box. Manifest's purpose is to empower front-end developers enabling them to create backends easily and quickly.

The syntax is a clear YAML file that generates an admin panel, a database and a fully functional REST API.

# manifest/backend.yml
name: Healthcare application 🏥

entities:
  Doctor 👩🏾‍⚕️:
    properties:
      - fullName
      - avatar
      - { name: price, type: money, options: { currency: EUR } }
    belongsTo:
      - City

  Patient 🤒:
    properties:
      - fullName
      - { name: birthdate, type: date }
    belongsTo:
      - Doctor

  City 🌍:
    properties:
      - name

Why both ?

In order to shine, HTMX needs to interact with a backend to fetch and post data. Instead of choosing a large backend framework that constrasts with the "micro-frontend" HTMX approach, Manifest fits better as it also provides a minimal and functional syntax.

The mission

In this demo, we will create a simple newsletter signup form with an email and a name input. The newly created subscribers get saved in the persistent database using Manifest and can be managed from the non-technical admin panel.

The HTMX

Our HTMX consists in a small HTML form where we add 3 attributes: hx-post, hx-target and hx-swap.

  <h1>Subscribe to our Newsletter</h1>
    <!-- We use hx-post to make an HTTP POST request on submit -->
    <form
      hx-post="http://localhost:1111/api/dynamic/subscribers"
      hx-target="#message"
      hx-swap="innerHTML"
    >
      <!-- The name of the inputs is important as it will be the payload key -->
      <input type="text" name="name" placeholder="Your name" required />
      <input type="email" name="email" placeholder="Your email" required />
      <button type="submit">Subscribe</button>
    </form>
    <div id="message"></div>
    <script>
      document.addEventListener("htmx:afterRequest", (event) => {
        const response = JSON.parse(event.detail.xhr.response);

        // Display a custom message on request success.
        const message = `
                <div class="message">
                    Thank you, ${response.name}! You have successfully subscribed with the email: ${response.email}.
                </div>
            `;
        // Inject the message into the target element
        document.getElementById("message").innerHTML = message;
      });
    </script>

The backend

In order to launch Manifest, you need to have NodeJS installed in your machine. From the root of your app, run:

npx add-manifest

This will create the manifest/backend.yml file with some dummy content. We replace it with our data model.

name: Newsletter Backend 💌
entities:
  Subscribers:
    properties:
      - { name: name, type: string }
      - { name: email, type: email }

Now we can serve the backend with the following command:

npm run manifest

You can now use your backend:

• 🖥️ Admin Panel: http://localhost:1111
• 📚 API Doc: http://localhost:1111/api

It you open your frontend with your browser, you can now subscribe to the newsletter, and verify in the admin panel that the new subscriber has been added to the collection !

Conclusion

We successfully created a full-stack app with 2 minimalist components: HTMX and Manifest with few lines of code.

One important point is that we need to use a bit of JavaScript to modify the DOM as HTMX expects HTML response from the server and Manifest delivers JSON through its REST API. Once that is clarified, the connection between front and back is really smooth.