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.

How to "fork" a Modulo.js demo

Some of tiles below link to full-page demonstration apps. These are intended as a reference of “copy & paste recipes” so you can get started even quicker with incorporating Modulo into your project.

Every demo can be "forked" (copied) by clicking the "COPY SOURCE" button in the top-right. Then, it can be pasted into a local HTML file in your text editor.

Starter Files

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.

Example Library Experiments

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.

New features

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

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.

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.