Marionette is a JavaScript library for building interfaces whose parts have clear jobs. Views render content and handle interactions. Regions give those Views a place to appear, change, and leave. Applications bring features together and coordinate the work that starts and stops with them.

Start with native DOM APIs, plain objects, and function templates. Choose other data, state, and rendering tools as your application needs them.

A place for the next change

Adding a detail panel, updating a list, or stopping a feature should have a recognizable approach:

• Build a screen with a View.
• Replace part of it through a named Region.
• Repeat rows or cards with a CollectionView.
• Share an interaction through a Behavior.
• Start and stop a feature with an Application.

Those same patterns give an agent a place to make a change and give you something specific to review. Marionette v5 is being developed with agent-led work in mind: consistent APIs, public types, and guidance that connects a task to the code it needs.

We're optimistic about agents. We've also read the diffs.

Trying v5

The v5 pre-release is under active development. These guides describe the current source; published prereleases can lag behind it. Registry commands below require the named version to be published. Stable v5 will ship only after the public contract, migration, application usability, packaging, browser, performance, and stabilization gates in the project roadmap pass. Comparative agent advantages require separate evidence and are not a condition of stability.

Install

npm install [email protected]

Add the mount element to the page:

<div id="app"></div>

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:

• Observable Model and Collection sources
• Backbone data and event integration
• 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

• Build with an agent
• Install the Marionette agent plugin or skill
• Choose integrations
• Documentation index
• Installation and package entrypoints
• Classes and their jobs
• Rendering and templates
• State and observation
• Data and integrations
• Lifecycle and cleanup
• Upgrade guide

Builds containing these documentation resources include the matching consumer guides under dist/docs/; earlier published alphas may not include them. Start at dist/docs/readme.md; its manifest records source revision and content hashes. Read the page needed for the task rather than loading the whole bundle.

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

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 and the v5 roadmap.

The maintainer guide maps each change to the relevant source and validation commands.

License

Marionette is available under the MIT license.