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,
    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_target=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, 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_target=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,
       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_target=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,
         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_target=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, 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_target=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!'))

source

Script

 Script (code:str='', id=None, cls=None, title=None, style=None,
         attrmap=None, valmap=None, ft_cls=<class 'fastcore.xml.FT'>,
         **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=<class 'fastcore.xml.FT'>, **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

def Nbsp():
    "A non-breaking space"
    return Safe('nbsp;')

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, 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_target=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)