Widgets

Dynamic Progress Bar
Progress Bar

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

Example Audio App
Audio

An example audio app

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

PDF Embed
PDF

PDF Embed

Dynamic User Interface

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.

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.

Cascading Dropdowns
Cascading Dropdowns

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

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

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 SVG based plot (heatmap)
SVG plot

Interactive Seaborn SVG plot by Li (Lily) Cai

Demo of displaying a Polars dataFrame using FastHTML
Great-Tables Tables

Change the appearance of a Polars dataFrame based on selected colors using the Great Tables library.

Demo of Matplotlib plugin for FastHTML
Matplotlib Charts

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

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

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

Text-Annotator

An app built by Alex Volkov that demonstrates annotation use-cases and tailwind styling in FastHTML

Cellular-Automata

A 1D Cellular Automata using FastHTML