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
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.htmlas a very simple starting point of how to to use the x-Page component. Then, look atstatic/index.html,static/components/index.htmland finallystatic/components/Page/Page.htmlfor how this Page is imported and customized. Secondly, use thearticles/*.htmlarticle 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 likeapp-example.htmlandstatic/components/App.htmlfor examples of building single-page apps with Modulo. Editstatic/index.htmlandstatic/components/index.htmlfor Component examples.
Project Starter Templates
Get a head start with ready-to-deploy website demonstrating standard usage.
- Download the zip file
- Unzip
- 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.