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 learn by example by playing around with this showcase of example components and accompanying 5-minute tutorials.
Table of Contents
-
Ramping Up
with Modulo
- Part 1: Components and Their Parts (Topics: component, component part, cparts, customElement, Template, Props, template variable)
- Part 2: State, Binding, and Template Filters (Topics: state, directives, binding inputs, state.bind, template filters, default, allow)
- Part 3: Slots, Shadow, and Template Tags (Topics: slot, slot name, children, shadow dom, css isolation, class isolation, shadow isolation, vanish, template tags, comment, if, ==, is, else, endif)
- Part 4: Data Types, For Loops, and StaticData (Topics: string, number, array, object, template tags, for, endfor, staticdata, json, API, CSV)
- Part 5: Events and Scripts (Topics: , event, event listening, click, @click:=, methods, Array methods, pop, push, reverse, shift, script tag, JavaScript, num++, -data-type="js")
-
Building Apps
with Modulo
- Part 1: Sources (Topics: live server, building, source, -src, splitting files)
- Part 2: Going Big (Topics: Library, ssg, server-side generation, ssr, server-side rendering, jamstack, starting templates, projects, markdown, markdown-html, decap, cms, netlify)
- Part 3: Building and Integrating (Topics: build, optimizing, github, cd, library, continuous delivery, launching, php, backend)
-
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, bundling data)
- Style (Topics: CSS, styling, prefixing, isolation, :host, shadowDOM, url-replace, absolute, relative, background url)
- Template (Topics: custom template, templating engine)
-
Core Definitions
- Artifact (Topics: bundle, build, custom builds)
- Configuration (Topics: config, loading, unpkg, npm, dependency, registering helpers, registering custom cparts)
- Component (Topics: name, innerHTML, patches, reconciliation, rendering mode, manual rerender, shadow, vanish, vanish-into-document, component.event, component.slot, component.dataProp)
- Include (Topics: head, integrating scripts, integrating link tags, meta tags, lazy loading, component includes)
- Library (Topics: namespace, tag alias)
- Modulo (Topics: starting, mounting, custom loading, custom mounting)
-
Templating Language
- Templates (Topics: templating philosophy, templating overview)
- Variables (Topics: variable syntax, variable sources, cparts as variables)
- Filters (Topics: filter syntax, example use of filters, custom template filters)
- Tags (Topics: template-tag syntax, example use of templatetags, custom template tags)
- Comments (Topics: syntax, inline comments, block comments)
- Debugging (Topics: code generation, debugger, developer tools)
- Escaping (Topics: escaping HTML, safe filter, XSS injection protection)
- Template Tags
- Template Filters
-
Processors
- Processors (Topics: definition processors, behavior, ordering)
- Built-In Processors (Topics: -name, -src, -filter-content)
-
Lifecycle
- Lifecycle callbacks (Topics: hooking into lifecycle, callbacks, script tag callbacks, renderObj, initRenderObj)
- Component lifecycle (Topics: constructor, constructed, mount, mountRender, initialized, prepare, render, dom, reconcile, update, directive lifecycles, event, eventCleanup)
-
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)