A drop-in JavaScript framework for modular web components, kept to about 2000 lines
LGPL-2.1 License
Modulo is a lightweight framework for creating HTML Web Components: Reusable snippets of HTML, CSS, and JavaScript that create new HTML-like tags that can be used and reused anywhere on your site. Modulo runs entirely in the browser, and can be incorporated with just a couple lines of code into any HTML file (see the "Quick start"), such that no terminal usage is necessary. However, if you prefer, you can also start projects using NPM from the Terminal (see the "NPM start").
Beginner-friendly features inspired by React, Svelte, and Vue.js, in only 2000 lines of dependency-free, self-building JavaScript. A “no fuss” drop-in for existing web apps or Jamstack static sites.
Try interactive demos and learn more on the website: https://modulojs.org/
Project Status: alpha
(Well-documented with lots of examples, but still a
work in progress -- help by trying it out!)
<script src="https://unpkg.com/mdu.js"></script>
<template Modulo>
and </template>
to mark where in your HTML you are<template Modulo>
<Component name="HelloWorld">
<Template>
Hello <strong>Modulo</strong> World!
</Template>
<Script>
console.log('Hello Modulo JS world!');
</Script>
<Style>
strong { color: purple; }
</Style>
</Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-HelloWorld></x-HelloWorld>
<p>In a P tag: <x-HelloWorld></x-HelloWorld></p>
(Optional) Download src/Modulo.js
(the single 2000-line file that contains all of the framework) to wherever
you put JS files for your website (for example, /static/js/Modulo.js
)
Continue? Want to try more? The official beginner tutorial picks up where this leaves off: Ramping Up with Modulo - Part 1
Prefer command-line tools, such as NPM? Run the following, and follow the on-screen commands:
npm init modulo
(C) 2023 - Michael Bethencourt LGPLv3