Getting Started

To use Monster, you must have a foundation in HTML, CSS, and JavaScript. If you are just starting out in frontend development, it is recommended that you have a beginner’s guide open while working through this guide.

You can also ask for help on Stack Overflow by tagging your questions with “javascript” and “monster”.

Using Monster in the browser

To get started with Monster, all you need is a text editor and a browser. The best way to begin is to copy the following example into a file and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Unleash your inner monster!</title>
</head>
<body>

<div>Your version is:
    <span id="version"></span>
</div>

<script type="module">
    import { Version } from 'https://cdn.skypack.dev/@schukai/monster@latest/source/types/version.js';
    document.getElementById('version').innerText = new Version('1.0.0').toString();
</script>

</body>
</html>

Then, open this file in your browser. You have now used the ‘Version’ class from Monster to create a Version object, which is output in a span.

Congratulations!

As shown in the version example, each Monster class or function can be used independently. Alternatively, Monster can be used as a collection of many useful classes and functions via the Monster namespace as a single JavaScript file.

In addition to being available on CDN providers like jsDelivr and Skypack, Monster can also be obtained via NPM or the git repos.

Monster itself has no dependencies and does not impose any specific requirements, so you can use it with Bootstrap, jQuery, or other frameworks.

Using Monster with NPM

To install Monster using npm, you will need to have Node.js and npm (which comes with Node.js) installed on your system.

Open a terminal or command prompt on your computer.
Run the following command: npm install @schukai/monster

This will install the latest version of Monster from the npm registry. If you want to install a specific version of Monster, you can specify the version number after the package name, like this: npm install @schukai/[email protected].

Once the installation is complete, you can import the modules in your JavaScript file like this:

import {Version} from '@schukai/monster/source/types/version.js';
console.log(new Version('1.0.0').toString());

Instead of npm you can of course also use yarn or pnpm.

Monster Manual

Getting Started

Using Monster in the browser

Using Monster with NPM