Skip to content
This repository was archived by the owner on Oct 10, 2026. It is now read-only.
marionettejsPublic archive

About

Archived Marionette v5 development history. Current source, releases, issues and PRs: https://github.com/marionettejs/marionette

Topics

Resources

Contributing

Security policy

Stars

27 stars

Watchers

9 watching

Forks

Latest commit

 

History

1,214 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Archived development repository. Current source, documentation, releases, issues and pull requests are in marionettejs/marionette. Marionette 5.0.0 is published. The RC2 instructions below are retained as historical documentation.

This repository preserves v5 development issues, pull requests and prerelease history. Pre-cutover v5 issue/PR numbers and bare #N references in old commits belong to marionettejs/marionette-develop; the canonical repository has its own numbering and legacy history. Old commits, tags and evidence remain unchanged. Unfinished work continues in Idiomorph adapter #3750 (formerly #606) and independent maintenance evaluation #3751 (formerly #146). Their old issue URLs redirect to the transferred discussions.

Marionette.js

Marionette logo

Built for agent-led development.

CI status npm version

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

v5 is a release candidate. 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 candidate versions in your browser application:

npm install --save-exact marionette@5.0.0-rc.2 @mnjs/utils@5.0.0-rc.2 @mnjs/radio@5.0.0-rc.2 @mnjs/adapters@5.0.0-rc.2 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.

About

Archived Marionette v5 development history. Current source, releases, issues and PRs: https://github.com/marionettejs/marionette

Topics

Resources

Contributing

Security policy

Stars

27 stars

Watchers

9 watching

Forks

Releases

Sponsor this project

Packages

Used by

Contributors

Languages