Animations

Text and Button Animations using HTMX.

Cascading Dropdowns

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

Click to Edit

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

Click to Load

Dynamically add rows to a table using HTMX.

Configurable Select

A searchable dropdown menu with a text box that allows user to add additional options to it via HTMX

Custom KeyBindings

Custom KeyBindings to trigger a component

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

Inline Field Validation

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

Loading Indicator

A loading indicator that shows when a button is pressed until content is loaded using HTMX's hx-indicator

Multi Image Upload

Upload multiple images. Inspired by a Daniel Corin blog post

Progress Bar

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

Show/Hide Button

A component that shows and hides content on click

Two Column Grid

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

Update Other Content 1

Solution 1 from the HTMX Updating Other Content demo, converted to FastHTML

Web Sockets

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

Altair Charts

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

Bloch Sphere

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

Great-Tables Tables

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

Matplotlib Charts

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

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

SVG plot

Interactive Seaborn SVG plot by Li (Lily) Cai

Audio

An example audio app

Chat Bubbles

A chat bubble component with no external dependencies

PDF

PDF Embed

Click and Drag

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

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.

In band replacement

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

Minimal Todo App (SQLite)

A minimal todo app using SQLite backend.

Intermediate Todo App (SQLite)

An intermediate todo app using SQLite backend.

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

CSV Editor

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

Tic-Tac-Toe

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