Full guide & documentation available at the Modjool Docs website.
v1.1 - Added findSlot instance param, enabling easy creation of headless components.
Modjool is a lightweight JavaScript framework for creating user interface libraries and simple web components. It's ideal for creating UI libraries and simple reusable components, by allowing for easy creation of native custom elements.
- Simplicity - simplify away classes, styling, multiple HTML tags, into one custom element
- HTML templates - use attributes, slots, dynamic content & more
- CSS templates - with scoped CSS, and all the above
- Lifecycle events - run JS at different points in an element's lifecycle
- Reactive data - body updates when the data changes
- Pairs up - combine with CSS libraries, such as Tailwind, Bulma, Bootstrap
modjool.create({
tag: 'like-button',
js: ({ attr, elem }) => {
elem.onclick = () => attr.likes++
},
html: ({ attr, slot }) => `
<button>
${slot} • <b>${attr.likes}</b>
</button>
`
})
<like-button likes="641">Like me!</like-button>
Try <like-button>
on CodeSandbox:
Guide and API available at the Modjool Docs website.