<!-- The card in the preview is built from the markup below.
Change a word, a number, a color — it updates as you type. -->
<html class="--color-body=oklch(0.56_0.025_260) --color-accent=oklch(0.62_0.2_265)">
<body class="
ff-main c-body-700 bgc-body-50 @dark:bgc-black
p-6 mnh-vh fxcol-cc
">
<div class="cnt w-% fxcol-cc">
<div class="
w-% mxw-124 fxcol-sh
g-5 p-7 rad-5 br
brc-body-90 bgc-white @dark:bgc-body-75
">
<div class="fxcol-sh g-3">
<h1 class="
m-0 fs-6 lh-8 fw=800
-ls-0.03 c-body-950
">
Maple Playground
</h1>
<p class="m-0 fs-3.75 lh-6 c-body-600">
A live editor for Maple: type class names in the editor and the
preview redraws as you go. Good for learning the syntax, prototyping
a component, or sharing a demo.
</p>
</div>
<ul class="
list-none m-0 p-0 fxcol-sh
g-3
">
<li class="fxcol-ss g-1.5 xs:fxrow-cs xs:g-3">
<span class="
ifxrow-cc fxs-0
mnw-18 px-2 py-1 rad-1.5
br brc-body-100 bgc-body-75 ff-mono
fs-3 lh-4 c-accent-600
">Examples</span>
<p class="m-0 fs-3.5 lh-5 c-body-600">
Load another snippet — pricing card, theming, motion, or a grid
dashboard.
</p>
</li>
<li class="fxcol-ss g-1.5 xs:fxrow-cs xs:g-3">
<span class="
ifxrow-cc fxs-0
mnw-18 px-2 py-1 rad-1.5
br brc-body-100 bgc-body-75 ff-mono
fs-3 lh-4 c-accent-600
">CSS</span>
<p class="m-0 fs-3.5 lh-5 c-body-600">
Read the CSS these classes produced. The bar below the editor
counts every rule the page ships.
</p>
</li>
<li class="fxcol-ss g-1.5 xs:fxrow-cs xs:g-3">
<span class="
ifxrow-cc fxs-0
mnw-18 px-2 py-1 rad-1.5
br brc-body-100 bgc-body-75 ff-mono
fs-3 lh-4 c-accent-600
">Moon</span>
<p class="m-0 fs-3.5 lh-5 c-body-600">
Preview dark mode. One token shifts the whole tone scale, with no
second set of classes.
</p>
</li>
<li class="fxcol-ss g-1.5 xs:fxrow-cs xs:g-3">
<span class="
ifxrow-cc fxs-0
mnw-18 px-2 py-1 rad-1.5
br brc-body-100 bgc-body-75 ff-mono
fs-3 lh-4 c-accent-600
">Width</span>
<p class="m-0 fs-3.5 lh-5 c-body-600">
Resize the preview. Breakpoints answer to the container an element
sits in, not to the window.
</p>
</li>
<li class="fxcol-ss g-1.5 xs:fxrow-cs xs:g-3">
<span class="
ifxrow-cc fxs-0
mnw-18 px-2 py-1 rad-1.5
br brc-body-100 bgc-body-75 ff-mono
fs-3 lh-4 c-accent-600
">Share</span>
<p class="m-0 fs-3.5 lh-5 c-body-600">
Copy a link to what you built. The code rides inside the URL —
nothing is stored.
</p>
</li>
</ul>
<p class="
m-0 pt-4 brt brc-body-90
fs-3 lh-5 c-body-500
">
Select all, delete, and start your own. The Guide in the header
carries the full syntax reference.
</p>
</div>
</div>
</body>
</html> 0 CSS rules · 0 B generated at runtime
×