FastHTML FAQ

FastHTML

Display code

def example()
  return Div(
            H1("FastHTML APP"),
            P("Let's do this"),
            cls="go"
            )

ft_code = example()
print(ft_code)
print(to_xml(ft_code))
ft_code.__repr__()
ft_code.__html__()
print(ft_code.__repr__())
print(ft_code.__html__())

Conversion between the fasttag representation and the raw html representation

Markdown

from fasthtml.common import *

hdrs = (MarkdownJS(), )
app = FastHTML(hdrs=hdrs)

content = """
Here are some _markdown_ elements.

- This is a list item
- This is another list item
- And this is a third list item

**Fenced code blocks work here.**
"""

# @rt('/')
@app.route("/")
def get(req):

    code_content = """
    Here are some code _markdown_ elements.

    - This is a list item
    - This is another list item
    - And this is a third list item

    **Fenced code blocks work here.**
    """

    normal_content = """
Here are some normal _markdown_ elements.

- This is a list item
- This is another list item
- And this is a third list item

**Fenced code blocks work here.**
    """
    return Titled("Markdown rendering example", Div(content,cls="marked"), Div(normal_content, cls="marked"), Div(code_content, cls="marked"))

serve()

Note the difference between normal_content and code_content! This is because the markdown parser will interpret the leading spaces before the code_content as code block!

<script type="module">
import { marked } from "https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js";
import { proc_htmx } from "https://cdn.jsdelivr.net/gh/answerdotai/fasthtml-js/fasthtml.js";
proc_htmx('.marked', e => e.innerHTML = marked.parse(e.textContent));</script>

Test in notebook

from fasthtml.common import *
# Setting up the Starlette test client
from starlette.testclient import TestClient

hdrs = (MarkdownJS(), )
app = FastHTML(hdrs=hdrs)

@app.route("/")
def get(req):
    content = """
Here are some _markdown_ elements.

- This is a list item
- This is another list item
- And this is a third list item

**Fenced code blocks work here.**
    """
    return Titled("Markdown rendering example", Div(content,cls="marked"))

client = TestClient(app)
print(client.get("/").text)
display(HTML(client.get("/").text))  # note that js-rendered markdown will not be shown in notebook output 

# Loading tailwind and daisyui
headers = (Script(src="https://cdn.tailwindcss.com"),
           Link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css"))

# Displaying a single message
d = Div(
    Div("Chat header here", cls="chat-header"),
    Div("My message goes here", cls="chat-bubble chat-bubble-primary"),
    cls="chat chat-start"
)

print(to_xml(d))

show(Html(*headers, d))

Convert HTML to FastTags

Getting started

Source repo

How to run the demo app under examples?

pip install .  # install from source
uvicorn examples.app:app --reload

examples

Tutorial app

Installation

brew install railway  # install railway Cli
pip install -U python-fasthtml  # install FastHTML
railway login  # login to `railway`

Move to the project directory (this is important, otherwise the railway up -c command will fail to recognize what type of project it is)

cd simple
railway init -n project_name
railway up -c  # this takes several minutes, wait for finish
railway domain
fh_railway_link
railway volume add -m /app/data