Launch Master CSS using esm.sh

Paste the esm.sh CDN to instantly launch the Master CSS runtime engine.

Master CSS Runtime Rendering observes changes in DOM class names at browser runtime, generates corresponding CSS rules, and injects them into the running style sheet.

Fixed style cost

All features work out of the box with ~17KB transfer cost

Fully automatic

Capture any program-generated class names

CSS lifecycle

Generated on-demand and frees memory when not in use

Start in one step

Copy and paste to start styling your first element with Master CSS!

<!DOCTYPE html>
<html lang="en" style="display: none">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="style" href="https://esm.sh/@master/normal.css@rc?css">
    <link rel="stylesheet" href="https://esm.sh/@master/normal.css@rc?css">
    <link rel="modulepreload" href="https://esm.sh/@master/css-runtime@rc">
    <script type="module">
        import { initCSSRuntime } from 'https://esm.sh/@master/css-runtime@rc'
        initCSSRuntime({
            variables: {
                primary: '
#000000'
            }
        })
    </script>
</head>
<body>
    <h1 class="fg:primary font:40 font:heavy italic m:12x text:center">Hello World</h1>
</body>
</html>

Open your browser to watch the changes.

index.html