5.0.0-rc.2 · release candidate (published on npm) · f4243b83 snapshot. Reading source: f4243b8334cafe0bd1b06eba85d87e2310cb3618. Match APIs to your installed version.

Install and render a View#

This guide targets Marionette 5.0.0-rc.2 with Node 24 or newer. The documentation index identifies this prerelease candidate.

Install the release candidate#

Use matching 5.0.0-rc.2 versions of marionette and the companion packages: @mnjs/utils, @mnjs/radio, @mnjs/adapters, and optional @mnjs/data. Pin the versions explicitly when installing this prerelease.

Create the project#

Create a project directory:

mkdir marionette-example
cd marionette-example
npm init -y
npm pkg set type=module scripts.dev="vite" scripts.build="vite build"
npm install --ignore-scripts --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
npm install --ignore-scripts --save-dev --save-exact vite@8.3.0

This first UI uses marionette, the Lit adapter from @mnjs/adapters, and lit-html. Core also depends on @mnjs/utils and @mnjs/radio; the command pins those dependencies to the same release candidate. @mnjs/data is optional and is added in the data setup guide.

Create index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marionette example</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Create main.js:

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

setDomApi(LitDomApi);

const WelcomeView = View.extend({
  template: () => html`<h1>Hello, Marionette</h1>`
});

const region = new Region({ el: '#app' });
region.show(new WelcomeView());

Run it#

npm run dev

Open the address Vite prints. You should see “Hello, Marionette”. npm run build produces a production bundle in dist.

The View describes the content. The Region renders and mounts it, then owns replacement and destruction. Calling region.show(anotherView) replaces the previous View; region.empty() destroys the displayed View.

The Lit DOM adapter is configured once before creating Views. The default renderer calls each template function with its data.

Continue with the learning progression for local interaction, data, composition, and Application readiness.