Modulo documentation

The complete, interactive Modulo documentation is found here.

Search: Use your browser's Control-F or Command-F page search feature—topic and other extra keywords are listed on this page below, as a glossary for easier navigation.

Not sure where to begin? Consider getting started with the tutorial, or playing around with this showcase of example components.

Table of Contents
Tutorial
- Part 1: Components, CParts, and Loading (Topics: cdn, components, cparts, template, style, html & css)
- Part 2: Props, Templating, and Building (Topics: props, template variables, template filters, modulo console command, build, hash)
- Part 3: State, Directives, and Scripting (Topics: state, directives, data props, state.bind, data types, events, basic scripting)
Templating
- Templates (Topics: templating philosophy, templating overview)
- Variables (Topics: variable syntax, variable sources, cparts as variables)
- Filters (Topics: filter syntax, example filters)
- Tags (Topics: template-tag syntax, example use of templatetags)
- Comments (Topics: syntax, inline comments, block comments)
- Debugging (Topics: code generation, debugger, developer tools)
- Escaping (Topics: escaping HTML, safe filter, XSS injection protection)
Template Reference
- Built-in Template Tags (Topics: if, elif, else, endif, for, empty, endfor, operators, in, not in, is, is not, lt, gt, comparison, control-flow)
- Built-in Filters (Topics: add, allow, capfirst, concat, default, divisibleby, escapejs, first, join, json, last, length, lower, number, pluralize, subtract, truncate, renderas, reversed, upper)
CParts
- Component (Topics: name, innerHTML, patches, reconciliation, rendering mode, manual rerender, shadow, vanish, vanish-into-document, component.event, component.slot, component.dataProp)
- Props (Topics: accessing props, defining props, setting props, using props)
- Script (Topics: javascript, events, computed properties, static execution, custom lifecycle methods, script callback execution context, script exports)
- State (Topics: state definition, state data types, json, state variables, state.bind directive)
- StaticData (Topics: loading API, loading json, transform function, bundling data)
- Style (Topics: CSS, styling, :host, shadowDOM)
- Template (Topics: custom template, templating engine)
Lifecycle
- Global lifecycle (Topics: lifestyle phases, prebuild, define, factory)
- Component lifecycle (Topics: consturctor, initialized, prepare, render, reconcile, update, event, eventCleanup)
- Lifecycle callbacks (Topics: hooking into lifecycle, callbacks, script tag callbacks, renderobj, baseRenderObj, loadObj, dependency injection, middleware)
Directives
- Directives (Topics: built-in directives, directive shortcuts, custom directives)
- Built-in directives (Topics: [component.dataProp], :=, prop:=, JSON primitive, data-prop, assignment, [component.event], @click, @...:=, [component.slot], [state.bind])
- Custom directives (Topics: refs, accessing dom, escape hatch, Mount callbacks, Unmount callbacks, template variables vs directives, script-tag custom directives, custom shortcuts)
Examples
- Starter Files (Topics: starter, snippets, component libraries, download, zip, page layouts, vanish-into-document)
- Example Library (Topics: Hello, Simple, ToDo, JSON, JSONArray, GitHubAPI, ColorSelector, DateNumberPicker, PrimeSieve, Scatter, FlexibleForm, FlexibleFormWithAPI, Components, OscillatingGraph, Search, SearchBox, WorldMap, Memory, ConwayGameOfLife)
- Experiments (Topics: custom cparts for apis, custom cparts for legacy, jQuery, handlebars, jsx, Tone.js, audio synthesis, MIDI, jsx templating, babel.js, transpiling, cparts for apis, TestSuite, unit testing)