# Install and render a View
This guide targets Marionette 5.0.0-rc.2 with Node 24 or newer. The [documentation index](/docs/index.md) 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:
```sh
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](/docs/integrations/setup.md).
Create `index.html`:
```html
Marionette example
```
Create `main.js`:
```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`Hello, Marionette
`
});
const region = new Region({ el: '#app' });
region.show(new WelcomeView());
```
## Run it
```sh
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](/docs/index.md#learn-as-the-feature-grows) for local interaction, data, composition, and Application readiness.
[Canonical source](/docs/markdown/docs/quick-start.md) · [Source identity](/docs/manifest.json)