Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/answerdotai/fasthtml

The fastest way to create an HTML app
https://github.com/answerdotai/fasthtml

Last synced: 19 days ago
JSON representation

The fastest way to create an HTML app

Awesome Lists containing this project

README 

        
# FastHTML



Welcome to the official FastHTML documentation.



FastHTML is a new next-generation web framework for fast, scalable web

applications with minimal, compact code. It’s designed to be:



- Powerful and expressive enough to build the most advanced, interactive

  web apps you can imagine.

- Fast and lightweight, so you can write less code and get more done.

- Easy to learn and use, with a simple, intuitive syntax that makes it

  easy to build complex apps quickly.



FastHTML apps are just Python code, so you can use FastHTML with the

full power of the Python language and ecosystem. FastHTML’s

functionality maps 1:1 directly to HTML and HTTP, but allows them to be

encapsulated using good software engineering practices—so you’ll need to

understand these foundations to use this library fully. To understand

how and why this works, please read this first:

[about.fastht.ml](https://about.fastht.ml/).



## Installation



Since `fasthtml` is a Python library, you can install it with:



``` sh

pip install python-fasthtml

```



In the near future, we hope to add component libraries that can likewise

be installed via `pip`.



## Usage



For a minimal app, create a file “main.py” as follows:






**main.py**



``` python

from fasthtml.common import *



app,rt = fast_app()



@rt('/')

def get(): return Div(P('Hello World!'), hx_get="/change")



serve()

```






Running the app with `python main.py` prints out a link to your running

app: `http://localhost:5001`. Visit that link in your browser and you

should see a page with the text “Hello World!”. Congratulations, you’ve

just created your first FastHTML app!



Adding interactivity is surprisingly easy, thanks to HTMX. Modify the

file to add this function:






**main.py**



``` python

@rt('/change')

def get(): return P('Nice to be here!')

```






You now have a page with a clickable element that changes the text when

clicked. When clicking on this link, the server will respond with an

“HTML partial”—that is, just a snippet of HTML which will be inserted

into the existing page. In this case, the returned element will replace

the original P element (since that’s the default behavior of HTMX) with

the new version returned by the second route.



This “hypermedia-based” approach to web development is a powerful way to

build web applications.



### Getting help from AI



Because FastHTML is newer than most LLMs, AI systems like Cursor,

ChatGPT, Claude, and Copilot won’t give useful answers about it. To fix

that problem, we’ve provided an LLM-friendly guide that teaches them how

to use FastHTML. To use it, add this link for your AI helper to use:



- [/llms-ctx.txt](https://docs.fastht.ml/llms-ctx.txt)



This example is in a format based on recommendations from Anthropic for

use with [Claude

Projects](https://support.anthropic.com/en/articles/9517075-what-are-projects).

This works so well that we’ve actually found that Claude can provide

even better information than our own documentation! For instance, read

through [this annotated Claude

chat](https://gist.github.com/jph00/9559b0a563f6a370029bec1d1cc97b74)

for some great getting-started information, entirely generated from a

project using the above text file as context.



If you use Cursor, type `@doc` then choose “*Add new doc*”, and use the

/llms-ctx.txt link above. The context file is auto-generated from our

[`llms.txt`](https://llmstxt.org/) (our proposed standard for providing

AI-friendly information)—you can generate alternative versions suitable

for other models as needed.



## Next Steps



Start with the official sources to learn more about FastHTML:



- [About](https://about.fastht.ml): Learn about the core ideas behind

  FastHTML

- [Documentation](https://docs.fastht.ml): Learn from examples how to

  write FastHTML code

- [Idiomatic

  app](https://github.com/AnswerDotAI/fasthtml/blob/main/examples/adv_app.py):

  Heavily commented source code walking through a complete application,

  including custom authentication, JS library connections, and database

  use.



We also have a 1-hour intro video:



The capabilities of FastHTML are vast and growing, and not all the

features and patterns have been documented yet. Be prepared to invest

time into studying and modifying source code, such as the main FastHTML

repo’s notebooks and the official FastHTML examples repo:



- [FastHTML Examples Repo on

  GitHub](https://github.com/AnswerDotAI/fasthtml-example)

- [FastHTML Repo on GitHub](https://github.com/AnswerDotAI/fasthtml)



Then explore the small but growing third-party ecosystem of FastHTML

tutorials, notebooks, libraries, and components:



- [FastHTML Gallery](https://gallery.fastht.ml): Learn from minimal

  examples of components (ie chat bubbles, click-to-edit, infinite

  scroll, etc)

- [Creating Custom FastHTML Tags for Markdown

  Rendering](https://isaac-flath.github.io/website/posts/boots/FasthtmlTutorial.html)

  by Isaac Flath

- [How to Build a Simple Login System in

  FastHTML](https://blog.mariusvach.com/posts/login-fasthtml) by Marius

  Vach

- Your tutorial here!



Finally, join the FastHTML community to ask questions, share your work,

and learn from others:



- [Discord](https://discord.gg/qcXvcxMhdP)