MagJS ~ Modular Application Glue

npm i mag.js

Super fast & Simple Intuitive JS2HTML Templating Component Library

import Mag from "mag.js"

//Component:
var Counter = Mag(`
  <div class="counter">
    <p>
     You clicked <count /> times
    </p>
    <button>
      Click me
    </button>
  </div>`,
  function({count=0}) {

  //JavaScript stuff:

  return {
    count,
    button: {
      onClick: e =>
        Counter({count: count + 1})
    }
  }
})

//Render:
Mag(
  Counter(),
  document.getElementById("root")
)

Try the demo on CodePen →

CodePen Examples

Codesandbox template

Video examples

Old readme

Browser install

Default includes ONLY Stateless Components WITH Hooks (useState, useEffect, useContext)

<script src="//unpkg.com/mag.js"></script>

Alternate browser options

State and Stateless Components WITHOUT Hooks

<script src="//unpkg.com/mag.js/dist/mag.min.js"></script>

State and Stateless Components WITH Hooks

<script src="//unpkg.com/mag.js/dist/mag.hooks.min.js"></script>

Only stateless Components WITHOUT useState, useEffect, useContext Hooks

<script src="//unpkg.com/mag.js/dist/mag-stateless.min.js"></script>