Component extensions

Simple extensions to standard HTML components, such as adding sensible defaults

from pprint import pprint

---

source

A

 A (*c, hx_get=None, target_id=None, hx_swap=None, href='#', hx_vals=None,
    hx_target=None, id=None, cls=None, title=None, style=None,
    accesskey=None, contenteditable=None, dir=None, draggable=None,
    enterkeyhint=None, hidden=None, inert=None, inputmode=None, lang=None,
    popover=None, spellcheck=None, tabindex=None, translate=None,
    hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
    hx_trigger=None, hx_swap_oob=None, hx_include=None, hx_select=None,
    hx_select_oob=None, hx_indicator=None, hx_push_url=None,
    hx_confirm=None, hx_disable=None, hx_replace_url=None,
    hx_disabled_elt=None, hx_ext=None, hx_headers=None, hx_history=None,
    hx_history_elt=None, hx_inherit=None, hx_params=None,
    hx_preserve=None, hx_prompt=None, hx_request=None, hx_sync=None,
    hx_validate=None, **kwargs)

An A tag; href defaults to ‘#’ for more concise use with HTMX

A('text', ht_get='/get', target_id='id')

<a href="#" ht-get="/get" hx-target="#id">text</a>

---

source

AX

 AX (txt, hx_get=None, target_id=None, hx_swap=None, href='#',
     hx_vals=None, hx_target=None, id=None, cls=None, title=None,
     style=None, accesskey=None, contenteditable=None, dir=None,
     draggable=None, enterkeyhint=None, hidden=None, inert=None,
     inputmode=None, lang=None, popover=None, spellcheck=None,
     tabindex=None, translate=None, hx_post=None, hx_put=None,
     hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap_oob=None,
     hx_include=None, hx_select=None, hx_select_oob=None,
     hx_indicator=None, hx_push_url=None, hx_confirm=None,
     hx_disable=None, hx_replace_url=None, hx_disabled_elt=None,
     hx_ext=None, hx_headers=None, hx_history=None, hx_history_elt=None,
     hx_inherit=None, hx_params=None, hx_preserve=None, hx_prompt=None,
     hx_request=None, hx_sync=None, hx_validate=None, **kwargs)

An A tag with just one text child, allowing hx_get, target_id, and hx_swap to be positional params

AX('text', '/get', 'id')

<a href="#" hx-get="/get" hx-target="#id">text</a>

Forms

---

source

Form

 Form (*c, enctype='multipart/form-data', target_id=None, hx_vals=None,
       hx_target=None, id=None, cls=None, title=None, style=None,
       accesskey=None, contenteditable=None, dir=None, draggable=None,
       enterkeyhint=None, hidden=None, inert=None, inputmode=None,
       lang=None, popover=None, spellcheck=None, tabindex=None,
       translate=None, hx_get=None, hx_post=None, hx_put=None,
       hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap=None,
       hx_swap_oob=None, hx_include=None, hx_select=None,
       hx_select_oob=None, hx_indicator=None, hx_push_url=None,
       hx_confirm=None, hx_disable=None, hx_replace_url=None,
       hx_disabled_elt=None, hx_ext=None, hx_headers=None,
       hx_history=None, hx_history_elt=None, hx_inherit=None,
       hx_params=None, hx_preserve=None, hx_prompt=None, hx_request=None,
       hx_sync=None, hx_validate=None, **kwargs)

A Form tag; identical to plain ft_hx version except default enctype='multipart/form-data'

---

source

Hidden

 Hidden (value:Any='', id:Any=None, target_id=None, hx_vals=None,
         hx_target=None, cls=None, title=None, style=None, accesskey=None,
         contenteditable=None, dir=None, draggable=None,
         enterkeyhint=None, hidden=None, inert=None, inputmode=None,
         lang=None, popover=None, spellcheck=None, tabindex=None,
         translate=None, hx_get=None, hx_post=None, hx_put=None,
         hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap=None,
         hx_swap_oob=None, hx_include=None, hx_select=None,
         hx_select_oob=None, hx_indicator=None, hx_push_url=None,
         hx_confirm=None, hx_disable=None, hx_replace_url=None,
         hx_disabled_elt=None, hx_ext=None, hx_headers=None,
         hx_history=None, hx_history_elt=None, hx_inherit=None,
         hx_params=None, hx_preserve=None, hx_prompt=None,
         hx_request=None, hx_sync=None, hx_validate=None, **kwargs)

An Input of type ‘hidden’

---

source

