{"id":15065275,"url":"https://github.com/modulojs/modulo","last_synced_at":"2025-04-10T13:33:43.036Z","repository":{"id":60373425,"uuid":"542682907","full_name":"modulojs/modulo","owner":"modulojs","description":"A drop-in JavaScript framework for modular web components, kept to about 2000 lines","archived":false,"fork":false,"pushed_at":"2024-12-31T19:01:15.000Z","size":3895,"stargazers_count":12,"open_issues_count":37,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T16:43:57.824Z","etag":null,"topics":["api","component","css","framework","html","javascript","modulo","modulojs","ui","web-components"],"latest_commit_sha":null,"homepage":"https://modulojs.org/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modulojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-28T16:20:49.000Z","updated_at":"2025-03-15T17:05:55.000Z","dependencies_parsed_at":"2024-01-15T23:16:39.452Z","dependency_job_id":"992d6fa6-8c4f-4361-8bfd-053d92f12643","html_url":"https://github.com/modulojs/modulo","commit_stats":{"total_commits":139,"total_committers":1,"mean_commits":139.0,"dds":0.0,"last_synced_commit":"a05cf8c3f5b3400e3c92bcf3c74f037ca5c5d0c0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modulojs%2Fmodulo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modulojs%2Fmodulo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modulojs%2Fmodulo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modulojs%2Fmodulo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modulojs","download_url":"https://codeload.github.com/modulojs/modulo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248225820,"owners_count":21068078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","component","css","framework","html","javascript","modulo","modulojs","ui","web-components"],"created_at":"2024-09-25T00:36:04.061Z","updated_at":"2025-04-10T13:33:43.019Z","avatar_url":"https://github.com/modulojs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](www-src/img/mono_logo_percent_only.png)\n\n# Modulo\n\nModulo is a lightweight framework for creating **HTML Web Components**: Reusable\nsnippets of HTML, CSS, and JavaScript that create new HTML-like tags that can\nbe used and reused anywhere on your site.  Modulo runs entirely in the browser,\nand can be incorporated with just a couple lines of code into any HTML file\n(see the \"Quick start\"), such that **no terminal usage is necessary**. However,\nif you prefer, you can also start projects using NPM from the Terminal (see the\n\"NPM start\").\n\n- Beginner-friendly features inspired by React, Svelte, and Vue.js, in only\n  2000 lines of dependency-free, self-building JavaScript. A “no fuss” drop-in\n  for existing web apps or Jamstack static sites.\n\n- Try interactive demos and learn more on the website: \u003chttps://modulojs.org/\u003e\n\nProject Status: `alpha` *(Well-documented with lots of examples, but still a\nwork in progress -- help by trying it out!)*\n\n-----\n\n## Quick start\n\n\n1. Include in any HTML file the single Modulo JavaScript file loaded from a CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/mdu.js\"\u003e\u003c/script\u003e\n```\n\n\n2. Now define one or more Modulo web components (custom HTML elements).  First,\nuse `\u003ctemplate Modulo\u003e` and `\u003c/template\u003e` to mark where in your HTML you are\ndefining our components.  Then, add \"Template\", \"Script\", and \"Style\" tags, to\nincorporate HTML, JavaScript, and CSS respectively into your component. E.g.:\n\n```html\n\u003ctemplate Modulo\u003e\n    \u003cComponent name=\"HelloWorld\"\u003e\n        \u003cTemplate\u003e\n            Hello \u003cstrong\u003eModulo\u003c/strong\u003e World!\n        \u003c/Template\u003e\n        \u003cScript\u003e\n            console.log('Hello Modulo JS world!');\n        \u003c/Script\u003e\n        \u003cStyle\u003e\n            strong { color: purple; }\n        \u003c/Style\u003e\n    \u003c/Component\u003e\n\u003c/template\u003e\n\u003cscript src=\"https://unpkg.com/mdu.js\"\u003e\u003c/script\u003e\n```\n\n3. Now, you can use and reuse this new custom element wherever you want, just\nlike any normal HTML tag. E.g.:\n\n```html\n\u003cx-HelloWorld\u003e\u003c/x-HelloWorld\u003e\n\u003cp\u003eIn a P tag: \u003cx-HelloWorld\u003e\u003c/x-HelloWorld\u003e\u003c/p\u003e\n```\n\n\n* *(Optional)* Download [src/Modulo.js](https://unpkg.com/mdu.js)\n  (the single 2000-line file that contains all of the framework) to wherever\n  you put JS files for your website (for example, `/static/js/Modulo.js`)\n\n\n* **Continue?** Want to try more? The official beginner tutorial picks up where\n  this leaves off:\n  [Ramping Up with Modulo - Part 1](https://modulojs.org/tutorial/ramping-up/part1.html)\n\n\n## NPM start\n\nPrefer command-line tools, such as NPM? Run the following, and follow the\non-screen commands:\n\n```bash\nnpm init modulo\n```\n\n\n-----\n\n## License\n\n(C) 2023 - Michael Bethencourt [LGPLv3](https://unpkg.com/mdu.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodulojs%2Fmodulo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodulojs%2Fmodulo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodulojs%2Fmodulo/lists"}