Examples Page: Table of Contents
Demo grid: Look below for a grid demonstrating a wide variety of things you can do with Modulo components. Click on a title to reveal the source code, and allow in-line editing and experimentation.
Example paragraph #1
Example paragraph #2
Starting a new project, or looking for a bigger example of an entire website? Download or use the following starter templates for examples on how to integrate with a variety of other services and libraries.
Jamstack (Static Site with Markdown and CMS)
Ready to go: ✓ Graphical CMS (Decap / Netlify) ✓ 3rd Party Auth (Decap / Netlify) ✓ Markdown (& more)
Jamstack (Static Site with Markdown)
Ready to go: ✓ Markdown ✓ Components ✓ JSON-based Data
Jamstack (Static Site)
Ready to go: ✓ Components ✓ JSON-based Data
Single Page App
Ready to go: ✓ Components ✓ Example Custom CPart Integration ✓ Example REST API Usage
HTML Quick Start (with Markdown)
Ready to go: ✓ Write articles in Markdown ✓ Five example pages ✓ Good for HTML beginners
HTML Quick Start
Ready to go: ✓ Three example pages ✓ Easy to edit HTML ✓ Good for HTML beginners
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, use another version of Modulo and haven't been updated yet, or require a bit more polish before they become fully recommended.
Use '-store' to let components share state and trigger refreshes
Frontend: Adding CKeditor
Custom CPart for APIs
A typical use of custom CParts is to abstract away APIs.
Custom CPart for legacy frontend
Modulo is useful as a glue to integrate with legacy libraries (in this case, FitText.js).
Demonstrates integrating Modulo with a custom Template engine (in this case, Handlebars)
Demonstrates using Babel JS and a custom Template CPart to enable React-style JSX syntax in Modulo.
Test Suite Example
Demonstrates creating a TestSuite (Mostly Undocumented)
Modulo Synth with Tone.js
A fully functional baseline synthesizer, with a simple step sequencer and ASDR.