Blaze

Extremely easy to use

With Blaze, you can write your app with normal-looking templates in the language of your choice. You don't need to declare dependencies or write any code to manage how the screen updates: it's all automatic.

High performance

When your data changes, blaze makes the smallest possible update to just the piece of the DOM that needs to change or move and batches those updates to minimize page reflows. Since most apps only update a few pieces of data at a time, this approach leads to very efficient updates.

Works well with other libraries

Since blaze only makes the smallest possible updates to the DOM, apps written with blaze can take advantage of jQuery plugins or other JavaScript libraries that modify elements in your app — including the same elements managed by Blaze.

Examples

All of the code in your HTML files is compiled with Meteor's Spacebars compiler. Spacebars uses statements surrounded by double curly braces such as {{#each}} and {{#if}} to let you add logic and data to your views.

Example - ReactiveVar

You spent {{seconds}} seconds on this page.

var counter = new ReactiveVar(0);

Template.example.helpers({
  seconds: function () {
    return counter.get();
  }
});

setInterval(function () {
  counter.set(counter.get() + 1);
}, 1000);

// Render example
Blaze.render(Template.example, document.getElementById('Example'));

Example - Ajax

  {{# if users.length }}
    {{# each users }}
      

        
        
{{ user.username }}
      
    {{/each}}
  {{ else }}
    
Loading...
  {{/ if }}

var users = new ReactiveArray();

Template.users.helpers({
  users: function() {
    return users.list();
  }
});

Template.users.onRendered(function() {
  jQuery.getJSON('http://api.randomuser.me', {
    results: 10
  }, function(data) {
    users.set(data.results);
  });
});

// Render Users
Blaze.render(Template.users, document.getElementById('Users'));