https://github.com/koaning/mohtml

DSL for HTML that targets Marimo
https://github.com/koaning/mohtml

Last synced: 22 days ago
JSON representation

DSL for HTML that targets Marimo

• Host: GitHub
• URL: https://github.com/koaning/mohtml
• Owner: koaning
• License: mit
• Created: 2024-11-15T19:43:46.000Z (27 days ago)
• Default Branch: main
• Last Pushed: 2024-11-15T20:44:35.000Z (27 days ago)
• Last Synced: 2024-11-15T20:46:25.705Z (27 days ago)
• Language: Python
• Homepage: https://koaning.github.io/mohtml/
• Size: 15.6 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-marimo - mohtml

README

        


### `mohtml`

This project is all about a DSL to write HTML in Python. 

> This work is *heavily* inspired by [FastHTML](https://fastht.ml/).

> 

> I mainly made this to see if I could reimplement it easily and if I might be able to hack together a lightweight variant of the idea for [Marimo](https://marimo.app/). If you feel like giving folks credit, feel free to join the [FastHTML Discord](https://discord.gg/qcXvcxMhdP) and give them a high-five first. 

## Installation

You can install this project via uv/pip: 

```python

uv pip install mohtml

```

## Quick demo

With that out of the way, let's have a quick look what what the DSL is like.

```python

# You can import any HTML element this way

from mohtml import a, p, div, script, h1

div(

    script(src="https://cdn.tailwindcss.com"),

    h1("welcome to my blog", klass="font-bold text-xl"),

    p("my name is vincent", klass="text-gray-500 text-sm"),

    a("please check my site", href="https://calmcode.io", klass="underline")

)

```

This code will generate the following HTML:

```html



 

 

 


  welcome to my blog

 

 


  my name is vincent

 

 

  please check my site

 



```


You can also render this HTML nicely from Marimo via: 

```python

myhtml = div(...)

mo.Html(f"{myhtml}")

```

## From here?

This is already pretty cool on it's own, but there are a few directions here. 

1. Maybe we can use this tool to make representations of objects nicer in Marimo.

2. Maybe we can come up with a nice way to turn these HTML objects into something reactive.

3. Maybe we can use this as an alternative for Jinja templates in some dases. Could be nice to make some simple dashboard-y UI components here.