Skip to main content

​
Welcome to Template Playground

The Accord Project Template Playground is a web-based platform that empowers you to learn and experiment with Accord Project functionalities in a user-friendly and interactive environment.
The Template Playground is deployed at https://playground.accordproject.org

​
What you can do

Template Playground bridges the gap between static documentation and active learning by providing an interactive environment where you can:

Edit templates in real-time

Modify TemplateMark, Concerto models, and JSON data with syntax highlighting and instant feedback

Preview rendered output

See your templates come to life with live preview and export to PDF

Share your work

Generate shareable links to collaborate with others or showcase your templates

Learn by example

Explore pre-built sample templates ranging from simple greetings to complex legal documents

​
Core technologies

The playground combines several Accord Project technologies to create powerful, dynamic templates:

​
TemplateMark

TemplateMark is the natural language text format for defining templates. It extends Markdown with dynamic variables and logic: 
### Welcome {{name}}!

Your employment with {{companyName}} will commence on {{startDate as "DD MMMM YYYY"}}.

{{#if probation}}
This offer includes a probation period of **{{probation.months}} months**.
{{/if}}

​
Concerto

Concerto is the data modeling language that defines the structure of your template data: 
namespace [email protected]

@template
concept EmploymentOffer {
  o String candidateName
  o String companyName
  o DateTime startDate
  o Probation probation optional
}

concept Probation {
  o Integer months
}

​
TypeScript formulas

Embed TypeScript logic directly in your templates for dynamic calculations: 
Your name has {{% return name.length %}} characters.

Order total: {{% return order.orderLines.map(ol => ol.price * ol.quantity).reduce((sum, cur) => sum + cur).toFixed(2); %}}

​
Template Engine

The Template Engine merges TemplateMark templates with JSON data to produce output documents in various formats including HTML and PDF.

​
Interactive features

The playground provides a complete development environment for working with templates:
  • Live editing: Edit your Concerto model, TemplateMark template, and JSON data in separate panels with Monaco editor
  • Syntax highlighting: Full syntax support for Concerto, Markdown, and JSON
  • Error checking: Real-time validation with a dedicated problem panel showing errors and warnings
  • Collapsible panels: Focus on what matters by collapsing the model or data panels
  • Sample templates: Load pre-built examples including employment offers, NDAs, payment receipts, and more
  • AI assistance: Get help writing templates with integrated AI chat (requires API key configuration)
  • Export options: Download your rendered output as PDF
  • Dark mode: Switch between light and dark themes for comfortable editing

​
Example templates

The playground includes several sample templates to help you get started:

Hello World

A simple template demonstrating basic variable substitution

Employment Offer Letter

A real-world example with monetary amounts, dates, and optional clauses

Customer Order

Demonstrates lists, joins, date formatting, and TypeScript calculations

Formula

Shows how to embed TypeScript formulas in templates

​
Getting started

Ready to create your first template? Follow the quickstart guide to learn the basics.

Quickstart

Create your first template in minutes

Accord Project Docs

Learn more about Accord Project technologies

​
Open source and community

The Accord Project Template Playground is an open-source project under the Linux Foundation. We welcome contributions from the developer community:
  • Feature implementation: Help build core functionalities
  • Learning modules: Create interactive tutorials
  • Documentation: Improve guides and examples
  • Bug fixes: Report issues and submit fixes

Join the community

Connect with other developers on Discord

Build docs developers (and LLMs) love

Get started for freeTalk to us