Getting Started

Installing Master CSS

Master CSS supports multiple installation strategies, giving you the flexibility to tailor your workflow based on project scale or scenario.

With no-install CDN, framework integrations, or standalone CLI — your call.

Copy and paste the CDN to instantly launch the runtime engine in your browser — no installation required.

Start in one step

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

<!DOCTYPE html><html lang="en" hidden><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="preload" as="script" href="https://cdn.master.co/css-runtime@rc">    <link rel="preload" as="style" href="https://cdn.master.co/normal.css">    <link rel="stylesheet" href="https://cdn.master.co/normal.css">    <script>        window.masterCSSConfig = {            variables: {                primary: '#000000'            }        }    </script>    <script src="https://cdn.master.co/css-runtime@rc"></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.

localhost:8080

Hello World

Get stuck? Check out our web framework or build tool guides for better starting points and recommendations.

Start in one step

Quickly create a blank Master CSS runtime project locally with Vite hot updates using the official CLI.

npm create @master/css@rc <project>cd <project>npm run dev --open

Get stuck? Check out the integrations guides for better starting points and recommendations.