Skip to content
Back to What's New

DesignDev

Playground

Dieter Luypaert

The Playbook now has a Playground: an HTML editor next to a live preview that runs the same stylesheets CDS ships. You can check a class combination in seconds, without building an AEM page.

When to use it

  • Trying markup. Paste a fragment from your site, or start from the example it opens with, and edit it until it does what you expect.
  • Reporting a bug. Reproduce the problem, copy the URL and paste it into Teams or a Jira ticket. Whoever opens it sees exactly what you saw.
  • Following up on an example. Every HTML code sample on the Playbook has an “Open in playground” button beside its copy button. It opens the sample as shown, in the scheme tab you were viewing.

What the preview controls

The toolbar sets the brand, the colour scheme, the text direction and the preview width. You can drag the width, and the toolbar shows it in pixels, so you can report the exact size at which a layout breaks. A CSS tab beside the HTML takes overrides when you need them.

Your markup, your CSS and every toolbar setting are encoded in the URL’s hash. Nothing is saved on a server and there is no account. A link’s brand overrides the recipient’s own brand preference, so a brand-specific bug reproduces for whoever opens it. A preview wider than the recipient’s screen keeps its real width and scrolls, so nobody judges a shrunken picture.

Considerations

The preview runs in a sandboxed frame, isolated from the Playbook’s own styles and origin. What renders there is CDS alone, and pasted markup can’t reach the docs site.

Open the Playground and try it.