Getting Started

Embarking on your Monster journey requires a basic understanding of HTML, CSS, and JavaScript. If you're new to frontend development, consider having a beginner's guide handy as you explore Monster.

For additional support, join the conversation on Stack Overflow by tagging your queries with "javascript" and "monster". Alternatively, engage with our community right here in this ChatGPT Monster Chat for tailored assistance.

Monster in Your Browser

Dive into Monster with just a text editor and a browser. Start by crafting an index.html file with the following snippet:

<!DOCTYPE html>
                  <html lang="en">
                  <head>
                  <meta charset="utf-8">
                  <title>Build fantastic websites!</title>
                  <style>
                  *:not(:defined) {
                  visibility: hidden;
                  }
                  </style>

                  </head>
                  <body>

                  <main>
                  <monster-select>
                  <div data-monster-value="value1">label-1</div>
                  <div data-monster-value="value2">label-2</div>
                  <div data-monster-value="value3">label-3</div>
                  </monster-select>

                  <script type="module">
                  import 'https://esm.sh/@schukai/monster/source/components/form/select.mjs';
                  import { PropertyStyleSheet } from
                  'https://esm.sh/@schukai/monster/source/components/stylesheet/property.mjs';
                  document.adoptedStyleSheets = [PropertyStyleSheet];
                  </script>


                  </main>

                  </body>
                  </html>

Test code on the playground

Launch this file in your browser to see Monster's 'Version' class in action, displaying a version number on your page.

Well done! You've just harnessed a slice of Monster's capabilities. Each Monster component operates independently, allowing you to cherry-pick the features you need. Or, you can embrace Monster in its entirety for a comprehensive toolkit.

Monster is accessible through CDNs like jsDelivr and Skypack or can be integrated via NPM or git repositories, offering versatility without dependencies, making it compatible with frameworks like Bootstrap or jQuery.

Monster via NPM, Yarn, or PNPM

To install Monster with NPM, Yarn, or PNPM, follow these steps:

Launch your terminal and navigate to your project directory.
Execute: npm install @schukai/monster or yarn add @schukai/monster or pnpm add @schukai/monster

This command fetches the latest Monster version. To target a specific release, append @version_number to the package name.

After installation, you can incorporate Monster modules into your project as follows:


                  import {Version} from '@schukai/monster/source/types/version.js';
                  document.getElementById('version')
                  .textContent = new Version('1.0.0').toString();

That's it! You're now equipped to leverage Monster's components in your project.

The current width of the area is too small to display the content correctly.