Core

Setup

Headers

css, javascripts

Bootstrap

tooltip_js = Script("""
        document.addEventListener('htmx:load', function() {
            var tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            var tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
        });
    """)

---

source

bootstrap_hdrs

 bootstrap_hdrs (include_icon=True, include_tooltip=True)

Datatables for dynamic table

---

source

datatable_hdrs

 datatable_hdrs ()

Conditional Pico

---

source

cond_pico_hdrs

 cond_pico_hdrs ()

Copy TextArea js

---

source

copy_js

 copy_js ()

Autocomplete js

---

source

autocomplete_js

 autocomplete_js ()

Download csv/svg js

---

source

download_js

 download_js ()

show() in cell magic

Fasthtml updates in the latest version that in jupyter notebook, no need to use show() when importing fasthtml.jupyter

---

source

s

 s (line, cell)

Use %%s in a cell, so that you don’t have to wrap everything in show()

P('sdf')

sdf

Jupyter live on colab

Initiate ngrok tunnel

get public url that connect to localhost:8000

---

source

start_ngrok

 start_ngrok (token, port=8000)

---

source

kill_ngrok

 kill_ngrok ()

Disconnect the specified ngrok url

Find ngrok token in https://dashboard.ngrok.com/get-started/your-authtoken

# ask users to type ngrok token
# from getpass import getpass
# token = getpass("Type your token: ")

# or directly import token variable 
from ngrok_token import *

url = start_ngrok(token)

ngrok tunnel opened at: https://4a67-3-81-185-19.ngrok-free.app

Show Live page in jupyter cell

---

source

htmx

 htmx (url, path='')

An iframe which displays the HTMX application in a notebook.

Example:

# url = start_ngrok(YOUR_NGROK_TOKEN)
app,rt = fast_app(live=True)
server = JupyUvi(app)

@rt
def index():
    return Titled('Hello, Jupyter',
           P('Welcome to the FastHTML + Jupyter example'),
           Button('Click', hx_get='/click', hx_target='#dest'),
           Div(id='dest')
    )

@app.get
def click():
    return P('Hi')

htmx(url,'/') # click `visit site`

push() in cell magic

---

source

p

 p (line, cell)

Instead of wrapping everything in push, use %%p in a cell to do the same thing

# url = start_ngrok(YOUR_NGROK_TOKEN)
# app,rt = fast_app(exts='ws', live=True)
# server = JupyUvi(app) # JupyUvi is replaced with ws_client and setup_ws in the latest version
# push = Pusher(app)

# @app.get
# def click():
#     return P('hi')

# %%p
# A('click',hx_get='/click',hx_target='#dest'),Div(id='dest')

# HTMX_public(url)

# server.stop()

server.stop()
kill_ngrok()

ngrok tunnel killed