Näher am Browser
Monster erweitert HTML, CSS und JavaScript, statt eine neue Abstraktionsschicht darüberzulegen. Was Sie über das Web wissen, gilt auch hier.
Produkte · Open Source
Web Components, mit denen wir selbst bauen
Monster ist unsere Open-Source-Bibliothek für schnelle, robuste Weboberflächen. Sie setzt auf das, was jeder Browser kann: HTML, CSS und JavaScript, ohne eigene Sprache und ohne Zwang zu einem Framework. Sie binden nur die Bausteine ein, die Sie brauchen, und ergänzen damit Ihr bestehendes Projekt. Mit denselben Komponenten bauen wir die Oberfläche von Workspace.
Warum Monster
Nur laden, was Sie nutzen
Jede Komponente ist ein eigenes ES-Modul. Sie importieren den Select, die Datentabelle oder den Kalender einzeln und halten Ihre Seite schlank.
Passt zu Ihrem Projekt
Monster fügt sich in bestehende Websites und Anwendungen ein, ohne die Architektur zu bestimmen. Ein einzelnes Formularfeld ist genauso möglich wie eine ganze Oberfläche.
Hell und dunkel aus einem Guss
Farben, Abstände und Rahmen kommen aus gemeinsamen Design-Tokens. Vorder- und Hintergrund sind als Paare angelegt und bleiben im dunklen Modus lesbar.
Was in der Bibliothek steckt
Formulare
Auswahlfelder mit Suche, Baumauswahl, Assistenten in mehreren Schritten, Anmeldung und Passwortfeld, Datei-Dropzone, Mengenfeld und Schalter.
Datentabellen
Tabellen mit Filtern, Spaltenauswahl, Seitenwechsel und Speichern, angebunden an eine REST-Schnittstelle oder an den lokalen Speicher des Browsers.
Layout und Navigation
Panels, Tabs, geteilte Ansichten, Slider, Overlays, Baummenüs und ein Inhaltsverzeichnis für lange Seiten.
Kalender und Zeit
Ein Monatskalender, in dem sich Termine auch mit der Tastatur verschieben lassen, dazu Tagesansicht und Zeitleiste.
Inhalte und Dateien
Dateimanager, Kameraaufnahme, Bildeditor, Viewer und ein Kopieren-Knopf für Codes und Links.
Kennzahlen und Shop
KPI-Kacheln und Metrik-Grafiken für Dashboards, dazu Warenkorb, Kaufbox und Variantenauswahl für Onlineshops.
In vier Schritten zur ersten Komponente
Sie installieren Monster mit npm, Yarn oder pnpm. Für einen ersten Versuch reicht ein Modul-Import im Browser.
Sie setzen die Komponente als HTML-Element in Ihre Seite, zum Beispiel ein Auswahlfeld mit seinen Einträgen.
Optionen legen Sie über Attribute fest. Für mehr Verhalten greifen Sie mit JavaScript auf die Komponente zu.
Mit den Design-Tokens passen Sie Farben und Abstände an Ihre Marke an, hell wie dunkel.
Darauf können Sie sich verlassen
Monster wächst seit dem ersten Commit im Juni 2021 in kleinen, dokumentierten Releases. Jede Änderung steht im Changelog.
Ein eigener Testlauf baut den aktuellen Stand und prüft ihn in Chromium, Firefox und WebKit, mit aktiver Content Security Policy.
Tabellen, Auswahlfelder und Formulare in Workspace sind Monster-Komponenten. Was wir verbessern, kommt der Bibliothek zugute.
Auf monsterjs.org finden Sie zu jeder Komponente Optionen, Beispiele und einen Playground, in dem Sie Code direkt im Browser testen.
Ein eigener KI-Leitfaden auf monsterjs.org beschreibt Komponentenverträge und Gestaltungsregeln, damit Agenten Monster-Code nachvollziehbar erzeugen und prüfen.
Für Entwickler und für Unternehmen
Sie entwickeln selbst
Nutzen Sie Monster in Ihrem nächsten Projekt, melden Sie Fehler und schlagen Sie Funktionen vor. Dokumentation, Beispiele und Playground warten auf monsterjs.org.
Zur DokumentationSie suchen ein Team
Wir sind die Entwickler hinter Monster. Ob Kundenportal, Fachanwendung oder Dashboard: Wir bauen Ihre Webanwendung mit den Komponenten, die wir am besten kennen.
Softwareentwicklung ansehenHäufige Fragen
Unter welcher Lizenz steht Monster?
Unter der GNU Affero General Public License, Version 3 (AGPL-3.0). Kommerzielle Lizenzen bieten wir ebenfalls an.
Brauche ich React, Vue oder Angular?
Nein. Monster-Komponenten sind Web Components und laufen direkt im Browser. Sie verwenden sie in einfachem HTML oder zusammen mit dem Framework Ihres Projekts.
Wie installiere ich Monster?
Mit npm über das Paket @schukai/monster, alternativ mit Yarn oder pnpm. Für schnelle Versuche importieren Sie einzelne Module direkt im Browser.
Wo bekomme ich Hilfe?
In der Dokumentation auf monsterjs.org. Für Fragen zur kommerziellen Unterstützung und zu Lizenzen schreiben Sie uns.
Soll Ihre nächste Webanwendung auf Monster laufen?
Erzählen Sie uns, was Ihre Anwendung können soll. Wir zeigen Ihnen, wie wir sie mit Monster umsetzen, oder helfen Ihrem Team beim Einstieg. Alles Technische zum Nachlesen finden Sie auf monsterjs.org.