
Description
Use when building or debugging Blaze interfaces in Meteor 3: meteor create --blaze, Spacebars templates, Template helpers and events, lifecycle hooks, Tracker, ReactiveVar or ReactiveDict, template subscriptions, Promise helpers, #let async states, Template.dynamic, Blaze.render, and blaze-hot HMR with the Meteor bundler. Triggers on stale async helper results, lost reactivity after await, data-context lookup surprises, duplicate DOM integrations after HMR, Rspack full reloads, or raw HTML in triple braces. Use this skill when the user asks about reusable Blaze components, current Blaze packages, Rspack entry imports, or testing Blaze templates. For Meteor 2 to 3 upgrades, use migrate-to-meteor-3 instead.
SKILL.md
Blaze interfaces for Meteor 3
Blaze compiles Spacebars templates into JavaScript and updates small View
regions when their reactive dependencies invalidate. Keep state, subscriptions,
DOM effects, and async work owned by a template instance. Use public
Template, Blaze, Spacebars, and Tracker APIs in application code.
Decision flow
- For a new app, run
meteor create --blaze <name>. Inspect the generatedpackage.json,.meteor/packages, client entry, andrspack.config.jsbefore changing packages or build settings. - Import each template's
.htmlfrom the JavaScript module that registers its helpers, events, and lifecycle hooks. Import that module from the client entry graph. - Keep synchronous Minimongo reads in ordinary helpers. If a helper returns a Promise, render explicit pending, rejected, and resolved states.
- Put
ReactiveVar,ReactiveDict,this.autorun, andthis.subscribeon the template instance. Put DOM initialization inonRenderedand undo external effects inonDestroyed. - Pass named data and callbacks into reusable child templates. Keep publication and mutation authority on the server.
- Identify the bundler before diagnosing refresh behavior.
blaze-hotcan replace templates in the Meteor-bundler graph; Rspack currently performs a full live reload for Blaze. Route general build, migration, database, or test-runner work to the owning skill.
Current scaffold
meteor create --blaze my-app
cd my-app
meteor
Meteor 3.4+ creates Blaze apps with Rspack by default. Earlier Meteor 3
releases may use the Meteor bundler. The current scaffold declares explicit
client and server meteor.mainModule entries, imports .html from the client
entry, enables the modern build stack, and includes blaze-html-templates,
tracker, reactive-var, hot-module-replacement, blaze-hot, and rspack.
Treat the generated files for the selected Meteor release as the baseline.
Those packages do not enable Blaze HMR in the Rspack graph. Blaze edits there
trigger a fast full page reload and reset page-local state. blaze-hot
replacement behavior applies when the Meteor bundler owns the module.
Do not infer the installed Blaze runtime from the release name alone. Inspect
.meteor/versions, then use the
Blaze history for
feature floors and compatibility changes.
Component scaffold
<template name="taskList">
<label>
<input type="checkbox" class="js-show-done">
Show completed
</label>
{{#if Template.subscriptionsReady}}
{{#each task in tasks}}
{{> taskRow task=task}}
{{else}}
<p>No tasks.</p>
{{/each}}
{{else}}
<p>Loading...</p>
{{/if}}
</template>
import { Template } from "meteor/templating";
import { ReactiveVar } from "meteor/reactive-var";
import { Tasks } from "/imports/api/tasks";
import "./task-list.html";
Template.taskList.onCreated(function () {
this.showDone = new ReactiveVar(false);
this.autorun(() => {
this.subscribe("tasks.list", { showDone: this.showDone.get() });
});
});
Template.taskList.helpers({
tasks() {
const showDone = Template.instance().showDone.get();
return Tasks.find(showDone ? {} : { done: false }, {
sort: { createdAt: -1 },
});
},
});
Template.taskList.events({
"change .js-show-done"(event, instance) {
instance.showDone.set(event.currentTarget.checked);
},
});
this.autorun and this.subscribe stop when the instance is destroyed. A
cursor returned from a synchronous helper remains live through Minimongo.
Authorization and field projection still belong in the publication.
Async helpers
Use #let when loading, rejection, and empty results must be distinct:
{{#let profile=loadProfile}}
{{#if @pending "profile"}}<p>Loading...</p>{{/if}}
{{#if @rejected "profile"}}<p>Could not load profile.</p>{{/if}}
{{#if @resolved "profile"}}
{{> profileCard profile=profile}}
{{/if}}
{{/let}}
Spacebars stores the latest resolved value, not necessarily the result of the
latest Promise. If reactive input can launch overlapping requests, use an
abort signal, generation token, or serialized queue. Do not assume #let
orders results. See references/spacebars-and-async.md.
Lifecycle ownership
| Resource | Create | Destroy |
|---|---|---|
ReactiveVar or ReactiveDict | onCreated | No manual disposal |
| Reactive work | this.autorun | Automatic with the instance |
| Subscription | this.subscribe | Automatic with the instance |
| DOM widget | onRendered, often after Tracker.afterFlush | Widget-specific teardown in onDestroyed |
| Window, document, timer, observer | Lifecycle callback | Explicit remove, clear, disconnect, or stop in onDestroyed |
| Programmatic Blaze View | Blaze.render or Blaze.renderWithData | Blaze.remove(view) |
Read references/lifecycle-and-components.md for data-context rules,
callbacks, dynamic templates, DOM scoping, and cleanup patterns.
Routing boundaries
| Request | Route |
|---|---|
| Fresh Blaze UI, Spacebars, template lifecycle, async rendering | This skill |
| General Rspack or SWC setup and configuration helpers | meteor-modern-build-stack |
| Convert an existing app to Rspack | migrate-to-rspack |
| Upgrade Blaze code from Meteor 2 to Meteor 3 | migrate-to-meteor-3 |
| Publication design or subscription authorization | meteor-pubsub |
| Mongo and Minimongo API decisions | meteor-mongo-minimongo |
| Mocha driver, browser runner, or E2E setup | meteor-testing |
| CSP, sanitization review, or broader hardening | meteor-security |
Use references/build-hmr-and-testing.md only for Blaze-specific entry
imports, HMR ownership, and programmatic template tests.
Anti-patterns
- Return async Minimongo values from every helper. Prefer synchronous client reads unless the flow is already async or shared with the server.
- Read reactive data only after
awaitwithout restoring the captured Tracker computation. - Treat
{{#each ...}}{{else}}as a loading indicator. Theelsebranch also covers rejection and a resolved empty sequence. - Pass implicit inherited contexts through reusable templates. Pass named data.
- Use global
$()ordocument.querySelectorfor component DOM. Scope lookup to the template instance. - Insert user-controlled content through triple braces or
Spacebars.SafeStringwithout trusted sanitization. - Remove DOM nodes created by
Blaze.renderwithout callingBlaze.remove. - Rely on private or removed UI-era APIs such as
UI.body,Template.__define__,Template.__body__,Spacebars.TemplateWith, orBlaze.InOuterTemplateScope.
Authoritative resources
- Meteor Blaze tutorial
- Blaze guide
- Spacebars API
- Templates API
- Blaze programmatic API
meteor/blazesource and testsreferences/spacebars-and-async.mdreferences/lifecycle-and-components.mdreferences/build-hmr-and-testing.mdreferences/eval-cases.md
More skills from the agent-skills repository
View all 14 skillsmeteor-accounts
implement authentication in Meteor apps
Aug 28AuthAuthenticationMeteorOAuthmeteor-community-packages
manage Meteor community packages
Aug 28EngineeringMeteormeteor-debugging
diagnose failures in Meteor 3 applications
Aug 28DebuggingMeteorWebSocketsmeteor-deployment
deploy Meteor 3 applications
Aug 28DeploymentDockerKubernetesMeteormeteor-methods
author and debug Meteor methods
Aug 28API DevelopmentBackendMeteormeteor-modern-build-stack
configure Meteor 3 modern build stacks
Aug 28BuildMeteorPerformance
More from Meteor
View publishermeteor-mongo-minimongo
author and debug Meteor MongoDB queries
agent-skills
Aug 28DatabaseDebuggingMeteorMongoDBmeteor-pubsub
author and debug Meteor publications
agent-skills
Aug 28BackendMeteorReal-timemeteor-react
build and debug Meteor React interfaces
agent-skills
Aug 28FrontendMeteorReactWeb Developmentmeteor-security
audit and harden Meteor 3 applications
agent-skills
Aug 28AuthCode AnalysisMeteorSecuritymeteor-testing
write and repair Meteor test harnesses
agent-skills
Aug 28MeteorQATesting