DEV Community

Cover image for Flask & HTMLx - Open-Source Sample

Posted on • Originally published at


Flask & HTMLx - Open-Source Sample

Hello Coders!

This article presents an open-source sample crafted with Flask and HTMLx using a simple Bootstrap 5 one-page design. For newcomers, Flask is a leading web framework powered by Python and HTMLx is a lightweight JS utility library that allows accessing AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML. This simple stack might help beginners code full-stack projects without being a JS guru for the frontend layer.

Thanks for reading!

Flask & HTMLx (Open-Source Sample) - GIF animated presentation

✨ How to use the sample

To get started with the application in the machine

  • Python3 - Make sure python3 and highr=er is installed on your system before proceeding to installation instructions.
  • Git - Download and install Git.OSX and Linux come preinstalled with Git. Download and install Git on your windows machine if not installed yet.
  • Pip - We will use pip to install the required packages to be used in the project.

👉 Step 1 - cloning the repository.

$ git clone
Enter fullscreen mode Exit fullscreen mode

👉 Step 2 - Prepare Environment (create virtual environment)

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

👉 Step 3 - Install Dependencies

$ # Install requirements
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

👉 Step 4 - Create Database & Tables

$ flask shell    # launch Flask Shell
>>> from app import db
>>> db.create_all()
Enter fullscreen mode Exit fullscreen mode

👉 Step 5 - Start the APP

$ flask run
Enter fullscreen mode Exit fullscreen mode

The app should be up & running at the address http://localhost:5000


All forms managed by the app use HTMLx directives. Here is the Login Form Source Code and used HTMLx directives:

    <form  hx-swap="outerHTML" 
           hx-post="{{ url_for('auth.signin') }}" 
           class="p-5 bg-white shadow mh-100 col-sm-8 col-md-6 col-lg-4" novalidate >

        <p class="h3 text-center p-2">SignIn</p>

        <!-- Truncated content -->

        <div class="form-input p-1">

        <div class="form-input p-1">

        <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
Enter fullscreen mode Exit fullscreen mode

Thanks for reading! For more resources, feel free to access:

Flask Charts.JS and Flask-RestX - Open-Source Sample.

Top comments (6)

souksyp profile image
Souk Syp.

HTMLx ✨✨

uithemes profile image

Thanks for writing & for the free sample. Can you provide more info (pro & cons) for HTMLx?

sm0ke profile image

Ty for reading!
In a single sentence htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML (copy/pasted from HTMLx help).

HTMLx basically simplifies the HTML / Backend communication using directives instead of using JS. Some developers dislike coding JS and prefer to use HTMLx as an alternative.


crearesite profile image

HTMLx looks promising ..

sm0ke profile image


rhondalillie profile image

Flask and HTMLx - the open source sample information I've been trying to find for a long time. Thank you for writing this information. Spell to break up relationship

🌙 Dark Mode?!

Turn it on in Settings