Melody is a fast and memory efficient library for creating highly dynamic user interfaces

Github
# Create a Melody appyarn create melody-app my-app

In a nutshell

Small

Melody is small, only 8kb (minified, not gzipped) at its core, making it fast for the browser to download and parse.

Error messages

Melody's compiler supports you by giving you understandable and accurate error messages whenever it cannot make sense of a template.

Battle Tested

Live in production to millions of trivago users worldwide.

Flexible

Melody was designed in a modular fashion from the ground up. You can change what goes in, like a different template language, and you are in control what comes out: If you need a different view layer, that's no problem.

Faster

Melody is among the fastest UI libraries out there. Because of its adaptive rendering and memory efficiency, garbage collection is kept at a minimum, giving the browser lots of time to draw smooth and responsive user interfaces.

Structured

Melody provides an API (or set of functions) to enhance your views, it leverages functional programming to help you to create better structure for your applications.

Melody is different

  • Smaller
  • Flexible
  • Efficient
  • Functional

Melody is smaller (8 kb) than most other popular frameworks and libraries: React (40kb), Vue (18kb), Angular 2 (120kb), Glimmer (38kb).

Melody in action

  • Read docs
TodoList.twig
<form ref="{{ form }}" action="javascript:;">
  <input value="{{ text }}" ref="{{ input }}" />
  <button ref="{{ add }}" type="submit">Add</button>
  <ul>
    {% for todo in todos %}
      <li>{{ todo }}</li>
    {% endfor %}
  </ul>
</form>
TodoList.js
import {render, createComponent, RECEIVE_PROPS} from 'melody-component';
import {bindEvents} from 'melody-hoc';
import template from './TodoList.twig';

const stateReducer = (state = {todos: ['Read docs'], text: ''}, {type, payload}) => {
  switch (type) {
    case RECEIVE_PROPS: return {...state, ...payload};
    case 'TEXT_CHANGE': return {...state, text: payload};
    case 'ADD_TODO':
      const {todos, text} = state;
      return {...state, todos: todos.concat(text), text: ''};
  }
  return state;
};

const enhance = bindEvents({
  form: {
    submit(event, {dispatch, getState}) {
      event.preventDefault();
      if(getState().text == '') return;
      dispatch({type: 'ADD_TODO'});
    }
  },
  input: {
    input(event, {dispatch}) {
      dispatch({type: 'TEXT_CHANGE', payload: event.target.value});
    }
  }
});

export default enhance(createComponent(template, stateReducer));

Let’s get started

Github

Check out the 5 mins tutorial on how to build your first Melody application.

# Create a Melody appyarn create melody-app my-app

Dive deeper and read the documentation