> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/meteor/meteor/llms.txt
> Use this file to discover all available pages before exploring further.
# Blaze Integration
> Meteor's powerful reactive templating system
Blaze is Meteor's built-in reactive templating engine. It provides a simple, intuitive way to create dynamic user interfaces with automatic reactivity and live updates.
Comprehensive Blaze documentation is available at the [Blaze Community Site](http://blazejs.org/guide/introduction.html).
## Installation
Blaze is included by default when you create a new Meteor app. To add it to an existing project:
```bash theme={null}
meteor add blaze-html-templates
```
For reactive variables:
```bash theme={null}
meteor add reactive-var
```
## Quick Start
Create a Blaze app:
```bash theme={null}
meteor create my-app --blaze
```
## Basic Structure
Blaze uses HTML templates with special syntax for dynamic content:
```html theme={null}
My Meteor App
Welcome to Meteor!
{{> hello}}
{{> info}}
Click Me
You've pressed the button {{counter}} times.
Learn Meteor!
```
## Template Helpers and Events
Add behavior to templates with JavaScript:
```javascript theme={null}
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
```
## Component-Based Structure
Organize Blaze templates as reusable components:
```
/imports
/ui
/components
/hello
hello.html
hello.js
/info
info.html
info.js
/layouts
/body
body.html
body.js
```
### Component Example
```html theme={null}
Welcome to Meteor!
Click Me
You've pressed the button {{counter}} times.
```
```javascript theme={null}
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import './hello.html';
Template.hello.onCreated(function helloOnCreated() {
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
instance.counter.set(instance.counter.get() + 1);
},
});
```
## Working with Collections
Blaze automatically reacts to data changes:
```html theme={null}
Learn Meteor!
```
```javascript theme={null}
import { Links } from '/imports/api/links/links.js';
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import './info.html';
Template.info.onCreated(function () {
Meteor.subscribe('links.all');
});
Template.info.helpers({
links() {
return Links.find({});
},
});
Template.info.events({
'submit .info-link-add'(event) {
event.preventDefault();
const target = event.target;
const title = target.title.value;
const url = target.url.value;
Meteor.callAsync('links.insert', title, url)
.then(() => {
target.title.value = '';
target.url.value = '';
})
.catch((error) => {
alert(error.error || error.message);
});
},
});
```
## Template Lifecycle
Blaze provides lifecycle callbacks for template instances:
```javascript theme={null}
Template.myTemplate.onCreated(function () {
// Called when template instance is created
this.counter = new ReactiveVar(0);
this.autorun(() => {
// Reactive computation
});
});
Template.myTemplate.onRendered(function () {
// Called when template is rendered to DOM
this.$('input').focus();
});
Template.myTemplate.onDestroyed(function () {
// Called when template is removed
// Cleanup happens automatically for subscriptions and autorun
});
```
## Template Syntax
### Data Context
```html theme={null}
{{title}}
{{user.name}}
{{formatDate createdAt}}
```
### Control Flow
```html theme={null}
{{#if isLoggedIn}}
Welcome, {{username}}!
{{else}}
Please log in.
{{/if}}
{{#each tasks}}
{{title}}
{{else}}
No tasks found.
{{/each}}
{{#with currentUser}}
{{username}}
{{email}}
{{/with}}
```
### Template Inclusion
```html theme={null}
{{> taskItem}}
{{> taskItem task=currentTask}}
{{> userProfile user=currentUser editable=true}}
```
## Reactivity
### Reactive Variables
```javascript theme={null}
import { ReactiveVar } from 'meteor/reactive-var';
Template.example.onCreated(function () {
this.searchQuery = new ReactiveVar('');
});
Template.example.helpers({
results() {
const query = Template.instance().searchQuery.get();
return Items.find({ name: new RegExp(query, 'i') });
},
});
Template.example.events({
'input .search'(event, instance) {
instance.searchQuery.set(event.target.value);
},
});
```
### Reactive Dictionaries
```javascript theme={null}
import { ReactiveDict } from 'meteor/reactive-dict';
Template.example.onCreated(function () {
this.state = new ReactiveDict();
this.state.set('loading', false);
this.state.set('filter', 'all');
});
Template.example.helpers({
isLoading() {
return Template.instance().state.get('loading');
},
currentFilter() {
return Template.instance().state.get('filter');
},
});
```
## Subscriptions
```javascript theme={null}
Template.taskList.onCreated(function () {
// Subscribe to data
this.subscribe('tasks');
// Subscribe with parameters
this.autorun(() => {
const listId = FlowRouter.getParam('listId');
this.subscribe('tasks', listId);
});
});
Template.taskList.helpers({
tasks() {
return Tasks.find({});
},
isLoading() {
return !Template.instance().subscriptionsReady();
},
});
```
## Integration with React
Use React components inside Blaze templates:
```bash theme={null}
meteor add react-template-helper
```
```html theme={null}
Hello, {{username}}
{{> React component=UserAvatar userId=_id}}
```
```javascript theme={null}
import UserAvatar from './UserAvatar.jsx';
Template.userDisplay.helpers({
UserAvatar() {
return UserAvatar;
}
});
```
Use Blaze templates in React components:
```bash theme={null}
meteor add gadicc:blaze-react-component
```
```jsx theme={null}
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
const App = () => (
);
```
## Best Practices
Store state on template instances, not global variables:
```javascript theme={null}
Template.example.onCreated(function () {
this.counter = new ReactiveVar(0); // Good
});
// Not: let counter = 0; (Bad - shared across instances)
```
Use `this.subscribe()` in `onCreated` for automatic cleanup:
```javascript theme={null}
Template.example.onCreated(function () {
this.subscribe('data'); // Automatically cleaned up
});
```
Wrap reactive computations in `autorun`:
```javascript theme={null}
Template.example.onCreated(function () {
this.autorun(() => {
const id = Session.get('currentId');
this.subscribe('item', id);
});
});
```
Use `.limit()` and `.fields()` to reduce data transfer:
```javascript theme={null}
Template.example.helpers({
recentTasks() {
return Tasks.find({}, {
limit: 10,
fields: { title: 1, createdAt: 1 },
sort: { createdAt: -1 }
});
},
});
```
## Common Patterns
### Loading States
```javascript theme={null}
Template.example.onCreated(function () {
this.subscribe('data');
});
Template.example.helpers({
isLoading() {
return !Template.instance().subscriptionsReady();
},
});
```
```html theme={null}
{{#if isLoading}}
Loading...
{{else}}
{{#each items}}
{{name}}
{{/each}}
{{/if}}
```
### Forms
```html theme={null}
```
```javascript theme={null}
Template.taskForm.events({
'submit .new-task'(event) {
event.preventDefault();
const title = event.target.title.value;
Meteor.callAsync('tasks.insert', title)
.then(() => {
event.target.title.value = '';
})
.catch((error) => {
alert(error.message);
});
},
});
```
## Resources
Comprehensive guide to Blaze templating
Complete API reference for Blaze
Step-by-step tutorial for building Blaze apps
Documentation for ReactiveVar