Get Started

1. Start an HTML page

<html>
  <head></head>
  <body></body>
</html>

2. Load the JS files

Add your favorite JS library: dojo, domassistant, extJS, jquery, mootools, prototype, sizzle, sly
and pure.js

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="pure.js"></script>
  </head>
  <body></body>
</html>

You can download them here

3. Add the HTML template

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="pure.js"></script>
  </head>
  <body>
    <div class="template">
      Hello <a></a>
    </div>
  </body>
</html>

4. Fetch the data

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="pure.js"></script>
  </head>
  <body>
    <div class="template">
      Hello <a></a>
    </div>
    <script>
      var jsonData = {
        who: 'BeeBole!',
        site: 'http://beebole.com'
      };
    </script>
  </body>
</html>

5. Run PURE and transform the JSON in HTML

<html>
  <head>
    <script src="jquery.js"></script>
    <script src="pure.js"></script>
  </head>
  <body>
    <div class="template">
      Hello <a></a>
    </div>
    <script>
      var jsonData = {
        who: 'BeeBole!',
        site: 'http://beebole.com'
      },
      //template commands
      directive = { 'a':'who', 'a@href':'site' };
      //select the template and transform it
      $('div.template').render(jsonData, directive)
    </script>
  </body>
</html>

6. The HTML result

The template:

<div class="template">
  Hello <a></a>
</div>

became:

<div class="template">
  Hello <a href="http://beebole.com">BeeBole!</a>
</div>

Without any crap or funny tags, just pure HTML, CSS and Javascript.
Grab the source code and start to play with it now!

Learn more about PURE