Products

// @schukai/monster

Web components we build with ourselves

Monster is our open-source library for fast, robust web interfaces. It builds on what every browser can already do: HTML, CSS and JavaScript, with no language of its own and no framework lock-in. We build the Workspace interface with the very same components.

open monsterjs.org./build-a-web-app
  • licenseAGPL-3.0
  • commercialavailable
  • testedchromium · firefox · webkit
  • since2021
<monster-select
  data-monster-option-features-filterable="true"
  data-monster-option-labels-placeholder="Choose an option"
>
  <div data-monster-value="one">One</div>
  <div data-monster-value="two">Two</div>
</monster-select>

Why Monster

  • Closer to the browser

    Monster extends HTML, CSS and JavaScript instead of piling a new abstraction layer on top. What you know about the web still holds here.

  • Only load what you use

    Every component is its own ES module. Import the select, the data table or the calendar on its own and keep your page lean.

  • Fits your project

    Monster slots into existing websites and applications without dictating the architecture. A single form field works just as well as an entire interface.

  • Light and dark, all of a piece

    Colours, spacing and borders come from shared design tokens. Foreground and background are defined as pairs and stay readable in dark mode.

What’s in the library

  • components/form/

    Forms

    Select fields with search, tree selection, multi-step wizards, login and password field, file drop zone, quantity field and toggle.

  • components/datatable/

    Data tables

    Tables with filters, column selection, pagination and saving, connected to a REST interface or to the browser’s local storage.

  • components/layout/ · navigation/

    Layout and navigation

    Panels, tabs, split views, sliders, overlays, tree menus and a table of contents for long pages.

  • components/time/

    Calendar and time

    A month calendar where you can move appointments with the keyboard too, plus a day view and a timeline.

  • components/content/ · files/

    Content and files

    File manager, camera capture, image editor, viewer and a copy button for codes and links.

  • Metrics and shop

    KPI tiles and metric charts for dashboards, plus shopping cart, buy box and variant selection for online shops.

Quickstart

  1. Install Monster with npm, Yarn or pnpm. For a first try, a module import in the browser is all you need.
  2. Import only the component you need and include the stylesheet.
  3. Drop the component into your page as an HTML element. Set options via data-monster-option-* attributes.
  4. Use the design tokens to match colours and spacing to your brand, in light and dark.
$ npm install @schukai/monster
# oder
$ yarn add @schukai/monster
$ pnpm add @schukai/monster
import "@schukai/monster/source/components/form/select.mjs";
import { PropertyStyleSheet } from "@schukai/monster/source/components/stylesheet/property.mjs";

document.adoptedStyleSheets = [
  ...document.adoptedStyleSheets,
  PropertyStyleSheet,
];

What you can rely on

  • Developed in the open since 2021.Monster has been growing in small, documented releases since its first commit in June 2021. Every change is in the changelog.
  • Tested in three browser engines.A dedicated test run builds the current state and checks it in Chromium, Firefox and WebKit, with an active Content Security Policy.
  • In daily use with us.Tables, select fields and forms in Workspace are Monster components. Whatever we improve benefits the library.
  • Documentation you can try out.On monsterjs.org you’ll find options, examples and a playground for every component, where you can test code right in the browser.
  • Ready for coding agents.A dedicated AI guide on monsterjs.org describes component contracts and design rules, so agents can generate and review Monster code in a traceable way.

FAQ

What licence is Monster under?

The GNU Affero General Public License, version 3 (AGPL-3.0). We offer commercial licences as well.

Do I need React, Vue or Angular?

No. Monster components are web components and run directly in the browser. Use them in plain HTML or alongside your project’s framework.

Where can I get help?

In the documentation at monsterjs.org. For questions about commercial support and licences, drop us a line.

Your next web app on Monster?

We’re the developers behind Monster. Customer portal, business application or dashboard: we build your web app with the components we know best, or help your team get started.

./discuss-your-web-appopen monsterjs.org