First Page
This is the real tutorial entry point for new users. The goal is simple: install Monster, render one working component and understand the smallest setup that is worth building on.
Build one small page that imports Monster, loads the property layer and renders a control
By the end of this tutorial you will have a minimal project shape, one live component, the global property stylesheet and a clear mental model for where HTML, JavaScript and the Playground each fit.
Before You Start
Use this before the deeper runtime tutorials
If terms like Updater, Datasource or CustomControl still feel abstract, that is expected. This page comes first and gives those later tutorials a working base.
Keep the first page intentionally small
Do not start with server data, Shadow DOM styling or custom elements. One package install, one import, one property stylesheet and one control are enough for the first useful page.
The Minimal Flow
1. Install the package
Add Monster to the application repo like a normal package dependency.
npm install @schukai/monster2. Import one component and the property stylesheet
Start small. Import only the control you want to render and bootstrap the global token layer once.
import "@schukai/monster/source/components/form/button.mjs";
import { PropertyStyleSheet } from "@schukai/monster/source/components/stylesheet/property.mjs";
document.adoptedStyleSheets = [
...document.adoptedStyleSheets,
PropertyStyleSheet,
];3. Render one component in plain HTML
The component tag is the API. At this stage you do not need a framework wrapper or extra abstraction.
<main>
<monster-button>Click me!</monster-button>
</main>4. Verify the result in the Playground
Once the smallest page works, use the Playground to test small variations before you restructure the app or pull in more complex controls.
First Working Page
This is the target state for the first session with Monster: one page, one imported control and the global token layer already active.
Minimal live control
If this renders with Monster styling, the install and property layer are in place and you can move on.
What this proves
You now know the smallest setup that is valid. Everything else in the tutorial system builds on top of this sequence.
What to Learn Next
Move to Templating
Continue there if the next problem is binding existing DOM to data without creating a custom element yet.
Move to Datasource
Continue there if the next problem is loading, persisting or sharing state across multiple controls.
Move to CustomElement
Continue there if you need your own tag, template lifecycle and Shadow DOM boundary.
Move to Theming
Continue there once the page works and you want to style it through properties and parts rather than ad-hoc CSS.