FastHTML

欢迎来到 FastHTML 官方文档。

FastHTML 是一款面向新一代的 Web 框架，用于构建快速、可扩展的 Web 应用程序，同时保持代码极简、紧凑。它旨在：

• 功能强大且富有表现力，足以构建您所能想象到的最先进、最具交互性的 Web 应用。
• 速度快、轻量级，让您编写更少的代码却能完成更多工作。
• 易于学习和使用，拥有简单直观的语法，使您能够快速构建复杂的应用。

FastHTML 应用程序本质上就是 Python 代码，因此您可以充分利用 Python 语言及其生态系统来使用 FastHTML。FastHTML 的功能与 HTML 和 HTTP 1:1 对应，但允许通过良好的软件工程实践对其进行封装——因此，要充分使用该库，您需要理解这些基础知识。要了解其工作原理及原因，请先阅读以下内容： fastht.ml/about。

安装

由于 fasthtml 是一个 Python 库，您可以通过以下命令安装它：

pip install python-fasthtml

在不久的将来，我们希望添加同样可以通过 pip 安装的组件库。

使用

对于一个最小的应用程序，创建名为 “main.py” 的文件，内容如下：

from fasthtml.common import *

app,rt = fast_app()

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

serve()

运行该应用程序，执行 python main.py，终端会输出一个指向您正在运行的应用程序的链接：http://localhost:5001。在浏览器中访问该链接，您应该会看到一个显示“Hello World!”的页面。恭喜您，您刚刚创建了您的第一个 FastHTML 应用程序！

得益于 HTMX，添加交互性变得出奇地容易。修改文件以添加以下函数：

@rt('/change')
def get(): return P('Nice to be here!')

现在您有一个带有可点击元素的页面，点击后文本会发生变化。当您点击该链接时，服务器将响应一个“HTML 片段”——即仅一段 HTML 代码，它会被插入到现有页面中。在这种情况下，返回的元素将替换掉原来的 <p> 元素（因为这是 HTMX 的默认行为），并用第二个路由返回的新版本替换。

这种基于超媒体的 Web 开发方式是构建 Web 应用程序的强大途径。

从 AI 获取帮助

由于 FastHTML 相较于大多数大型语言模型来说较为新颖，像 Cursor、ChatGPT、Claude 和 Copilot 等 AI 系统并不会给出关于它的有用答案。为了解决这个问题，我们提供了一份对 LLM 友好的指南，教它们如何使用 FastHTML。要使用它，请将以下链接添加到您的 AI 助手上下文中：

• /llms-ctx.txt

该示例采用 Anthropic 推荐的格式，适用于 Claude Projects。这种方式效果非常好，以至于我们发现 Claude 提供的信息甚至比我们自己的文档还要好！例如，请参阅这篇由上述文本文件作为上下文生成的注释版 Claude 对话： https://gist.github.com/jph00/9559b0a563f6a370029bec1d1cc97b74，其中包含了大量入门信息。

如果您使用 Cursor，只需输入 @doc 并选择“添加新文档”，然后使用上面提到的 /llms-ctx.txt 链接。该上下文文件是由我们的 llms.txt 自动生成的——这是我们提议的用于提供 AI 友好信息的标准；您也可以根据需要生成适用于其他模型的替代版本。

后续步骤

请从官方资源开始，深入了解 FastHTML：

• 关于：了解 FastHTML 的核心理念
• 文档：通过示例学习如何编写 FastHTML 代码
• 惯用法应用：包含大量注释的源代码，详细展示了完整的应用程序，包括自定义认证、JS 库集成以及数据库使用等内容。

我们还准备了一段一小时的介绍视频：

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

FastHTML 的能力非常强大且仍在不断扩展，目前并非所有特性和模式都已被记录下来。请做好投入时间研究和修改源代码的准备，例如 FastHTML 主仓库中的笔记本以及官方的 FastHTML 示例仓库：

• FastHTML 示例仓库 on GitHub
• FastHTML 仓库 on GitHub

接下来，您可以探索日益壮大的第三方生态体系，其中包括 FastHTML 教程、笔记本、库和组件：

• FastHTML 画廊：通过简单的组件示例学习（如聊天气泡、点击编辑、无限滚动等）
• 为 Markdown 渲染创建自定义 FastHTML 标签 —— 作者：Isaac Flath
• 如何在 FastHTML 中构建一个简单的登录系统 —— 作者：Marius Vach
• 您的教程可以放在这里！

