Getting Started - Modulo Documentation

NPM? Terminal? Vite? Yarn? None of that is needed here! Modulo's build system is entirely browser-based, and Modulo is a single-file framework. If you have a browser, you're good to go!

Download

📄
Modulo.html (99kb)

Tip 1: This one file is all you need. Once downloaded, open it in your browser (ie double click) and choose from the built-in Create Markdown (start a new content page), Create App (start a new single-page app), and Create Library (start a new self-documenting library).

Tip 2: If it doesn't automatically download, try right clicking and selecting "Save As…".

Starting in 3 Steps

Writing your first component takes only 3 steps. You can follow these steps in your text editor by either 1) creating a new, blank HTML file or 2) opening an HTML file from one of your existing web apps or projects:

Step 1: Include Modulo
Step 2: Define Components
Step 3: Use Elsewhere

Modulo Starter Tips - The goal is to help out starting any type of project, The starter project is all about showing with simple examples how to do things. For example, use index.html as a very simple starting point of how to to use the x-Page component. Then, look at static/index.html, static/components/index.html and finally static/components/Page/Page.html for how this Page is imported and customized. Secondly, use the articles/*.html article files as examples of Markdown content with Modulo, especially handy since x-Page is configured to render cleanly in "vanish mode" (e.g. leave no JavaScript), thus making these pages an example of a pure "server-side only" usage. Finally files like app-example.html and static/components/App.html for examples of building single-page apps with Modulo. Edit static/index.html and static/components/index.html for Component examples.

Project Starter Templates

Get a head start with ready-to-deploy website demonstrating standard usage.

  1. Download the zip file
  2. Unzip
  3. Examine and edit to fit your web project needs

Modulo Starter

The Modulo Starter Project has never been more lightweight, now clocking in at less than 60kb compressed, dependencies included. It helps with all different types of web projects, with examples of a single page app marketing pages, Markdown articles, and a "package.json" already configured for automatic server-side headless building using Node.js and Playwright with just one command (npm run build). This means you can push it to most modern hosting services and they will build it automatically on their servers.

📦
modulo-starter-main.zip (55kb)