Playpen Guidance - A Quick Start

Getting Started with Playpen

1. Understand the canvas

The canvas is divided into two main areas: Edit and Preview

2. Choose a template

Click on the Template dropdown to explore available options, such as: Simple Card, Contact Card, Payment Card, Passport,...

Feel free to play around and see what works best for your use case.

3. Editing your template

Inside the Edit panel, there are two main tabs: Data and Design

3.1. Data Tab

- Write your data using the Amorfs format, basic rules:

· Use - to mean “has a”
· Use [ ] to describe details
· Each part ends with ]

Example:
Contact card [ 
- name [Jane Cooper]
- role [Sales manager]
- email [jane@work.com]
]

Want to understand this format more deeply?
Read More: Reading Your First Amorfs Document

- Edit directly on the card preview

While editing a card, you’ll see a live preview on the right side of the screen.
You can edit your card directly from this preview:
· Double-click any text on the card preview
· Edit or delete the text
· The data in the editor will update automatically

For quick fixes, this lets you adjust content visually without touching the format.
If you make a mistake, use Ctrl + Z (or Cmd + Z) to undo at any time.

3.2. Design Tab

This is where you control how your template looks using HTML and CSS to create an HTML snippet.
To connect your design with real data, Amorfs uses something called placeholders.

What is a Placeholder?

A placeholder is a marker in your design that tells the system: Replace this with real data.

It is always written inside double curly braces:

Standard format:
{{description}} for the description itself. This is needed for multi-language support.

{{description[?]} for any items under the description. Works for text and images.

Examples:
{{name}}: {{name[?]}} → displays name: Sam, Jack
{{avatar[?]}} → displays the actual image

📝 Important Rules (Must Remember):

1. Always use the correct format: {{expression...}}
   Avoid using single curly braces {expression}

2. Field names must match your Data
   The name inside the placeholder must be exactly the same as in your Data tab

3. Use image placeholders correctly
   - In HTML: inside src
   - In CSS: inside url(...)

4. Empty data won’t break your design
   If a field has no data, the layout will still stay intact.