JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Mag.js

    MagJS - Modular Application Glue
    Filed under  › 

    • 🔾25%Overall
    • 156
    • 5 hours
    • 🕩12
    • 👥1

    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 and useEffect)

    <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 and useEffect Hooks

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

    Show All