Javascript examples

Basic external Javascript lib wrappers

To expedite fast development, FastHTML comes with several built-in Javascript and formatting components. These are largely provided to demonstrate FastHTML JS patterns. There’s far too many JS libs for FastHTML to wrap them all, and as shown here the code to add FastHTML support is very simple anyway.

---

source

light_media

 light_media (css:str)

Render light media for day mode views

	Type	Details
css	str	CSS to be included in the light media query

light_media('.body {color: green;}')

<style>@media (prefers-color-scheme: light) {.body {color: green;}}</style>

---

source

dark_media

 dark_media (css:str)

Render dark media for nught mode views

	Type	Details
css	str	CSS to be included in the dark media query

dark_media('.body {color: white;}')

<style>@media (prefers-color-scheme:  dark) {.body {color: white;}}</style>

---

source

MarkdownJS

 MarkdownJS (sel='.marked')

Implements browser-based markdown rendering.

	Type	Default	Details
sel	str	.marked	CSS selector for markdown elements

Usage example here.

__file__ = '../../fasthtml/katex.js'

---

source

KatexMarkdownJS

 KatexMarkdownJS (sel='.marked', inline_delim='$', display_delim='$$',
                  math_envs=None)

	Type	Default	Details
sel	str	.marked	CSS selector for markdown elements
inline_delim	str	$	Delimiter for inline math
display_delim	str	$$	Delimiter for long math
math_envs	NoneType	None	List of environments to render as display math

KatexMarkdown usage example:

longexample = r"""
Long example:

$$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$
"""

app, rt = fast_app(hdrs=[KatexMarkdownJS()])

@rt('/')
def get():
    return Titled("Katex Examples", 
        # Assigning 'marked' class to components renders content as markdown
        P(cls='marked')("Inline example: $\sqrt{3x-1}+(1+x)^2$"),
        Div(cls='marked')(longexample)
    )

---

source

HighlightJS

 HighlightJS (sel='pre code', langs:str|list|tuple='python', light='atom-
              one-light', dark='atom-one-dark')

Implements browser-based syntax highlighting. Usage example here.

	Type	Default	Details
sel	str	pre code	CSS selector for code elements. Default is industry standard, be careful before adjusting it
langs	str | list | tuple	python	Language(s) to highlight
light	str	atom-one-light	Light theme
dark	str	atom-one-dark	Dark theme

---

source

SortableJS

 SortableJS (sel='.sortable', ghost_class='blue-background-class')

	Type	Default	Details
sel	str	.sortable	CSS selector for sortable elements
ghost_class	str	blue-background-class	When an element is being dragged, this is the class used to distinguish it from the rest

---

source

MermaidJS

 MermaidJS (sel='.language-mermaid', theme='base')

Implements browser-based Mermaid diagram rendering.

	Type	Default	Details
sel	str	.language-mermaid	CSS selector for mermaid elements
theme	str	base	Mermaid theme to use

app, rt = fast_app(hdrs=[MermaidJS()])
@rt('/')
def get():
    return Titled("Mermaid Examples", 
        # Assigning 'marked' class to components renders content as markdown
        Pre(Code(cls ="language-mermaid")('''flowchart TD
            A[main] --> B["fact(5)"] --> C["fact(4)"] --> D["fact(3)"] --> E["fact(2)"] --> F["fact(1)"] --> G["fact(0)"]
           ''')))

In a markdown file, just like a code cell you can define

```mermaid

    graph TD
    A --> B 
    B --> C 
    C --> E

```