This page has a collection of larger demos and library of mini-examples.
Note: Unlike every other page at modulojs.org, this page is
NOT pre-rendered! That means you can use "View Source" (Right click, or Ctrl+U)
to see how Modulo's own website was built.
These HTML and Zip files are intended to help you start new projects, with
example components already made, to make remembering syntax easier, and Modulo
all configured and ready to go. Use one of these demo pages to get a
head-start with your own Modulo project.
This snippet has a single component defined with examples of common
CParts and template syntax.
This starting snippet defines a small collection of example
components, demonstrating how to build a site or app.
Experimental: The following demos show off some of the cool
and unusual things you can get Modulo to do! However, they are designated
"experimental" either because they might be using internal APIs that could
change before the Modulo beta, or require a bit more polish before
they become fully recommended.
Custom Component Parts
The internal CPart API that is used by custom CParts may change before
beta, and will need further documentation. Read further for typical
uses of common CParts:
Custom templating: Handlebars and JSX integrations
Modulo templating and HTML generation can be customized at various levels.
You can register custom CParts, in the case of using React-style JSX syntax
Templater engine, which the existing Template CPart will
integrate into the render-flow, most notably including Modulo and third-party
filters into the other syntax.
Demonstration of integrating Modulo with a custom Templater
engine (in this case, Handlebars).
Demonstration of integrating Babel JS and replacing Template CPart
with custom CPart to enable React-style JSX-syntax in Modulo.
Modulo for Sound & Music
Modulo's declarative, configuration-focused approach is especially
well-suited for sound and music related applications. The Tone JS CPart becomes
your own sound engineering "rack" of instruments and effects units, where any
"knob" or configuration setting can be bound to state, and thus to form
controls, just like anything else in Modulo.
NOTE: WebAudio API
has limited browser compatibility.
A functional baseline synthesizer, with a simple step sequencer and
some knobs to tweak.
USB MIDI Keyboard
Demonstration of receiving MIDI keyboard input in Modulo, useful for
sound synthesis, DAW, or apps in music ed.
Unit testing demos
MDU (a planned collection of CParts and other utilities) includes
TestSuite, a unit testing framework that is used to test Modulo.js
itself. Like other MDU CParts, it's usable already, but it's API may change in
Show how you use the TestSuite CPart to write your own succinct
unit-tests for your components.
One way to check for browser-compatibility bugs is by running
Modulo.js's full test-suite in a new tab. View the console for