Flask HTMLX Material Kit - Open-Source Sample
Tags: webdev, flask, htmlx, opensource
Published: 2022-05-02 16:34:22

---
title: Flask HTMLX Material Kit - Open-Source Sample
published: true
description: Open-Source sample that uses Flask and HTMLX for the frontend logic on top of a modern Bootstrap 5 Design - Sources published on GH.
tags: webdev, flask, htmlx, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ay1qvz6t4lcf4uuevy0.jpg
canonical_url: https://blog.appseed.us/flask-htmlx-material-kit-design/
---
Hello Coders!

This article presents an [open-source sample](https://appseed.us/admin-dashboards/open-source/) crafted with `Flask` and `HTMLX` on top of a modern `Bootstrap 5` design. All forms ( login , register and contact) are managed by `HTMLX`, a lightweight JS utility library that allows accessing AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML. 

> Thanks for reading!

- 👉 [Flask HTMLX Material Kit](https://github.com/app-generator/sample-flask-htmlx-mkit) - source code
- 👉 Free [Support](https://appseed.us/support/) via Email and [Discord](https://discord.gg/fZC6hup).

---

![Flask & HTMLx (Material Kit Design) - GIF animated presentation.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0glaaut98knd47oge4v.gif)

---

## ✨ Design Information

[Material Kit](https://appseed.us/ui-kit/material-design/) is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using SASS files and classes.

This `Bootstrap 5 Design System` is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done.

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

---

## ✨ How to use the sample

To get started with the application in the machine using a manual build

- `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.

If anyone prefers `Docker`, the product is shipped with all necessary scripts and this simple starter can be started using a single (Docker) command:

> 👉 **Step 1** - Cloning the repository.  

```bash
$ git clone https://github.com/app-generator/sample-flask-htmlx-mkit.git
$ cd sample-flask-htmlx-mkit
```

---

> 👉 **Step 2** - Start on Docker.  
 
```bash
$ docker-compose up --build 
```

Once the above commands are executed, the app should be up and running:

![Flask & HTMLx (Material Kit Design) - User Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xan4hn5ra2npl2bfj4hs.png)

---

![Flask & HTMLx (Material Kit Design) - About US Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jwdflrugf1j1m603bgn.png)

---

## ✨ HTMLx

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

- [hx-swap](https://htmx.org/attributes/hx-swap/)
- [hx-post](https://htmx.org/attributes/hx-post/)
- [hx-target](https://htmx.org/attributes/hx-target/)

```html
    <form  hx-swap="outerHTML" 
           hx-post="{{ url_for('auth.signin') }}" 
           hx-push-url="true" 
           hx-target=".content" 
           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">
            {{form.email.label}}
            {{form.email(class_="form-control")}}
        </div>

        <div class="form-input p-1">
            {{form.password.label}}
            {{form.password(class_="form-control")}}
        </div>

        <button class="btn p-2 px-3 rounded btn-primary h1" type="submit">Sign In</button>
    </form>
```

---

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

- 👉 [Flask Charts.JS via Flask-RestX](https://blog.appseed.us/flask-charts-js-and-flask-restx-s92/) - With Sample
- 👉 [Django Charts via DRF](https://blog.appseed.us/django-charts-via-drf-and-charts-js/) - Step-by-step tutorial  

---

![Flask Charts.JS and Flask-RestX - Open-Source Sample.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl3yt4qikab5meosa4zz.png)