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.

    Install

    npm i modjool

    DownloadsWeekly Downloads

    39

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    255 kB

    Total Files

    41

    Last publish

    Collaborators

    • ctnicholas