Tutorials
The tutorial section is the guided path through Monster. Use it when API pages tell you what exists, but you still need to understand how the runtime pieces fit together in real code.
Start with setup and orientation, then move into the runtime model
Most teams get value from Monster fastest when they first understand how the library is loaded and how the documentation is structured. After that, the DOM binding model, CustomElement and CustomControl layers become much easier to reason about.
Before You Start
Who This Is For
Developers integrating Monster
Learn how Updater, component options, data attributes and the form-oriented control layer actually work together before you start wiring application-specific behavior.
Designers working with implementation reality
Understand where templating stops, where components encapsulate UI through Shadow DOM and which parts stay safely themeable from the outside.
Recommended Order
1. Load the library and understand the example structure
Start with First Page if you still need npm install, browser imports, a working HTML page or the Playground flow.
2. Learn the DOM templating model
Start with Templating. It explains data-monster-replace, data-monster-bind, data-monster-insert and the proxy-driven update flow that shows up in many higher-level components.
3. Move from local state to shared data contracts
Move to Datasource once the DOM binding model is clear and you want to load, persist or normalize data through a stable contract instead of sprinkling fetch logic through components.
4. Build your own reusable element
Continue with CustomElement when you need your own tags, your own template lifecycle or Shadow DOM encapsulation.
5. Continue into real controls
Finish with CustomControl and then use the component docs for Select, API Button and Button Bar to see the same runtime ideas in production-grade controls.
6. Style the system without breaking it
End with Theming to learn where tokens, PropertyStyleSheet and ::part belong once you want the control to look like your product without fighting Shadow DOM.
What the Tutorials Teach
Runtime mental model
The tutorials explain what changes the DOM, what stays declarative in HTML and when JavaScript should only orchestrate public APIs instead of mutating internals.
Data flow contracts
The datasource tutorial closes the gap between static demos and production code: read paths, write paths, server-backed state and where components should stop owning transport logic.
Safe extension points
You learn the public surfaces that are meant to be used: templates, options, data-monster-*, lifecycle methods and form-aware controls.
System constraints
The guides also surface the practical limits: Shadow DOM boundaries, loader behavior, property stylesheets, paired color tokens and when @container is the safer layout choice.
Styling discipline
The theming tutorial shows how to apply Monster tokens, paired foreground and background colors and stable parts without falling back to brittle internal DOM selectors.
Related reference pages
When you need the deeper API contract, continue into Updater, Datasource, CustomElement and CustomControl.