HTML

<h1 id='title'>A placeholder title</h1>
<p>Hello from <span data-content="name">name</span>!<p>

<p class="target">This paragraph is a placeholder.</p>

<p><a href='/'>This should link to Aral’s homepage.</a></p>

<p><a href='http://aralbalkan.com'>This should link to Ind.ie.</a></p>

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

<img data-content='photo' src='http://placehold.it/600x600'>

<h2>Friends and their skills</h2>

<ul class='friends-list'>
  <li class='friend'>
    <p><span class='name'>Name</span> knows <span class='skills'>skills</span>.</p>
  </li>
</ul>

<p class='no-friends-warning'>No friends found.</p>

Data + Map

data =
  title: 'Express 3‐Plates sample'
  name: 'Express 3‐Plates'
  content: 'This is a simple example to demonstrate Express 3‐Plates.'
  newURL: 'http://aralbalkan.com'
  correctURLFragment: 'ind.ie'
  aralImageURL: 'http://aralbalkan.com/images/aral.jpg'
  friend:
  [
    {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'}
  ]

  map = plates.Map()

  # Tag
  # Note: Bug in plates: If title tag already has text content it is not replaced.
  map.tag('title').use('title')

  # By class
  map.class('target').to('content')

  # By ID
  map.where('id').is('title').to('title')

  # By attribute selector
  map.where('data-content').is('name').to('name')

  # Replace an attribute if it is a match
  map.where('href').is('/').insert('newURL')

  # Partial value replacement
  map.where('href').has(/aralbalkan.com/).insert('correctURLFragment')

  # Arbitrary attributes
  map.where('data-content').is('photo').use('aralImageURL').as('src')

  # Collections
  # Note: class name must match the data name exactly
  map.class('friend').use('friend')
  map.class('name').use('name')
  map.class('skills').use('skills')

  # Conditionals
  if friends
    map.class('no-friends-warning').remove()
  else
    map.class('friends-list').remove()

Express 3 router (node.js)

exports.route = (request, response) ->
  response.render 'simple', { data: data, map: map }