Marionette.js

Explicit Views, Regions, lifecycle, and application structure.

Marionette is a lightweight application framework for building structured interfaces with deterministic lifecycle, named composition boundaries, and explicit ownership. It works with native DOM APIs by default. Backbone models and collections and a jQuery DOM adapter are available as optional integrations.

The current v5 pre-release is under active development. Stable v5 will ship only after the public correctness, agent-development, packaging, browser, and performance gates in the project roadmap pass.

Install

npm install marionette

import { View } from 'marionette';

const GreetingView = View.extend({
  el() {
    return document.querySelector('#app');
  },
  template: () => '<h1>Hello</h1>'
});

new GreetingView().render();

Marionette core has no required peer dependencies. Install optional peers only when the application uses their corresponding integration:

• Backbone models, collections, and shim
• jQuery DOM adapter

Applications that use Underscore directly, such as with _.template, must declare underscore as their own dependency.

See installation for package entrypoints and supported setup.

Documentation

• Documentation index
• Installation and package entrypoints
• Optional Backbone integration
• Pre-rendered DOM
• Phase 0 performance baselines
• v4-to-v5 compatibility ledger
• Upgrade guide

The API reference is being reconciled for stable v5 in issue #147. Until that work is complete, the repository's v5 guides above are canonical; the hosted /docs/current site describes earlier releases.

Development

Contributions should start from a focused public issue with an explicit behavior and runtime-cost boundary. See CONTRIBUTING.md and the agent-ready v5 roadmap.

npm ci
npm test
npm run lint:ci
npm run coverage
npm run test:fixtures
npm run size
npm run performance:timing

License

Marionette is available under the MIT license.