最后，加入 FastHTML 社区，提出问题、分享您的作品，并向他人学习：

• Discord

其他语言及相关项目

如果你不是 Python 用户，或者想尝试一种新语言，我们会在这里列出一些与 FastHTML 采用类似思路的项目。（如果你知道其他值得添加的项目，请随时联系我们。）

• htmgo (Go)：“htmgo 是一种轻量级、纯 Go 的方式，用于使用 Go 和 htmx 构建交互式网站或 Web 应用程序。通过将 Go 的速度与简洁性，结合超媒体属性（htmx）来为网站添加交互功能，并且所有这些都以纯 Go 实现，你可以在完全不接触 JavaScript 的情况下，构建简单、快速、交互式的网站。最终会编译成一个可部署的二进制文件”

如果你只对函数式的 HTML 组件感兴趣，而不是完整的 HTMX 服务器解决方案，可以考虑：

• fastcore.xml.FT：这实际上是 FastHTML 背后使用的实现。
• htpy：与 fastcore.xml.FT 类似，但语法略有不同。
• elm-html：Elm 内置的 HTML 库，采用类型安全的函数式编程方式。
• hiccup：在 Clojure 中使用向量表示 HTML 的流行库。
• hiccl：受 Clojure 的 Hiccup 启发，专为 Common Lisp 设计的 HTML 生成库。
• Falco.Markup：F# 的 HTML DSL 及 Web 框架，支持类型安全的 HTML 生成。
• Lucid：使用 Monad 转换器为 Haskell 提供类型安全的 HTML 生成。
• dream-html：作为 Dream Web 框架的一部分，专为 OCaml 提供类型安全的 HTML 模板。

对于其他基于超媒体而非 HTMX 的应用平台，可以看看：

• Hotwire/Turbo：面向 Rails 的框架，同样采用“HTML-over-the-wire”模式。
• LiveView：Phoenix 框架提供的解决方案，用于在尽量减少 JavaScript 的情况下构建交互式 Web 应用。
• Unpoly：另一个采用“HTML-over-the-wire”并支持渐进增强的框架。
• Livewire：Laravel 提供的一种方式，用于在尽量减少 JavaScript 的情况下构建动态界面。

FastHTML 快速上手指南

FastHTML 是一个新一代的 Python Web 框架，旨在通过极简的代码构建快速、可扩展且交互性强的 Web 应用。它完美融合了 Python 的强大功能与 HTMX 的超媒体交互能力，让你无需编写 JavaScript 即可打造动态页面。

环境准备

• 操作系统：Windows、macOS 或 Linux
• Python 版本：建议安装 Python 3.10 或更高版本
• 前置依赖：无需额外系统级依赖，仅需标准的 Python 环境

安装步骤

使用 pip 直接安装 FastHTML：

pip install python-fasthtml

提示：国内开发者若遇到下载速度慢的问题，可使用国内镜像源加速安装：

pip install python-fasthtml -i https://pypi.tuna.tsinghua.edu.cn/simple

基本使用

1. 创建最小化应用

新建一个名为 main.py 的文件，写入以下代码：

from fasthtml.common import *

app,rt = fast_app()

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

serve()

2. 运行应用

在终端中执行：

python main.py

启动后，终端会输出类似 http://localhost:5001 的地址。在浏览器中访问该链接，你将看到显示"Hello World!"的页面。

3. 添加交互功能

FastHTML 内置了对 HTMX 的支持，只需添加一个新的路由即可实现页面无刷新更新。在 main.py 中追加以下函数：

@rt('/change')
def get(): return P('Nice to be here!')

保存文件并重启应用（或启用自动重载）。现在点击页面上的文字，内容将动态变更为"Nice to be here!"，整个过程无需编写任何 JavaScript 代码。

4. 借助 AI 辅助开发

由于 FastHTML 较新，通用大模型可能缺乏相关知识。建议在使用 Cursor、Claude 等 AI 编程助手时，添加官方提供的上下文文件以提升回答质量：

• 上下文地址：https://www.fastht.ml/docs/llms-ctx.txt

在 Cursor 中配置方法：输入 @doc -> 选择"Add new doc" -> 粘贴上述链接。