| Component | Description | Actions |
|---|---|---|
| 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 |
|
| Chat in Expandable Footer | Chat in Expandable Footer using InteractJS |
|
| 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 |
|
| Delete Row | Delete a row from table via HTMX |
|
| Drag and Drop | Text and Button Animations using SortableJS. |
|
| Drag and Drop File System | Drag and Drop File System using SortableJS. |
|
| Drag and Drop File System in Nav Panel | Drag and Drop File System in Nav Panel using SortableJS. |
|
| Drag and Drop File System with Handle | Drag and Drop File System with Handle using SortableJS. |
|
| 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 |
| Component | Description | Actions |
|---|---|---|
| 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 |
|
| Observable Plot Bar Chart | How to display an Observable Plot bar chart in FastHTML, by David Gwyer. |
|
| 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 |
|
| Interactive Plotly Selection | Example showing how to create interactive Plotly charts that communicate with FastHTML routes when data points are selected, enabling dynamic updates and actions based on user selections |
|
| SVG plot | Interactive Seaborn SVG plot by Li (Lily) Cai |
| Component | Description | Actions |
|---|---|---|
| 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 |
| Component | Description | Actions |
|---|---|---|
| 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 |