https://github.com/ctnicholas/modjool

Tiny, elegant, enjoyable; custom elements with Modjool. Ideal for creating user interface libraries & reusable web components.
https://github.com/ctnicholas/modjool

Last synced: 5 months ago
JSON representation

Tiny, elegant, enjoyable; custom elements with Modjool. Ideal for creating user interface libraries & reusable web components.

• Host: GitHub
• URL: https://github.com/ctnicholas/modjool
• Owner: CTNicholas
• License: mit
• Created: 2020-05-07T23:07:09.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T23:33:00.000Z (over 3 years ago)
• Last Synced: 2025-06-25T21:06:36.673Z (12 months ago)
• Language: JavaScript
• Homepage: https://modjool.js.org
• Size: 779 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          



  

  

  






      



# [Documentation](https://modjool.js.org)

Full guide & documentation available at the [Modjool Docs](https://modjool.js.org) website.

## Latest update

**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). 

# Introduction

 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.

 

   

## Overview of features

* **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

 

 

## Code example

```javascript

modjool.create({

  tag: 'like-button',

  js: ({ attr, elem }) => {

    elem.onclick = () => attr.likes++    

  },

  html: ({ attr, slot }) => `

    

      ${slot} • ${attr.likes}

    

  `

})

```

 ```html

Like me!

```

Try `` on CodeSandbox:

[![Edit Modjool ](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/modjool-like-button-6gfyo?fontsize=14&hidenavigation=1&theme=dark&file=/like-button.js)

## Read more

[Guide](https://modjool.js.org/docs) and [API](https://modjool.js.org/api) available at the [Modjool Docs](https://modjool.js.org) website.