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
- 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)
- Component Parts
- 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)
- Core
- Artifact
(Topics: bundle, build, custom builds)
- Component
(Topics: name, innerHTML, patches, reconciliation, rendering mode, manual rerender, shadow, vanish, vanish-into-document, component.event, component.slot, component.dataProp)
- Configuration
(Topics: config, loading, unpkg, npm, dependency, registering helpers, registering custom cparts)
- Library
(Topics: src, namespace)
- Modulo
(Topics: starting, mounting, custom loading, custom mounting)
- Lifecycle
- Component lifecycle
(Topics: constructor, initialized, prepare, render, reconcile, update, event, eventCleanup)
- Lifecycle callbacks
(Topics: hooking into lifecycle, callbacks, script tag callbacks, renderobj, 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)