Melt.js

A minimalistic yet powerful Javascript library for building web user interfaces

GET STARTED GITHUB

One-way data flow

Predicable application state with a single model and one-way root-to-leaf data flow. Hassle-free way to dispatch the action and data to the model update functions.

Component&Container support

Better separation of concerns and code reusability with presentational components and container components. Connect views to the model easily via containers to get a clean component structure.

Template-based

Write expressive and concise views in pure HTML with react-like binding syntax and built-in directives e.g. each, if, ref etc.

Custom directives

Wrap DOM interactions inside custom directives to create more expressive views and achieve more code reusability

Hello world

Edit in JSFiddle 
<div id="app">
</div>

Melt.app({
  elem: '#app', //the root DOM element
  model: {
    message: 'Hello World'
  },
  template: '<span>{model.message}</span>'
})


A simple counter app

MeltJS has three essential parts:

Edit in JSFiddle 
<div id="counter-app">
</div>

Melt.app({
  elem: '#app', //the root DOM element
  model: {
    count: 0
  },
  update: {
//Pure functions that return a new model
    decrease: function (context) {
      var model = context.model
      return {count: model.count - 1}
    },
    increase: function (context) {
      var model = context.model
      return {count: model.count + 1}
    }
  },
  template:
  `<div>
    <span>{model.count}</span>
    <button on-click='{decrease}'>
        Decrease
    </button>
    <button on-click='{increase}'>
        Increase
    </button>
  </div>`
})


A simple Todo app

Edit in JSFiddle 
<div id="todo-app">
</div>

Melt.component('todo-list', {
  template:
    `<ul>
      <li each="item in props.todos"
        key="{item.id}">
        {item.text}
      </li>
    </ul>`
})

Melt.component('add-todo', {
  template:
    `<form on-submit="onSubmit">
      <input ref="input">
      <button type="submit">
        Add Todo
      </button>
    </form>`,
  class: function AddTodoComponent () {
    this.onSubmit = function (e) {
      e.preventDefault()
      const input = this.refs.input
      var text = input.value
      if (!text.trim()) {
        return
      }
      input.value = ''
      this.props.onAddTodo(text)
    }
  }
})

Melt.container('app', {
  template:
    `<div>
      <add-todo on-add-todo="{addTodo}">
      </add-todo>
      <todo-list todos="{model.todos}">
      </todo-list>
    </div>`
})

Melt.app({
  elem: '#app',
  template: '<app></app>',
  model: {
    todos: []
  },
  update: {
    addTodo: function (context, text) {
      var model = context.model
        return {
          todos: model.todos.concat({
            id: Date.now(),
            text: text
          })
        }
      }
  }
})