> For the complete documentation index, see [llms.txt](https://melody-js.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://melody-js.gitbook.io/docs/quickstart/what-is-melody.md).

# What is Melody?

Melody is a UI framework which enables you to develop user interfaces in a clean and efficient way. It takes care of updating the screen and provides a couple of ways to define components.

It was designed to be very modular so that we can include new trends whenever they make sense while keeping a very stable core.

Let's look at some of the most important parts that make up Melody.

## melody-compiler

The compiler is one of the most central and most powerful parts of Melody. It reads Twig templates and transforms them into something else. Most of the time into instructions for `melody-idom` but there are also plugins to produce JSX for usage with React.

## melody-idom

By default the Melody compiler will produce `idom` instructions. These instructions are then executed at runtime to align the real DOM with what it should look like. This approach is very memory efficient and very fast.

## melody-streams

The recommended component API for Melody. It enables reactive programming by leveraging the expressiveness and power of [Rx.js](https://github.com/ReactiveX/rxjs) while producing easy to read and modify components with a lot of potential for building powerful abstractions and sharing code between components.

## melody-hooks

{% hint style="danger" %}
**Deprecated.** We recommend to use `melody-streams` instead.
{% endhint %}

Offers a modern component API for using hooks with Melody. A concept that was originally proposed by [React](https://reactjs.org/docs/hooks-intro.html) and which works perfectly for Melody, too.

While certainly interesting and a good option for former React users, we would recommend to use the `melody-streams` API instead.

## melody-component

{% hint style="danger" %}
**Deprecated.** We recommend to use `melody-streams` instead.
{% endhint %}

This is the core of the component API we've been using since 2015. It offers an easy way to define components, leverages mixins for horizontal code reuse and manages state using a Redux-compatible store. Side effects can be dealt with using `redux-thunk`, `redux-saga` or - our preferred approach - by using `redux-observable`.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using `melody-streams` for new components instead.

## melody-hoc

{% hint style="danger" %}
**Deprecated.** This package is not needed when using `melody-streams`.
{% endhint %}

Offers higher order components for use with `melody-component`. Essentially a more declarative and cleaner approach to horizontal reuse, build upon the mixin concept from `melody-component`.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using `melody-streams` for new components instead.

## melody-redux

{% hint style="danger" %}
**Deprecated.** This package is not needed when using `melody-streams`
{% endhint %}

Higher Order Components for providing and connecting a redux store to a `melody-component`.

This API is showing its age and no longer offers a competitive development experience. We strongly recommend to consider using `melody-streams` for new components instead.