Skip to main content

Malina.js

Malina.js is a minimal JavaScript framework for building reactive web applications, inspired by Svelte.

Usage​

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "template": "malina"
};
createPlayground('#container', options);

Component Syntax​

Malina.js components are written in .xht files with a familiar HTML-like syntax containing script, style, and markup sections:

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<div>
  <p>You clicked {count} times.</p>
  <button @click={increment}>Click me</button>
</div>

Module Imports​

npm modules can be imported as described in the section about module resolution, including bare module imports and importing from different CDNs.

Root Element​

To mount the application instance to a specific DOM element use "livecodes-app" as the element id in the HTML. Otherwise, a new div element is added to document.body.

Language Info​

Name​

malina

Extensions​

.xht

Editor​

script

Compiler​

Malina.js compiler

Version​

malinajs: v0.7.19

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property malina are passed as options to the Malina.js compiler. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "malina": {
    "autoSubscribe": true
  }
}

Starter Template​

https://livecodes.io/?template=malina

Sponsors