{"id":18277724,"url":"https://github.com/ctnicholas/modjool","last_synced_at":"2026-02-02T02:04:27.474Z","repository":{"id":40752864,"uuid":"262176989","full_name":"CTNicholas/modjool","owner":"CTNicholas","description":"Tiny, elegant, enjoyable; custom elements with Modjool. Ideal for creating user interface libraries \u0026 reusable web components.","archived":false,"fork":false,"pushed_at":"2022-12-06T23:33:00.000Z","size":798,"stargazers_count":3,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-25T21:06:36.673Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://modjool.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CTNicholas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-07T23:07:09.000Z","updated_at":"2022-11-12T20:19:35.000Z","dependencies_parsed_at":"2023-01-24T12:31:28.247Z","dependency_job_id":null,"html_url":"https://github.com/CTNicholas/modjool","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CTNicholas/modjool","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fmodjool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fmodjool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fmodjool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fmodjool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CTNicholas","download_url":"https://codeload.github.com/CTNicholas/modjool/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CTNicholas%2Fmodjool/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261987601,"owners_count":23240873,"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":[],"created_at":"2024-11-05T12:20:24.140Z","updated_at":"2026-02-02T02:04:27.433Z","avatar_url":"https://github.com/CTNicholas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- suppress ALL --\u003e\n\u003ch1\u003e\n  \u003cspan\u003e\u003c/span\u003e\n  \u003ca href=\"https://modjool.js.org\"\u003e\u003cimg alt=\"modjool - custom elements  \u0026 web components\" src=\"https://modjool-docs.vercel.app/images/mj_logo.png\" align=\"center\"\u003e\u003c/a\u003e\n  \u003cbr/\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/modjool\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/modjool?style=flat-square\" alt=\"npm\"\u003e\u003c/a\u003e \u003ca href=\"https://bundlephobia.com/result?p=modjool@latest\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/modjool?color=%2346C018\u0026amp;label=minzip\u0026amp;style=flat-square\" alt=\"npm bundle size\"\u003e\u003c/a\u003e \u003ca href=\"https://standardjs.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square\" alt=\"JavaScript Style Guide\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/modjool\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/modjool?color=%2346C018\u0026amp;style=flat-square\" alt=\"NPM\"\u003e\u003c/a\u003e \u003c!--[![GitHub last commit](https://img.shields.io/github/last-commit/CTNicholas/modjool?color=%2346C018\u0026style=flat-square)](https://github.com/CTNicholas/modjool/)--\u003e\n\u003c/p\u003e\n\n# [Documentation](https://modjool.js.org)\nFull guide \u0026 documentation available at the [Modjool Docs](https://modjool.js.org) website.\n\n## Latest update\n**v1.1** - Added [findSlot instance param](https://modjool.js.org/docs/slots#slot-elements), enabling easy creation of [headless components](https://modjool.js.org/docs/headless-components). \n\n\n# Introduction\n Modjool is a lightweight JavaScript framework for creating user interface libraries\n and simple web components. It's ideal for creating UI libraries and simple reusable components, by\n allowing for easy creation of native custom elements.\n \n\n\n   \n## Overview of features\n\n* **Simplicity** - simplify away classes, styling, multiple HTML tags, into one custom element\n* **HTML templates** - use attributes, slots, dynamic content \u0026 more\n* **CSS templates** - with scoped CSS, and all the above\n* **Lifecycle events** - run JS at different points in an element's lifecycle\n* **Reactive data** - body updates when the data changes\n* **Pairs up** - combine with CSS libraries, such as Tailwind, Bulma, Bootstrap\n \n \n## Code example\n```javascript\nmodjool.create({\n  tag: 'like-button',\n\n  js: ({ attr, elem }) =\u003e {\n    elem.onclick = () =\u003e attr.likes++    \n  },\n\n  html: ({ attr, slot }) =\u003e `\n    \u003cbutton\u003e\n      ${slot} • \u003cb\u003e${attr.likes}\u003c/b\u003e\n    \u003c/button\u003e\n  `\n})\n```\n\n ```html\n\u003clike-button likes=\"641\"\u003eLike me!\u003c/like-button\u003e\n```\n\nTry `\u003clike-button\u003e` on CodeSandbox:\n\n[![Edit Modjool \u003clike-button\u003e](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/modjool-like-button-6gfyo?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026file=/like-button.js)\n\n## Read more\n[Guide](https://modjool.js.org/docs) and [API](https://modjool.js.org/api) available at the [Modjool Docs](https://modjool.js.org) website.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fmodjool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctnicholas%2Fmodjool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctnicholas%2Fmodjool/lists"}