Repository files navigation

MonsterUI is a UI framework for FastHTML for building beautiful web interfaces with minimal code. It combines the simplicity of Python with the power of Tailwind. Perfect for data scientists, ML engineers, and developers who want to quickly turn their Python code into polished web apps without the complexity of traditional UI frameworks. Follows semantic HTML patterns when possible.

MonsterUI adds the following Tailwind-based librariesFranken UI andDaisyUI to FastHTML, as well as Python'sMistletoe for Markdown,HighlightJS for code highlighting, andKatex for latex support.

To install this library, uses

pip install MonsterUI

Runpython file.py on this to start:

fromfasthtml.commonimport*frommonsterui.allimport*# Choose a theme color (blue, green, red, etc)hdrs=Theme.blue.headers()# Create your app with the themeapp,rt=fast_app(hdrs=hdrs)@rtdefindex():socials= (('github','https://github.com/AnswerDotAI/MonsterUI'),               ('twitter','https://twitter.com/isaac_flath/'),               ('linkedin','https://www.linkedin.com/in/isaacflath/'))returnTitled("Your First App",Card(H1("Welcome!"),P("Your first MonsterUI app",cls=TextPresets.muted_sm),P("I'm excited to see what you build with MonsterUI!"),footer=DivLAligned(*[UkIconLink(icon,href=url)foricon,urlinsocials])))serve()

Using LLMs for development is a best practice way to get started andexplore. While LLMs cannot code for you, they can be helpful assistants.You must check, refactor, test, and vet any code any LLM generates foryou - but they are helpful productivity tools. Take a look inside thellms.txt file to see links to particularly useful context files!

• llms.txt: Links to what is included
• llms-ctx.txt: MonsterUI Documentation Pages
• API list: API list for MonsterUI (included in llms-ctx.txt)
• llms-ctx-full.txt: Full context that includes all api reference pages as markdown

In addition you can add/md (for markdown) to a url to get a markdown representation and/rmd for rendered markdown representation (nice for looking to see what would be put into context.

To get started, check out:

1. Start by importing the modules as follows:

fromfasthtml.commonimport*frommonsterui.allimport*

2. Instantiate the app with the MonsterUI headers

app=FastHTML(hdrs=Theme.blue.headers())# Alternatively, using the fast_app methodapp,rt=fast_app(hdrs=Theme.slate.headers())

The color option can be any of the theme options available out of thebox

katex andhighlightjs are not included by default. To include them setkatex=True orhighlightjs=True when calling.headers. (i.e.Theme.slate.headers(katex=True))*

From here, you can explore the API Reference & examples to see how toimplement the components. You can also check out these demo videos to asa quick start guide:

• MonsterUIdocumentation page and Tutorialapp
• Isaac & Hamel :Building his website’s teampage
• Isaac & Audrey :Building a blog
• Isaac :Building a blog

More resources and improvements to the documentation will be added heresoon!