Skip to main content

​
Quickstart

This guide will walk you through creating your first template in the Accord Project Template Playground.

​
Access the playground

1

Open the playground

Navigate to https://playground.accordproject.org in your web browser.You’ll see the main interface with three editor panels on the left (Concerto Model, TemplateMark, JSON Data) and a Preview panel on the right.
2

Explore the interface

The playground loads with a default sample template. Take a moment to familiarize yourself with the layout:
  • Concerto Model: Defines the data structure for your template
  • TemplateMark: Contains your template text with dynamic variables
  • JSON Data: The actual data that will be merged with your template
  • Preview: Shows the rendered output in real-time

​
Try a sample template

The fastest way to learn is by exploring existing examples.
1

Load a sample

Click the dropdown menu next to “Concerto Model” in the top-left panel. You’ll see a list of sample templates.Select “Hello World” to load a simple example.
2

Examine the model

The Concerto Model defines a simple data structure:
namespace [email protected]

@template
concept HelloWorld {
    o String name
}
This model declares that our template expects a single name property of type String.
3

Review the template

The TemplateMark template uses the name variable:
> The one, the only...

### Hello {{name}}!
The {{name}} syntax tells the template engine to substitute the value from your JSON data.
4

Check the data

The JSON Data panel contains:
{
  "$class": "[email protected]",
  "name": "John Doe"
}
The $class property identifies which Concerto concept this data represents.
5

Modify the data

Change "John Doe" to your own name in the JSON Data panel. Watch the Preview update automatically!

​
Create your first template

Now let’s build a simple template from scratch.
1

Load a blank template

From the sample dropdown, select “Blank” to start with an empty template.
2

Define your model

In the Concerto Model panel, replace the contents with:
namespace [email protected]

@template
concept Greeting {
    o String recipient
    o String occasion
    o DateTime eventDate
}
This model defines a greeting with a recipient, occasion, and event date.
3

Write your template

In the TemplateMark panel, add:
# {{occasion}} Wishes

Dear {{recipient}},

Wishing you a wonderful **{{occasion}}** on {{eventDate as "MMMM D, YYYY"}}!

May this day bring you joy and happiness.

Best regards
Notice the date formatting using as "MMMM D, YYYY" - this formats the date nicely in the output.
4

Add your data

In the JSON Data panel, provide the values:
{
  "$class": "[email protected]",
  "recipient": "Alice",
  "occasion": "Birthday",
  "eventDate": "2025-03-15T00:00:00.000Z"
}
The $class value must match your namespace and concept name from the Concerto model.
5

View the result

Check the Preview panel to see your rendered greeting. Try changing the values and watch the preview update in real-time!

​
Add conditional logic

Let’s enhance the template with conditional content.
1

Update the model

Add an optional gift field to your model:
namespace [email protected]

@template
concept Greeting {
    o String recipient
    o String occasion
    o DateTime eventDate
    o String gift optional
}
2

Add conditional text

Update your template to include conditional content:
# {{occasion}} Wishes

Dear {{recipient}},

Wishing you a wonderful **{{occasion}}** on {{eventDate as "MMMM D, YYYY"}}!

{{#if gift}}
I've sent you a special {{gift}} to celebrate this occasion.
{{/if}}

May this day bring you joy and happiness.

Best regards
3

Test with and without the optional field

First, add the gift field to your JSON:
{
  "$class": "[email protected]",
  "recipient": "Alice",
  "occasion": "Birthday",
  "eventDate": "2025-03-15T00:00:00.000Z",
  "gift": "book"
}
Then try removing the "gift" line. The conditional section will disappear from the preview.

​
Use TypeScript formulas

Add dynamic calculations to your templates with embedded TypeScript.
1

Load the Formula sample

Select “Formula” from the sample dropdown to see a working example:
### Welcome {{name}}!

Your name has {{% return name.length %}} characters.
The {{% return ... %}} syntax lets you write TypeScript expressions that execute at render time.
2

Try the Customer Order sample

Load the “Customer Order” sample to see more advanced formulas:
Order total: {{% return '£' + order.orderLines.map(ol => ol.price * ol.quantity).reduce((sum, cur) => sum + cur).toFixed(2); %}}
This calculates the total cost by multiplying price × quantity for each line item and summing the results.

​
Share your template

Once you’re happy with your template, share it with others.
1

Generate a shareable link

Click the Share button in the top navigation bar (or look for the share icon in the toolbar).The playground will generate a unique URL containing your template, model, and data.
2

Copy and share

Copy the generated link and share it with colleagues or save it for later. Anyone with the link can view and edit your template.
Shared links encode all your template data in the URL, so no server-side storage is required. Keep in mind that very large templates may generate long URLs.

​
Download as PDF

Export your rendered template for distribution.
1

Click Download PDF

In the Preview panel header, click the Download PDF button.
2

Save the file

Your browser will download an agreement.pdf file containing the rendered output.

​
Next steps

Now that you’ve created your first template, explore more advanced features:

Employment Offer Letter

Load this sample to see how to work with monetary amounts and complex nested data structures

Lists and joins

Learn how to iterate over arrays and format lists in your templates

Concerto documentation

Deep dive into the Concerto modeling language

Template Engine

Explore the underlying template engine on GitHub

​
Troubleshooting

​
Errors in the problem panel

If you see errors at the bottom of the screen:
  • Model errors: Check that your Concerto syntax is correct and all types are properly defined
  • Template errors: Ensure all {{variables}} match properties in your model
  • Data errors: Verify that your JSON $class matches your namespace and concept, and all required fields are present

​
Preview not updating

If the preview doesn’t update after making changes:
  • Check the problem panel for errors that might be blocking rendering
  • Try clicking in the editor to ensure the change was saved
  • Refresh the page if issues persist

​
Need help?

Join Discord

Ask questions and get help from the Accord Project community

Build docs developers (and LLMs) love

Get started for freeTalk to us