Marionette.js

Built for agent-led development.

Marionette v5 is a JavaScript library built for agent-led development. It gives coding agents a consistent structure for building interfaces, version-matched contracts to work from, and tools to check the code they produce.

The v5 npm package is marionette; backbone.marionette is the legacy package. Check the installed package name and version before choosing documentation. V5 core has native DOM support and requires neither Backbone nor jQuery. Backbone Models and Collections integrate through optional adapters, so an existing Backbone application can keep its Models and persistence. For v4 upgrades, use the migration guide.

Why Marionette for agent-led development?

Clear places for behavior. Views render content and handle local interactions. Regions own View replacement and destruction. Applications coordinate feature readiness and lifetime. These boundaries give an agent a repeatable way to compose features and make changes without inventing their ownership from scratch.
The relevant contract in context. Documentation and an agent skill ship with the package. API and diagnostic lookup lead to specific contracts; documentation MCP access connects those references to supported agent clients.
Feedback on generated code. TypeScript declarations, an ESLint rule against private framework access, and stable diagnostic codes help agents catch mistakes. Runnable examples and public behavior checks show how to verify interaction, cancellation, replacement, and cleanup.

Start with the agent entrypoint. Consumer tooling covers skill/plugin installation, documentation MCP access, lint, types, and installed documentation lookup.

Try v5

Packaged applications are verified on Node 22.22.2+ (22.x) and 24.15.0+ (24.x); use the latest patch of either LTS line. Newer Node versions may install; Node 26 is checked separately as advisory. For framework development or Git installs, select the pinned source toolchain. Install matching package versions in your browser application:

npm install --save-exact marionette@5.0.0 @mnjs/utils@5.0.0 @mnjs/radio@5.0.0 @mnjs/adapters@5.0.0 lit-html@3.3.3

Given <div id="app"></div> in your page, this module shows a dismissible panel:

import { Region, View, setDomApi } from 'marionette';
import LitDomApi from '@mnjs/adapters/dom/lit-html';
import { html } from 'lit-html';

setDomApi(LitDomApi);

const Notice = View.extend({
  template: () => html`
    <p>Your report is ready.</p>
    <button type="button">Dismiss</button>`,
  triggers: { 'click button': 'dismiss' }
});

const region = new Region({ el: '#app' });
const notice = new Notice();
region.listenTo(notice, 'dismiss', () => region.empty());
region.show(notice);

The View turns a click into intent. The Region renders and mounts the View; empty() destroys it and releases its event connections. Showing another View in that Region also destroys the previous one. No separate DOM removal or event unbinding is needed.

The quick start supplies the complete HTML and Vite setup. Continue with the Records lesson to combine a list, detail panel, and asynchronous feature lifecycle. Upgrading an existing application? Use the v4-to-v5 migration guide.

Documentation

Start with the v5 documentation index, quick start, or API index. The reference is organized by class and shared contracts; runnable lessons demonstrate selected workflows.

The testing guide supplies a runnable recipe for checking interaction, replacement, readiness, and teardown.

Development

Found an awkward API, a missing example, or a bug that survives a convincing test suite? Bring a small reproduction. Contributions should start from a focused public issue that describes the intended behavior and its runtime cost. See CONTRIBUTING.md

License

Marionette is available under the MIT license.