Start herev5.0.0
Markdown & source details

5.0.0 · stable release (published on npm) · 0f2284ad snapshot. Reading source: 0f2284ad4bbfe8c82ce82714471697a68c2acaeb. Match APIs to your installed version.

On this page

Work with an agent#

Use the docs bundled with the application's installed Marionette package. For framework changes, follow the repository's contributor guidance.

Find the installed contract#

Check the installed package name and version first: marionette is the v5 package; backbone.marionette is the legacy package. V5 core requires neither Backbone nor jQuery; Backbone Models and Collections integrate through optional adapters. For installed backbone.marionette 4.x, preserve v4 contracts unless upgrading; older releases need their own version-specific guidance. If both packages are installed, check which entrypoint the feature imports.

From the application directory, resolve the package the feature imports. For v5:

node -p "require.resolve('marionette/package.json')"

For the legacy package instead:

node -p "require.resolve('backbone.marionette/package.json')"

Read the selected package's version and use its matching documentation. The paths below apply only to v5 and are relative to the installed marionette package's docs/ directory. For rendering, observation or persistence changes, check the configured renderer or data provider. Choose one starting page or use an exact API lookup; follow additional references when the task needs their contract.

Shared API names such as View.extend, regions, triggers, modelEvents, and CollectionView remain valid in v5, but do not guarantee shared behavior: verify the v5 contract. For v4 upgrades, read the migration guide.

If installed docs are absent, obtain the exact release or known source revision. Current website docs may describe a different version.

Task Start with
Install and render a first View Quick start
Migrate from another UI framework Framework migration
Migrate an existing v4 application Migration guide
Test interaction, readiness, or teardown Consumer testing
Choose ownership and lifetimes Architecture
Bind a DOM event or trigger DOM events
Read or rebind named DOM elements UI bindings
Edit a model or retain a draft Local editing
Prepare, start, restart, or stop a feature Application
Restart while retaining a draft or shell Retained restart
Enhance existing markup Existing HTML
Embed a feature in another UI Existing UI
Connect URLs and destination lifetimes Navigation
Show, replace, or retain child UI Region
Render, filter, or sort repeated children Lists
Share observable data and state state
Connect events and clean up subscriptions Events
Connect channels and request/reply handlers Radio
Configure a renderer or another data layer Configuration scope
Write typed options, handlers, or lifecycle hooks TypeScript guide
Check types, lint, or diagnose a failure Application tooling
Integrate an imperative control Widgets
Check keyboard, focus, or rendering safety Accessibility and rendering
Build and deploy an application Production
Apply the concepts in a composed feature Records lesson

Apply the contract#

Keep local interaction in its View when that fits the task. An asynchronous call alone does not require an Application. A View may save its own model when the configured data layer supplies that operation. @mnjs/data supplies observable Models and Collections; fetching and persistence require an API layer or another provider. It does not supply Model.save().

Use Application preparation for feature readiness and restart() to repeat it while retaining active UI. Apply the current result in onStart; construct retained shells once. Coordinate shared decisions and work that survives panel replacement at the lifetime that owns them. Read architecture when deciding that ownership.

Read method signatures, event payloads and cleanup for the APIs you change. Verify the affected interaction, including replacement, cancellation or teardown when relevant. A successful build does not establish those outcomes.

Local contract lookup#

Direct Markdown reading is supported. If using the installed skill's helper, choose one lookup from the application directory:

node <skill>/scripts/docs.mjs --section docs/api/view.md#local-interaction-and-feature-coordination

Replace <skill> with the installed or copied skill directory. A section link reads that contract directly. You can also select a named section with --page docs/api/shared/view-bindings.md --section 'UI bindings'. Use --symbol Export.member for signatures and primary section IDs in primarySections, --search 'query' when the location is unknown, or --page SOURCE for a full page. --list lists pages; it is optional. An external package store needs --package-root <physical-directory>.

A symbol result lists primary contract section IDs in primarySections and incidental code mentions in sections. Primary routes can span several sections. An empty primary list means no member route has been assigned. contracts retains all applicable section IDs and diagnostic codes, including general guidance. Pass a section ID to --section to read it.

The helper checks the bundled manifest and hashes and reports the installed version and source revision. These identify the docs read; they do not verify the implementation.

For skill/plugin installation or hosted MCP identity checks, follow application tooling.