audrey.feldroy.com

The experimental notebooks of Audrey M. Roy Greenfeld. This website and all its notebooks are open-source at github.com/audreyfeldroy/audrey.feldroy.com

# Troubleshooting MonsterUI on This Site

by Audrey M. Roy Greenfeld | Thu, Jan 23, 2025

My first MonsterUI notebook wasn't rendering correctly. I started to debug it in this notebook, but ended up just using this as a test notebook for the next one.

from fasthtml.common import *
from monsterui.all import *

Understand the Problem

MonsterUI Buttons and Links is the notebook with the problem.

Let's start with a subset of the problem: the H1 text "MonsterUI Buttons and Links" is showing up as normal text.

H1("Hi")


<h1 class="uk-h1 ">Hi</h1>

h1(('Hi',),{'class': 'uk-h1 '})

show(H1("Hi"))

Hi

A("My Blog", href="https://audrey.feldroy.com")


<a href="https://audrey.feldroy.com">My Blog</a>

a(('My Blog',),{'href': 'https://audrey.feldroy.com'})

Solution in Next Notebook

I ended up rewriting the MonsterUI rendering part of main.py from scratch in https://audrey.feldroy.com/nbs/2025-01-23-This-Site-Is-Now-Powered-by-This-Blog-Post

Sometimes it's just easier to rewrite than debug.

Update 2025-01-30

I'm using this notebook again to troubleshoot MonsterUI as I update my site.

c = Card("This is a plain Card")
c


<div class="uk-card ">

  <div class="uk-card-body space-y-6">This is a plain Card</div>

</div>

div((div(('This is a plain Card',),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})

show(c)

This is a plain Card

c2 = Card("This is a Card with added Tailwind background styles to make it greeen", cls="bg-green-500 dark:bg-green-400")

show(c2)

This is a Card with added Tailwind background styles to make it greeen