Version 1.0 An ECMA and CSS inspired template language

What Is Peach?

Peach is a powerful template language built ontop of JavaScript. It is designed to be familiar and simple to use. It’s syntax is heavily inspired by CSS with some sprinkling of ECMA. If you’re a developer who wants to reuse components and wants an interface that is flexible, peach may be for you.

Familiar Syntax

`btn { text {Get Peach} color {orange} href {/peach.zip} }

This is how a Template is defined in the .tl file. The syntax is similar to CSS with the exception that peach braces are used to contain a value, instead of ';' being a termininating character.

Nesting & Arrays

`section { `nav-item {[page {GitHub} ][ page {About} ][ page {Docs} ]} }

Here we see a template nested inside another template. The nav-item template also has defined an array of values for the ‘page’ key.

Simple Logic

`btn { <span class="%class|{}">%text|{Button}</span> }

Using a simple boolean operator; if a variable is empty/undefined, you can assign an alternative value using the pipe.

If/Else Statements

if (%href) { a href="http://%href" } else { span }

The length of an if statement is unlimited, you can have as many if then else's as you want. If statements can also contain any number of nested if statements. Operators && and || are also supported.

Browser Support

IE 9+