# kbrsh/moon

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/kbrsh-moon).**

5,951 stars · 194 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/kbrsh/moon
- Homepage: https://moonjs.org
- awesome-repositories: https://awesome-repositories.com/repository/kbrsh-moon.md

## Topics

`functional-programming` `javascript` `moon` `ui`

## Description

Moon is a minimal reactive UI library for building user interfaces with a component composition framework, client-side routing, server-side rendering, and signals-based reactivity. It provides a virtual DOM diffing engine that computes minimal real DOM mutations, enabling efficient view updates by comparing in-memory UI representations against previous versions.

The library distinguishes itself through a signals-based reactivity system that tracks data dependencies through observable signals, triggering targeted DOM updates only when values change. It implements a state driver pattern for unidirectional data flow, where a centralized state store provides data as input and accepts changes as output. Moon also includes a client-side history router that intercepts URL changes via the History API to swap view components without reloading the page, preserving application state.

The framework supports declarative view rendering using HTML-like markup with embedded expressions for data binding and event handling, along with directive-based behavior for common UI patterns. It offers server-side string rendering that generates complete HTML strings on the server by executing components in a non-browser environment, and includes project scaffolding through a command-line tool that sets up a predefined directory structure and build configuration from a single command.

## Tags

### User Interface & Experience

- [Reactive UI Libraries](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-libraries.md) — A minimal library for building user interfaces from components that automatically update when underlying data changes.
- [Component Composition Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-composition-frameworks.md) — Nests reusable, self-contained UI pieces together to build complex interfaces from simple building blocks.
- [Reactive UI Updates](https://awesome-repositories.com/f/user-interface-experience/reactive-ui-updates.md) — Automatically re-computes and updates the user interface in response to state changes via signals.
- [Signal-Based Reactivity](https://awesome-repositories.com/f/user-interface-experience/signal-based-reactivity.md) — Implements observable signals that trigger targeted DOM re-renders only when their values change.
- [Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling.md) — Responds to DOM interactions like input changes and clicks by running handler functions that update state. ([source](https://moonjs.org/guide))

### Graphics & Multimedia

- [HTML-Like Markup Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering/declarative-rendering/html-like-markup-renderers.md) — Describes UI structure directly in JavaScript using HTML-like markup with embedded expressions for data binding and event handling. ([source](https://moonjs.org/guide))

### Software Engineering & Architecture

- [UI Component Compositions](https://awesome-repositories.com/f/software-engineering-architecture/modular-program-composition/function-composition/ui-component-compositions.md) — Builds interfaces by nesting reusable functions that return virtual DOM trees for modular view logic.
- [Centralized State Stores](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/centralized-state-stores.md) — Stores and updates application data through a centralized driver that provides data as input and accepts changes as output. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [Driver-Based State Flows](https://awesome-repositories.com/f/software-engineering-architecture/unidirectional-state-management/driver-based-state-flows.md) — Manages application state through a unidirectional data flow where a driver function receives new state and returns it as input.

### Web Development

- [Client-Side Routers](https://awesome-repositories.com/f/web-development/client-side-routers.md) — Ships a client-side history router that intercepts URL changes via the History API to swap views without reloading.
- [Client-side Routing](https://awesome-repositories.com/f/web-development/client-side-routing.md) — Navigates between component-based views on the client side using URL changes without full page reloads. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Builds interfaces by nesting reusable functions that return virtual DOM trees for modular composition. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [Declarative UI Structures](https://awesome-repositories.com/f/web-development/declarative-ui-structures.md) — Uses HTML-like markup with embedded expressions for data binding and event handling directly in JavaScript.
- [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Provides a signals-based reactivity system that automatically updates the DOM when underlying data changes. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [Server-Side Renderers](https://awesome-repositories.com/f/web-development/server-side-renderers.md) — Generates complete HTML strings on the server by executing components in a non-browser environment.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Generates complete HTML strings on the server by executing components in a non-browser environment. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [Server-Side Rendering Engines](https://awesome-repositories.com/f/web-development/server-side-rendering-engines.md) — Generates HTML on the server for faster page loads and search engine indexing.
- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/virtual-dom-diffing.md) — Compares in-memory UI representations to compute minimal real DOM mutations.
- [UI Directives](https://awesome-repositories.com/f/web-development/dom-element-manipulators/directive-based-manipulators/ui-directives.md) — Ships built-in directives for common UI patterns such as conditional rendering and iteration. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))
- [State-Comparison Updates](https://awesome-repositories.com/f/web-development/virtual-dom-diffing/dom-state-preservation/virtual-dom-diffing/state-comparison-updates.md) — Updates the DOM only where data changes by comparing previous and current states. ([source](https://cdn.jsdelivr.net/gh/kbrsh/moon@master/README.md))