Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

The fastest way to create an HTML app

License

NotificationsYou must be signed in to change notification settings

AnswerDotAI/fasthtml

Repository files navigation

Welcome to the official FastHTML documentation.

FastHTML is a new next-generation web framework for fast, scalable webapplications with minimal, compact code. It’s designed to be:

  • Powerful and expressive enough to build the most advanced, interactiveweb 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 iteasy to build complex apps quickly.

FastHTML apps are just Python code, so you can use FastHTML with thefull power of the Python language and ecosystem. FastHTML’sfunctionality maps 1:1 directly to HTML and HTTP, but allows them to beencapsulated using good software engineering practices—so you’ll need tounderstand these foundations to use this library fully. To understandhow and why this works, please read this first:fastht.ml/about.

Installation

Sincefasthtml is a Python library, you can install it with:

pip install python-fasthtml

In the near future, we hope to add component libraries that can likewisebe installed viapip.

Usage

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

main.py

fromfasthtml.commonimport*app,rt=fast_app()@rt('/')defget():returnDiv(P('Hello World!'),hx_get="/change")serve()

Running the app withpython main.py prints out a link to your runningapp:http://localhost:5001. Visit that link in your browser and youshould see a page with the text “Hello World!”. Congratulations, you’vejust created your first FastHTML app!

Adding interactivity is surprisingly easy, thanks to HTMX. Modify thefile to add this function:

main.py

@rt('/change')defget():returnP('Nice to be here!')

You now have a page with a clickable element that changes the text whenclicked. When clicking on this link, the server will respond with an“HTML partial”—that is, just a snippet of HTML which will be insertedinto the existing page. In this case, the returned element will replacethe original P element (since that’s the default behavior of HTMX) withthe new version returned by the second route.

This “hypermedia-based” approach to web development is a powerful way tobuild 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 fixthat problem, we’ve provided an LLM-friendly guide that teaches them howto use FastHTML. To use it, add this link for your AI helper to use:

This example is in a format based on recommendations from Anthropic foruse withClaudeProjects.This works so well that we’ve actually found that Claude can provideeven better information than our own documentation! For instance, readthroughthis annotated Claudechatfor some great getting-started information, entirely generated from aproject 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 ourllms.txt (our proposed standard for providingAI-friendly information)—you can generate alternative versions suitablefor other models as needed.

Next Steps

Start with the official sources to learn more about FastHTML:

  • About: Learn about the core ideas behindFastHTML
  • Documentation: Learn from examples how towrite FastHTML code
  • Idiomaticapp:Heavily commented source code walking through a complete application,including custom authentication, JS library connections, and databaseuse.

We also have a 1-hour intro video:

https://www.youtube.com/embed/Auqrm7WFc0I

The capabilities of FastHTML are vast and growing, and not all thefeatures and patterns have been documented yet. Be prepared to investtime into studying and modifying source code, such as the main FastHTMLrepo’s notebooks and the official FastHTML examples repo:

Then explore the small but growing third-party ecosystem of FastHTMLtutorials, notebooks, libraries, and components:

Finally, join the FastHTML community to ask questions, share your work,and learn from others:

Other languages and related projects

If you’re not a Python user, or are keen to try out a new language,we’ll list here other projects that have a similar approach to FastHTML.(Please reach out if you know of any other projects that you’d like tosee added.)

  • htmgo (Go): “htmgo is a lightweight pure go wayto build interactive websites / web applications using go & htmx. Bycombining the speed & simplicity of go + hypermedia attributes (htmx)to add interactivity to websites, all conveniently wrapped in pure go,you can build simple, fast, interactive websites without touchingjavascript. All compiled to a single deployable binary

If you’re just interested in functional HTML components, rather than afull HTMX server solution, consider:

  • fastcore.xml.FT: This is actuallywhat FastHTML uses behind the scenes
  • htpy: Similar tofastcore.xml.FT, but with asomewhat different syntax
  • elm-html:Elm’s built-in HTML library with a type-safe functional approach
  • hiccup: Popular library forrepresenting HTML in Clojure using vectors
  • hiccl: HTML generation libraryfor Common Lisp inspired by Clojure’s Hiccup
  • Falco.Markup: F# HTML DSL andweb framework with type-safe HTML generation
  • Lucid: Type-safe HTML generationfor Haskell using monad transformers
  • dream-html: Part of the Dream webframework for OCaml, provides type-safe HTML templating

For other hypermedia application platforms, not based on HTMX, take alook at:

  • Hotwire/Turbo: Rails-oriented frameworkthat similarly uses HTML-over-the-wire
  • LiveView:Phoenix framework’s solution for building interactive web apps withminimal JavaScript
  • Unpoly: Another HTML-over-the-wire frameworkwith progressive enhancement
  • Livewire: Laravel’s take on buildingdynamic interfaces with minimal JavaScript

[8]ページ先頭

©2009-2025 Movatter.jp