smalljs$molSearch⌘ KDocsPlaygroundCompareEcosystemAboutEN
Getting StartedGetting StartedIntroductionMental modelGetting StartedFrom TypeScript to view.treeProject StructureToolingEssentialsInstallationViewsState & ReactivityRoutingRenderingTestingDeploymentTroubleshootingDataData FetchingData SchemasGiper BazaMoreShowcaseFrom React, Vue & SvelteCookbookAdvancedPluginsModule metadataOfflineGhost viewsAboutFAQTeamReleasesAPI$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

Getting Started

Coming from React or Vue and nothing makes sense? Read Mental model first: five minutes on where computed, watch, lifecycle hooks and data loading went.This page takes you from an empty folder to a running, reactive $mol app. It should take about fifteen minutes. Every snippet below is real, working code — copy it as-is.You will write the component in plain TypeScript. $mol also has a shorter format for describing components, view.tree, and you will meet it on the next page. Nothing here needs it: a $mol component is an ordinary class either way.

What you need

Node.js 18+ and git. That is the whole list.You do not install a global CLI or generate boilerplate you have to understand later. $mol apps live inside the MAM workspace, which already knows how to build and serve them.

1. Get the workspace

MAM is the build tool and module registry for $mol. Clone it and install once:1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start launches the dev server on http://localhost:9080/. It watches your files and rebuilds automatically — leave it running in its own terminal.

2. Create a module

A $mol app is just a folder. Pick a namespace (yours, e.g. my) and a name (hello):1mkdir -p my/helloOne rule to remember: underscores in a component name are folder separators. $my_hello lives in my/hello/, $my_hello_form would live in my/hello/form/. Module folder names never contain an underscore.Now add two files inside my/hello/.

index.html — the entry point

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>The mol_view_root="$my_hello" attribute mounts your component when the page loads.

hello.view.ts — the component

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}Edit this page on GitHubWas this helpful?YesNoPreviousMental modelNextFrom TypeScript to view.treeOn this pageWhat you need1. Get the workspace2. Create a moduleindex.html — the entry pointhello.view.ts — the component3. Run it4. Add a second reactive value5. Check your buildYou built a $mol app
Type to search the documentation.