modjool

1.1.2 • Public • Published

modjool - custom elements  & web components

npm npm bundle size JavaScript Style Guide NPM

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:

Edit Modjool <like-button>

Read more

Guide and API available at the Modjool Docs website.

Package Sidebar

Install

npm i modjool

Weekly Downloads

59

Version

1.1.2

License

MIT

Unpacked Size

255 kB

Total Files

41

Last publish

Collaborators

  • ctnicholas