About

Why this site exists

Slate Playground is a deliberately minimal site used to test the Slate headless CMS. It's three simple pages — home, blog, and this one — plus a sample post, all stitched together with vanilla HTML and CSS.

When the Slate snippet is active, this page's content gets replaced with whatever an editor writes in the Slate app. That lets us verify the snippet's page-detection, meta-injection, and dynamic-route logic in a controlled environment, without all the noise of a real marketing site.

How to connect

Create a site in the Slate app, copy its snippet_token, then append ?slate_site_id=<your token> to any URL on this site. The snippet stores it in localStorage so every subsequent navigation in that browser stays connected.

The whole point of a headless CMS is that the site and the content stay separate concerns. This page proves it: the HTML is static, the words are not.

What gets tested here

• Manifest fetch + slug matching against window.location.pathname
• Content area detection (the <main> selector wins first)
• Meta tag injection (title, description, og:image)
• Shell capture — header/footer stored in localStorage for new routes
• DOM-based rendering of every block type: heading, paragraph, quote, list, image, divider, service