AI SummaryCursor Rules for FastHTML-Demo that explains how to use HTMX with FastHTML, including pythonic route references and parameter passing. Developers building interactive web apps with FastHTML and HTMX will benefit from these practical coding guidelines.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "fasthtml-demo — Cursor Rules" prompt rules to my project. Repository: https://github.com/AnkiHubSoftware/fasthtml-demo Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Cursor Rules for fasthtml-demo
File Upload Example
`python from base64 import b64encode from fasthtml.common import * from monsterui.all import * app, rt = fast_app(hdrs=Theme.blue.headers()) @rt def index(): inp = Card( H3("Drag and drop images here"), # HTMX for uploading multiple images Input(type="file",name="images", multiple=True, required=True, # Call the upload route on change post=upload, hx_target="#image-list", hx_swap="afterbegin", hx_trigger="change", # encoding for multipart hx_encoding="multipart/form-data",accept="image/*")) return DivCentered(inp, H3("👇 Uploaded images 👇"), Div(id="image-list")) async def ImageCard(image): contents = await image.read() # Create a base64 string img_data = f"data:{image.content_type};base64,{b64encode(contents).decode()}" # Create a card with the image return Card(H4(image.filename), Img(src=img_data, alt=image.filename)) @rt async def upload(images: list[UploadFile]): # Create a grid filled with 1 image card per image return Grid(*[await ImageCard(image) for image in images]) serve() `
Cascading DropDown Example
`python from fasthtml.common import * from monsterui.all import * from fasthtml import ft app, rt = fast_app(hdrs=Theme.blue.headers()) chapters = ['ch1', 'ch2', 'ch3'] lessons = { 'ch1': ['lesson1', 'lesson2', 'lesson3'], 'ch2': ['lesson4', 'lesson5', 'lesson6'], 'ch3': ['lesson7', 'lesson8', 'lesson9']} def mk_opts(nm, cs): return ( ft.Option(f'-- select {nm} --', disabled='', selected='', value=''), *map(ft.Option, cs)) @rt def get_lessons(chapter: str): return ft.Select(*mk_opts('lesson', lessons[chapter]), name='lesson') @rt def index(): chapter_dropdown = ft.Select( *mk_opts('chapter', chapters), name='chapter', hx_get=get_lessons, hx_target='#lessons', label='Chapter:') return Container( DivLAligned(FormLabel("Chapter:", for_="chapter"),chapter_dropdown), DivLAligned( FormLabel("Lesson:", for_="lesson"), Div(id='lessons')), cls='space-y-4') serve() `
Infinite Scroll Example
`python from fasthtml.common import * from monsterui.all import * import uuid column_names = ('name', 'email', 'id') def generate_contact(id: int) -> Dict[str, str]: return {'name': 'Agent Smith', 'email': f'void{str(id)}@matrix.com', 'id': str(uuid.uuid4()) } def generate_table_row(row_num: int) -> Tr: contact = generate_contact(row_num) return Tr(*[Td(contact[key]) for key in column_names]) def generate_table_part(part_num: int = 1, size: int = 20) -> Tuple[Tr]: paginated = [generate_table_row((part_num - 1) * size + i) for i in range(size)] paginated[-1].attrs.update({ 'get': f'page?idx={part_num + 1}', 'hx-trigger': 'revealed', 'hx-swap': 'afterend'}) return tuple(paginated) app, rt = fast_app(hdrs=Theme.blue.headers()) @rt def index(): return Titled('Infinite Scroll', Div(Table( Thead(Tr(*[Th(key) for key in column_names])), Tbody(generate_table_part(1))))) @rt def page(idx:int|None = 0): return generate_table_part(idx) `
Database Model
class Todo: title: str done: bool due: date id: int
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts