Documentation

Full guide & documentation available at the Modjool Docs website.

Latest update

v1.1 - Added findSlot instance param, enabling easy creation of 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

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:

Read more

Guide and API available at the Modjool Docs website.