DEV Community

Cover image for 🔐 Building a Simple Password Generator with FastHTML
Paul Contreras
Paul Contreras

Posted on

🔐 Building a Simple Password Generator with FastHTML

Are you looking to build a lightweight web application that’s both functional and stylish? In this tutorial, we’ll walk through creating a simple password generator using FastHTML — a minimalist Python-based HTML templating engine — and Tailwind CSS for sleek and responsive design.

🚀 What You’ll Build

We’ll create a web application that allows users to input the desired length of a password and generate a strong, random password on the fly. This tutorial is perfect for developers who want to explore FastHTML and HTMX, combined with the power of Tailwind CSS for simple front-end styling.

👨‍💻 Prerequisites

Before we dive in, make sure you have Python installed on your machine. We’ll be using the following libraries:

FastHTML: For our application.
You can install the required library with:



pip install python-fasthtml


Enter fullscreen mode Exit fullscreen mode

🛠️ Step 1: Setting Up Your FastHTML App

Let’s start by setting up our FastHTML application. FastHTML is a lightweight HTML templating engine that allows you to create HTML elements directly in Python, making your code clean and easy to manage.



# Importing libraries
from fasthtml.common import *
import string
import secrets

# Defining the FastHTML app
app = FastHTML(
    hdrs=(
        # Add Tailwind CSS
        Script(src="https://cdn.tailwindcss.com"),
    )
)


Enter fullscreen mode Exit fullscreen mode

Here, we import the necessary libraries and initialize our FastHTML app, embedding Tailwind CSS directly via CDN for rapid styling.

🎨 Step 2: Creating the User Interface

Next, we’ll design a simple form where users can input the desired password length. Tailwind CSS will make our form both functional and visually appealing.



@app.route('/')
def home():
    title = "Password Generator - With FastHTML"
    form = Form(
        Input(id="length_input", type="number", placeholder="Enter the length",
              cls="border-2 border-gray-400 rounded-md p-2"),
        Button("Generate", cls="bg-slate-900 text-white p-2 rounded-md mt-2"),
        cls="flex flex-col items-center mt-10",
        hx_post="/generate",
        target_id="result",
        hx_swap="innerHTML"
    )
    result = Div(id="result", cls="text-center mt-10")

    return Title(title), Main(H1(title, cls="text-3xl text-center mt-10"), form, result)



Enter fullscreen mode Exit fullscreen mode

ui

This function renders our homepage, which includes a form for password generation. The form leverages HTMX to send the input data to the server and dynamically update the result without a full page reload. This makes the user experience seamless and responsive.

🔒 Step 3: Implementing the Password Generator Logic

Now, let’s implement the logic to generate a secure password based on the user’s input.



alph = string.ascii_letters + string.digits + string.punctuation


@app.route("/generate")
def post(length_input: int):
    length = length_input
    if length < 8:
        return "Password length should be greater than 8 characters"
    password = ''.join(secrets.choice(alph) for i in range(length))
    return password


Enter fullscreen mode Exit fullscreen mode

In this snippet, we define the character set for our password and implement the generator logic. We ensure the password length is secure (minimum of 8 characters) and then generate a random password using Python’s secrets module, which is designed for cryptographic applications.

▶️ Step 4: Running Your Application

To get your app up and running, simply run the following command:



if '__main__' == __name__:
    serve()


Enter fullscreen mode Exit fullscreen mode

Now, visit http://127.0.0.1:5001 in your browser, and you'll be greeted with your new password generator!

result

result-demo

🎉 Conclusion

Congratulations! You’ve just built a fully functional password generator using FastHTML and Tailwind CSS. This project is a fantastic way to get acquainted with Python-based web development, HTMX for dynamic content, and Tailwind CSS for modern, responsive design.

💾 Check Out the Full Source Code

Want to dive deeper into the code or contribute to the project? The full source code is available on GitHub. Feel free to clone, fork, or star the repository:

GitHub logo pol-cova / password-generator-fasthtml

Simple password generator using FastHTML

🔐 Password Generator with FastHTML

This repository contains a simple password generator web application built using FastHTML and styled with Tailwind CSS. The application allows users to generate secure, random passwords based on a user-defined length.

🚀 Features

  • Secure Password Generation: Uses Python's secrets module for cryptographic randomness.
  • Responsive Design: Styled with Tailwind CSS for a clean and modern look.
  • Dynamic Updates: Utilizes HTMX for seamless, asynchronous password generation.

📦 Prerequisites

Make sure you have Python installed on your machine. You can install the necessary dependencies with:

pip install python-fasthtml
Enter fullscreen mode Exit fullscreen mode

🛠️ Installation

Clone this repository to your local machine:

git clone https://github.com/pol-cova/password-generator-fasthtml.git
Enter fullscreen mode Exit fullscreen mode

Navigate to the project directory:

cd password-generator-fasthtml
Enter fullscreen mode Exit fullscreen mode

▶️ Running the Application

To start the application, simply run:

python app.py
Enter fullscreen mode Exit fullscreen mode

You can now access the application by navigating to http://localhost:5001 in your web browser.

Tutorial

You can find a detailed tutorial on how to build…

Top comments (2)

Collapse
 
artydev profile image
artydev

Thank you :-)
I have create a series of posts on FastHTML
For example dev.to/artydev/fasthtml-view-pdf-i...

I have tagged my posts with #fasthtml but they don't appear .
Do you have an idea ?

REagrds

Collapse
 
polcontreras profile image
Paul Contreras

Hi, I really don't know why it doesn't index your posts with the hashtag, could you try and upload them again, thanks for sharing the series of posts to see more in depth fasthtml.