CheckboxX

 CheckboxX (checked:bool=False, label=None, value='1', id=None, name=None,
            target_id=None, hx_vals=None, hx_target=None, cls=None,
            title=None, style=None, accesskey=None, contenteditable=None,
            dir=None, draggable=None, enterkeyhint=None, hidden=None,
            inert=None, inputmode=None, lang=None, popover=None,
            spellcheck=None, tabindex=None, translate=None, hx_get=None,
            hx_post=None, hx_put=None, hx_delete=None, hx_patch=None,
            hx_trigger=None, hx_swap=None, hx_swap_oob=None,
            hx_include=None, hx_select=None, hx_select_oob=None,
            hx_indicator=None, hx_push_url=None, hx_confirm=None,
            hx_disable=None, hx_replace_url=None, hx_disabled_elt=None,
            hx_ext=None, hx_headers=None, hx_history=None,
            hx_history_elt=None, hx_inherit=None, hx_params=None,
            hx_preserve=None, hx_prompt=None, hx_request=None,
            hx_sync=None, hx_validate=None, **kwargs)

A Checkbox optionally inside a Label, preceded by a Hidden with matching name

show(CheckboxX(True, 'Check me out!'))

Check me out!

---

source

Script

 Script (code:str='', id=None, cls=None, title=None, style=None,
         attrmap=None, valmap=None, ft_cls=None, auto_id=None, **kwargs)

A Script tag that doesn’t escape its code

---

source

Style

 Style (*c, id=None, cls=None, title=None, style=None, attrmap=None,
        valmap=None, ft_cls=None, auto_id=None, **kwargs)

A Style tag that doesn’t escape its code

Style and script templates

---

source

double_braces

 double_braces (s)

Convert single braces to double braces if next to special chars or newline

---

source

undouble_braces

 undouble_braces (s)

Convert double braces to single braces if next to special chars or newline

---

source

loose_format

 loose_format (s, **kw)

String format s using kw, without being strict about braces outside of template params

---

source

ScriptX

 ScriptX (fname, src=None, nomodule=None, type=None, _async=None,
          defer=None, charset=None, crossorigin=None, integrity=None,
          **kw)

A script element with contents read from fname

---

source

replace_css_vars

 replace_css_vars (css, pre='tpl', **kwargs)

Replace var(--) CSS variables with kwargs if name prefix matches pre

---

source

StyleX

 StyleX (fname, **kw)

A style element with contents read from fname and variables replaced from kw

---

source

Nbsp

 Nbsp ()

A non-breaking space

Surreal and JS

---

source

Surreal

 Surreal (code:str)

Wrap code in domReadyExecute and set m=me() and p=me('-')

---

source

On

 On (code:str, event:str='click', sel:str='', me=True)

An async surreal.js script block event handler for event on selector sel,p, making available parent p, event ev, and target e

---

source

Prev

 Prev (code:str, event:str='click')

An async surreal.js script block event handler for event on previous sibling, with same vars as On

---

source

Now

 Now (code:str, sel:str='')

An async surreal.js script block on selector me(sel)

---

source

AnyNow

 AnyNow (sel:str, code:str)

An async surreal.js script block on selector any(sel)

---

source

run_js

 run_js (js, id=None, **kw)

Run js script, auto-generating id based on name of caller if needed, and js-escaping any kw params

---

source

HtmxOn

 HtmxOn (eventname:str, code:str)

---

source

jsd

 jsd (org, repo, root, path, prov='gh', typ='script', ver=None, esm=False,
      **kwargs)

jsdelivr Script or CSS Link tag, or URL

Other helpers

---

source

Titled

 Titled (title:str='FastHTML app', *args, cls='container', target_id=None,
         hx_vals=None, hx_target=None, id=None, style=None,
         accesskey=None, contenteditable=None, dir=None, draggable=None,
         enterkeyhint=None, hidden=None, inert=None, inputmode=None,
         lang=None, popover=None, spellcheck=None, tabindex=None,
         translate=None, hx_get=None, hx_post=None, hx_put=None,
         hx_delete=None, hx_patch=None, hx_trigger=None, hx_swap=None,
         hx_swap_oob=None, hx_include=None, hx_select=None,
         hx_select_oob=None, hx_indicator=None, hx_push_url=None,
         hx_confirm=None, hx_disable=None, hx_replace_url=None,
         hx_disabled_elt=None, hx_ext=None, hx_headers=None,
         hx_history=None, hx_history_elt=None, hx_inherit=None,
         hx_params=None, hx_preserve=None, hx_prompt=None,
         hx_request=None, hx_sync=None, hx_validate=None, **kwargs)

An HTML partial containing a Title, and H1, and any provided children

---

source

Socials

 Socials (title, site_name, description, image, url=None, w=1200, h=630,
          twitter_site=None, creator=None, card='summary')

OG and Twitter social card headers

---

source

Favicon

 Favicon (light_icon, dark_icon)

Light and dark favicon headers

---

source

clear

 clear (id)

---

source

with_sid

 with_sid (app, dest, path='/')