60 second setup

Create a file called index.html and paste in the following:


<!doctype html>
<html lang='en-GB'>
  <meta charset='utf-8'>
  <title>Ractive test</title>

  <h1>Ractive test</h1>

       1. This is the element we'll render our Ractive to.
  <div id='container'></div>

       2. You can load a template in many ways. For convenience, we'll include it in
       a script tag so that we don't need to mess around with AJAX or multiline strings.
       Note that we've set the type attribute to 'text/ractive' - though it can be
       just about anything except 'text/javascript'
  <script id='template' type='text/ractive'>
    <p>Hello, {{name}}!</p>

       3. You can always get the most recent stable version from the URL below.
       If you want the newest features (unstable!), use the 'edge' version instead:


       If you need IE8 support, change 'ractive' to 'ractive-legacy'.
  <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

       4. We've got an element in the DOM, we've created a template, and we've
       loaded the library - now it's time to build our Hello World app.
    var ractive = new Ractive({
      // The `el` option can be a node, an ID, or a CSS selector.
      el: '#container',

      // We could pass in a string, but for the sake of convenience
      // we're passing the ID of the <script> tag above.
      template: '#template',

      // Here, we're passing in some initial data
      data: { name: 'world' }

Now, open the page in a browser. You should see a 'Hello, world!' message. If you open the console and type ractive.set('name', 'Jim') the text will update.

That's it - you're in business!

Next steps