Widgets

Dynamic Progress Bar
Progress Bar

A component that visually represents the completion status of a task or operation as it moves towards completion.

Show and Hide Content Button
Show/Hide Button

A component that shows and hides content on click

Chat Bubbles
Chat Bubbles

A chat bubble component with no exernal dependencies

Dynamic User Interface

Infinite scroll over a large dataset
Infinite Scroll

A table with infinite scroll over a large dataset (appending rows to the table as the user reaches the end of the table).

Cascading Dropdowns
Cascading Dropdowns

A cascading dropdown component where values in second dropdown are dependent on the value in the first dropdown

Click to Edit Button and 3 lines of text (First Name, Last Name, Email Address)
Click to Edit

A click to edit text component built based on a htmx documentation example.

Inline field validation showing error message when wrong input type was entered
Inline Field Validation

A form with inline field validation on individual inputs with the submit aditionally validating the whole form.

Application Layout

Two column simple web app with inputs on the left and outputs on the right
Two Column Grid

A simple two column grid with inputs on the left and outputs on the right based on fasthtml-example form demo

A collapsable sidebar menu using Bootstrap 5
Collapsable Sidebar Menu

A collapsable sidebar menu using Bootstrap 5

Vizualizations

Demo of Altair plugin for FastHTML
Altair Charts

Interactive altair chart using the fh-altair plugin by Vincent D. Warmerdam

Visualization of a bloch sphere with buttons for qubit gates
Bloch Sphere

Interactive Bloch sphere visualization using the fh-plotly plugin by Carlo Lepelaars

Demo of Plotly plugin for FastHTML showing 4 types of graphs (line, scatter, Bar, and 3D scatter)
Plotly Interactive Charts

Interactive Plotly chart using the fh-plotly plugin by Carlo Lepelaars that lets you zoom, pan, hover over data points and much more

Demo of Matplotlib plugin for FastHTML
Matplotlib Charts

Interactive matplotlib chart using the fh-matplotlib plugin by Vincent D. Warmerdam

Start Simple

Minimal Todo App (SQLite)

A minimal todo app using SQLite backend.

Applications

Tic-Tac-Toe

A Tic Tac Toe game using FastHTML and Tailwind CSS by by Adedara Adeloro

Cellular-Automata

A 1D Cellular Automata using FastHTML