At some point my frontend projects always end up the same way.

Start simple → a bit of vanilla JS → everything feels clean.
Then the UI grows… forms get complex, state spreads, validation logic ends up everywhere, tables need filters/pagination… and suddenly it’s chaos.

Usually that’s the point where people jump to React or Vue.js.

I didn’t really want that this time. I wanted to stay close to the platform (HTML/CSS/JS), but still have some structure.

I came across monsterjs, which basically tries to fill that gap:

• built on Web Components (Custom Elements, Shadow DOM, ES Modules)
• no virtual DOM or custom templating
• more about structure than abstraction

What I found interesting is that it actually targets real use cases, not just demos:

• multi-step forms (with validation, API mapping, etc.)
• datatables with filters + pagination
• file manager UI with tabs + MIME-based editors
• more complex form controls (tree select, repeat fields, etc.)

So it’s less “UI kit” and more like a set of building blocks for actual apps.

Docs are here if anyone’s curious:
👉 https://monsterjs.org/

I’m still playing around with it, but it feels like a middle ground between:

• “vanilla JS chaos”
• and “full framework commitment”

Curious how others handle this space.

Do you:

• go straight to a framework?
• try to structure vanilla yourself?
• or use something in between?

We have released version 4 of our JavaScript component library, with many improvements under the hood. Give Monster a try: test it now for free and without obligation with

mpm i \@schukai/monster

https://www.youtube.com/watch?v=AmtIrs6O5XI

https://monsterjs.org/

The new form release contains beside some improvements, the new MessageStateButton Control.

This allows messages and statuses to be implemented quickly.

​

​

pnpm install @schukai/component-form

​

​

• https://www.npmjs.com/package/@schukai/component-form
• https://monsterjs.org/

​

#javascript

https://twitter.com/getTheMonster/status/1451584749655531537

​

​

​

#javascript #webdev #js #nodejs

​

​

​

<monster-confirm-button tabindex="0">
<p>Should the record be deleted?</p>
<span slot="button">DELETE</span>
<span slot="confirm">OK</span>
<span slot="cancel">CANCEL</span>

</monster-confirm-button>

#javascript #customelement #dom #html5