Examples

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.

• Basic Snippet

  This snippet has a single component defined with examples of common CParts and template syntax.

• Components Snippet

  This starting snippet defines a small collection of example components, demonstrating how to build a site or app.

New features

• Global State

  Use "-store" to let components share state.

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 CParts for APIs

  A typical use of custom CParts is to abstract away APIs.

• Custom CParts for legacy frontend

  Modulo is useful as a glue to integrate with legacy libraries (in this case, FitText.js).

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 which allows embedding of arbitrary JavaScript. You can also register a custom 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.

• Handlebars

  Demonstration of integrating Modulo with a custom Templater engine (in this case, Handlebars).

• JSX Templating

  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.

• Tone.js Synth

  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 the future.

• TestSuite Demo

  Show how you use the TestSuite CPart to write your own succinct unit-tests for your components.

• Modulo.js Tests

  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 output.