FastHTML Gallery

Widgets

PDF Embed

PDF

PDF Embed

Show and Hide Content Button

Show/Hide Button

A component that shows and hides content on click

Example Audio App

Audio

An example audio app

Chat Bubbles

Chat Bubbles

A chat bubble component with no external dependencies

Dynamic Progress Bar

Progress Bar

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

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

Visualizations

Demo of SVG based plot (heatmap)

SVG plot

Interactive Seaborn SVG plot by Li (Lily) Cai

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 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 Altair plugin for FastHTML

Altair Charts

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

Demo of Matplotlib plugin for FastHTML

Matplotlib Charts

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

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

Web Socket demonstration of chat

Web Sockets

A demonstration on web sockets to have a multi-user messaging/chat use

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.

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.

Svg

Click the shape to swap it with another shape

In band replacement

A component that shows how to do an inband swap of an SVG element

Simple find and click game

Find and click

The component shows a circle which can be clicked. The first click starts a timer and after 10 clicks the elasped time is reported. Each click causes the circle to move.

Click and Drag with D3

Click and Drag

A component that shows a rectangle which can be dragged with the mouse

Start Simple

CSV Editor Application

CSV Editor

An app to upload csv files, edit in browser, and then download the updated file

Minimal Todo application

Minimal Todo App (SQLite)

A minimal todo app using SQLite backend.

Applications

Text Annotator

Text-Annotator

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

A Tic-Tac-Toe game

Tic-Tac-Toe

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

A 1D Cellular Automata

Cellular-Automata

A 1D Cellular Automata using FastHTML