Asynchronous HTML5 and XML templates for Node.js and the browser.


Asynchronous HTML5 templating for Node.js and the browser. Photo by mufflevski.

Thoughts on Stencil? Join the Discussion.


<html xmlns:s="stencil" xmlns:o="layout:(title)">
  <s:value select="title" element="title"/>
  <s:value select="title" element="h1"/>

Pages laid out.

<div xmlns:s="stencil" xmlns:o="inc:fixtures/layout.stencil" title="Hello, World!">
  <o:head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></o:head>
  <o:body><p>Hello, World!</p></o:body>

The same templates run on the browser and in Node.js, so you can use the same logic you use to serve a generate page to refresh that page.

On the server, we create a template and serialize it to HTML5. You can also serialize to older HTML flavors for older browsers.

On the browser, when we genrerate Stencil XML, we simply import it into the existing DOM using Document.adoptNode.

Revisiting the ideas explorted in a Java based Stencil.

Stencil is asynchronous HTML5 templating for Node.js and the browser. It based on some ideas from yesteryear and some ideas from tomorrow.

This project evolved from work with Streamline and CoffeeScript. That work has been moved to a project named Pastiche.

Especially when dealing with a library that has a goal of being small, you're limited as to how much scaffolding you can offer developers. My approach for Stencil is to define three roles, application developer, web developer, and web designer, and say the first two roles labor to create a childlike sense of wonder in the latter role.

An application developer creates APIs that the web develoepr can query. The web developer wraps those APIs in tag libraries, so that the web designer can focus on semantic layout.

Changes for each release.

Released: Sun Jul 22 22:05:35 UTC 2012.

  • Push JSON update into DOM. #37.
  • Implement HTML serializer. #10.
  • Implement if. #31.
  • Reference xmldom dependency by SHA1.
  • Build on Windows. #36.
  • Implement expression function cache. #9.
  • Normalize URLs. #22. #13. #4. #3.
  • Implement each. #7.
  • Create #34.
  • Implement layouts.
  • Implement require. #15.
  • Build on Travis CI. #41. #19. #6.
  • Create XML comparision function #8. #5.
  • Implement value replacement. #2.
  • Create test directory. #35. #33. #21. #16. #1.