Learn Playground Basics

This document aims to get anyone up to speed with using our Design System Playground — even if you're not a developer and never written a line of UI code before!

The Basics

The Design System playground lets you experiment with the UI Framework right in your browser. The code you write in the Playground is what we call a "Snippet", and you can save these, share them with your co-workers, and even turn them into a "lifelike" prototype for demonstration or testing purposes!

There are very few things you need to know to create your first Snippet: a basic understanding of how HTML documents are structured is all you need, and the rest is just copying the pasting Design System code examples.
Of course, if you want to create a more complex, interactive, multi-step prototype, things might get a bit more tricky — but there are features in our Playground that helps you along the way.

Using HTML

These days, HTML is used to define the structure of a webpage: what semantic elements are there, how these elements are grouped, and in what order they appear.

Let's look at this simple example markup:

<div class="e-box">
  <p>Let's visit the Emarsys website!</p>
  <a href="https://emarsys.com" class="e-btn">Let's Go</a>
</div>
<p>So much fun!</p>

1. Grouping: We have a <div> element that contains a <p> and <a> element, and then another <p> afterward.
   • Most elements have an opening tag and a closing tag (<div> and </div>), and whatever goes between these tags are "contained" in that element.
2. Semantics: The <div> is semantically an empty container ("division"), the <p> elements are "paragraphs", and the <a> element is a link ("anchor").
3. Styling: we apply specific CSS style classes on elements by giving them "classes".
   • The <div> has an e-box class, which turns that element into our Box component (white background, gray border, rounded corners, etc.).
   • The <a> element has an e-btn class, which turns it into our Button component.
   • CSS can also define rules for classless elements as well, like the <p> elements here.
   • It's good practice to separate the visual style (CSS) from the semantic structure (HTML), but we usually still need to define what CSS classes an element should use in the markup.
4. Order: the <div> will appear above the second <p>, as it comes first in the markup. Similarly, the "Let's visit Emarsys!" text will appear above the button.
5. Attributes: just like "class" that defines which CSS style class to use, there are other attributes. <a> has an "href" ("hypertext reference") attribute, which defines the web address the link points to. Different elements can have different attributes!

Using CSS

CSS rules describe how an element should look like. For example, our Button component has specific CSS rules that describe its background-color, its font-size, its margin and padding, its border style, etc.

But if you're using components from our Design System, you don't need to write custom CSS rules, as our components come with built-in styles. For example, simply adding our <e-dropdown> component will look just right without any extra CSS code.

Using JavaScript

With JavaScript, we can add specific "behaviour" and logic to our elements. Now we're talking real programming!

For that reason, writing JavaScript code is more complex than writing HTML and CSS. However, we've included a framework called Alpine.JS that helps adding logic to our UI in a relatively simple way.

For creating prototypes and testing "lifelike" UI concepts, adding interactivity with JavaScript can help a lot!

Creating a Snippet

Visiting the Playground site lands you on a blank document — you can start writing code and see the live preview right away!

If you want to save and share your Snippet, you need to sign up for and account — luckily it's super easy and takes no time!

Once you have an account, you can save your snippets by clicking the "Save" button or hitting Ctrl + S or Cmd + S.

Inserting Code Examples From The Design System

There are multiple ways to insert code examples from our Design System:

1. Visit the "Examples" page of a Component right here in the Design System website, and click "Copy HTML" to copy the code (or click "Open in Playground" to open the code example in a blank Playground Snippet).
2. In the Code editor panel's toolbar, choose Insert / Insert Component…, and search for the code example you want to insert.
3. You can also hit Ctrl + I or Cmd + I to open up the Insert Component dialog.

Once the code example is inserted, you can see the results instantly in the Preview panel. (If for some reason you cannot, try reloading the Preview by hitting Ctrl + R or Cmd + R)

(Note: some code examples require extra JavaScript code! Check the code example on the Design System website to see if any JavaScript is required)

Sharing Your Snippet With Others

Once your Snippet is ready, save it, and click the "Share" button in the page's main toolbar to open the Sharing dialog.

You need to turn on sharing to make the Snippet public and accessible for anyone with the link.

If you want to make the Snippet private again, just turn off sharing here.

Creating a Multi-Page Prototype

Beside simple Snippets, you can link together multiple Snippets to make a multi-page prototype.

Making the Snippet Look Like an Emarsys Page

You can make your Snippet look more "lifelike" by using an Emarsys layout blueprint. Check out the "Structure" section in the Design System for various page layouts, or search for "Blueprint" in the Insert Component dialog in Playground.

Linking to Other Snippets

Choose Insert / Insert Snippet Link…, and pick the Snippet you want to link to. This will insert something like navigateToSnippet('0123456789abcdefghijklmn'). You can use this code in multiple ways:

• Simple link: <a href="navigateToSnippet('0123456789abcdefghijklmn')">Click</a>
• JavaScript click event: <span onClick="navigateToSnippet('0123456789abcdefghijklmn')">Click</span>
• Alpine.js trigger: <e-datagrid-item-action icon="pencil" tooltip="Edit" @trigger="navigateToSnippet('0123456789abcdefghijklmn')">

Sharing Your Prototype

Sharing a Snippet as a prototype is similar to regular sharing, except this way the code editor won't be shown. This is ideal for presentations or testing!

To open the Snippet as a Prototype in a new tab, click the "Prototype" button in the page's main toolbar. (Note: you need to turn on sharing first, to make your Snippet publicly accessible!)

To easily copy the link to the Prototype, just click on the "…" button next to the "Prototype" button, and choose "Copy Link to Prototype".

To make the Prototype private, simply turn off sharing in the "Sharing" dialog.