Styling

The @mdxe/hono runtime includes BuilderCSS, a dynamic CSS generation system for MDXLD documents.

Overview

BuilderCSS generates type-aware stylesheets customizable via URL query parameters:

/styles/{type}.css?color={color}&bg={background}&mode={mode}&font={font}&radius={radius}

Quick Example

<!-- Default theme -->
<link rel="stylesheet" href="/styles/landing.css">
 
<!-- Customized -->
<link rel="stylesheet" href="/styles/landing.css?color=purple&bg=gradient&mode=dark">

Query Parameters

MDX Frontmatter

---
$type: LandingPage
title: My Product
$style:
  color: purple
  background: gradient
  mode: auto
---

Full Documentation

For comprehensive documentation, see the BuilderCSS docs:

• URL Conventions - URL patterns and parameters
• Document Types - Available types and HTML structures
• Backgrounds - Background effects
• Colors - Color system
• CSS Variables - shadcn/ui compatible variables