HTML

<h1 data-set-text='title'>A placeholder title</h1>

<p>Hello from <span data-set-text='name'>name of the templating engine</span>!<p>

<!-- Text substitution -->
<p data-set-text='content'>This paragraph is a placeholder.</p>

<!-- Attribute substitution -->
<p><a data-set-attribute='href newURL' href='/'>This should link to Aral’s homepage.</a></p>

<!-- Custom Formatter -->
<p><a data-set-attribute='href correctURLFragment fullURL' href='http://aralbalkan.com'>This should link to Ind.ie.</a></p>

<p>This should be Aral’s headshot:</p>

<!-- Placeholder image -->
<img data-set-attribute='src aralImageURL' src='http://placehold.it/600x600'>

<h2>Friends and their skills</h2>

<!-- Conditional -->
<ul data-set-if='friends'>
  <!-- Repeater -->
  <li data-set-repeat='friend friends'>
    <p><span data-set-text='friend.name'>Name</span> knows <span data-set-text='friend.skills'>skills</span>.</p>
</li>

  <!-- Dummy data -->
  <li data-set-dummy>
    <p>Some sample content.</p>
  </li>
  <li data-set-dummy>
    <p>That could help when styling the page.</p>
  </li>
</ul>

<!-- Conditional -->
<p data-set-if='not:friends'>No friends found.</p>

Data

data =
  title: 'Set sample'
  name: 'Set'
  content: 'This is a simple example to demonstrate Set, a templating engine for Express (node.js) and client‐side JavaScript.'
  newURL: 'http://aralbalkan.com'
  correctURLFragment: 'ind'
  aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
  friends:
  [
    {name: 'Laura', skills: 'design, development, illustration, speaking'},
    {name: 'Jo', skills: 'operations, cognitive psychology, sports coaching'},
    {name: 'Osky', skills: 'begging for food, looking cute, occasionally howling'}
  ]

Express 3 router (node.js)

exports.route = (request, response) ->
# Custom formatter
data.__set = {
  formatters:
    fullURL: (value) ->
      return 'http://' + value + '.com'
}
response.render 'simple', data