Getting Started #

Congratulations on starting your journey to use the objectively best web frontend framework ;)

Hello World #

To start using Mvui, start by installing the package from NPM (using your favourite package manager):

npm install @mvuijs/core

If you do not already have a project set up, you can just use any vanilla JS/TS frontend template (although you may want to set up the tsconfig.json to include "experimentalDecorators": true in the "compilerOptions"). A simple “Hello World” may look something like this:

import { Component, h } from '@mvuijs/core';

@Component.register
class App extends Component {
  render() {
    return [
      h.div('Hello, World!'),
    ];
  }
}

document.body.appendChild(new App());

Hello World Stage 2: A Counter #

The typical “Stage 2 Hello World” of frontend development is building a “counter” component. Its utility is mostly showing most basic form of (component local) state management and event handling.

Note that the demo below is actually live! You can edit the component and change things around as you desire. This is a common feature in this documentation. The sandbox automatically adds the default export to the body of an internal iframe.

import { Component, rx, h } from "@mvuijs/core";

@Component.register
export default class CounterComponent extends Component {
  render() {
    const count = new rx.State(0);
    return [
      h.button(
        { events: { click: () => count.next(v => v + 1) } },
        'Click Me'
      ),
      h.span(count.derive(v => ` Count: ${v}`)),
    ];
  }
}

Applications Built With Mvui #

If you want to see Mvui used in a real-world application, you may want to take a look at Wournal . In fact, Mvui was originally written specifically for Wournal. As an example, here is Wournals color palette editor.

If you have built an application with Mvui yourself and want to see it included here, please open a pull request and it will likely be added!

Using from a CDN #

In general, we recommend setting up a project with NPM and a build system. However you can also use Mvui over a CDN like unpkg. It is recommended to use importmaps and scripts of type="module" for this purpose.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Mvui Hello World</title>
    </head>
    <body>
        <!-- the ui5 import is of course optional -->
        <script type="importmap">
         {
           "imports": {
             "@mvuijs/core": "https://unpkg.com/@mvuijs/core@0.0.3/dist/min/mvui-core.js",
             "@mvuijs/ui5": "https://unpkg.com/@mvuijs/ui5@1.19.0/dist/min/mvui-ui5.js"
           }
         }
        </script>

        <script type="module">
         import { Component, h } from '@mvuijs/core';

         class App extends Component {
           render() { return [ h.div('Hello, World!') ] }
         }
         App.register();

         document.body.appendChild(new App());
        </script>
    </body>
</html>