A concise JavaScript Component framework
-
[X] A single file with about 2000 lines as a thin layer over vanilla Custom Web Components
-
[X] Components system inspired by React, Svelte, and Polymer
-
[X] Modular with opinionated defaults and few assumptions
-
[X] A "no fuss" drop-in to add JS to existing web apps
-
Status:
alpha(ready for some use, but likely has bugs!)
Full getting started guide on Modulo's website: https://modulojs.org/start.html
Modulo is a small framework for creating custom 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. Under the hood, it uses a widely compatible subset of the customElements API. To get started with creating a custom component, do the following 3 steps:
-
Download src/Modulo.js (the single file that contains all of Modulo) to wherever you put JS files for your website (for example,
/static/js/Modulo.js) -
Include in your HTML file a reference to the script with a "Modulo" attribute, which we'll fill later with component definitions:
<script Modulo src="/static/js/Modulo.js">
</script>- Now, inside this embedded script tag, we can define a Modulo Component. We can use "template", "cpart script", and "style" tags, to incorporate HTML, JavaScript, and CSS respectively into our component:
<script Modulo src="/static/js/Modulo.js">
<Component name="HelloWorld">
<Template>
Hello <strong>Modulo</strong> World!
</Template>
<cpart Script>
console.log('Hello Modulo JS world!');
</cpart>
<Style>
strong { color: purple; }
</Style>
</Component>
</script>Now, you can use and reuse your component wherever you want, just like any normal HTML tag:
<x-HelloWorld></x-HelloWorld>
<p>In a P tag: <x-HelloWorld></x-HelloWorld></p>- Continue? Want to try more? The tutorial picks up where this leaves off starting with Part 1, Section 2: CParts
(C) 2022 - Michael Bethencourt