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.

light_media

def light_media(
    css:str, # CSS to be included in the light media query
):

Render light media for day mode views

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

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

dark_media

def dark_media(
    css:str, # CSS to be included in the dark media query
):

Render dark media for night mode views

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

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

MarkdownJS

def MarkdownJS(
    sel:str='.marked', # CSS selector for markdown elements
):

Implements browser-based markdown rendering.

Usage example here.

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

KatexMarkdownJS

def KatexMarkdownJS(
    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)
    )

HighlightJS

def HighlightJS(
    sel:str='pre code:not([data-highlighted="yes"])', # 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
):

Implements browser-based syntax highlighting. Usage example here.

SortableJS

def SortableJS(
    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
):

MermaidJS

def MermaidJS(
    sel:str='.language-mermaid', # CSS selector for mermaid elements
    theme:str='base', # Mermaid theme to use
):

Implements browser-based Mermaid diagram rendering.

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

```

Other Formats