A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Alternatives To Beedle
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Workflow1,05882 months ago17June 11, 20209apache-2.0Shell
A Swift and Kotlin library for making composable state machines, and UIs driven by those state machines.
Workflow Kotlin908
3 days ago185apache-2.0Kotlin
A Swift and Kotlin library for making composable state machines, and UIs driven by those state machines.
12 months ago20March 22, 20212apache-2.0Swift
Swift + Redux + (Combine|RxSwift|ReactiveSwift) -> SwiftRex
a year ago3mitSwift
🌾 Harvest: Apple's Combine.framework + State Machine, inspired by Elm.
7 months agon,ullmitJavaScript
A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Workflow Swift267
115 days ago34October 28, 202236apache-2.0Swift
A Swift and Kotlin library for making composable state machines, and UIs driven by those state machines.
a year ago1January 11, 2017mitSwift
🤖 ReactiveCocoa + State Machine, inspired by Redux and Elm.
10 months ago4October 24, 20162apache-2.0Java
Highly scalable Event-driven, Reactive system for building Stateful apps and Workflow services.
4 years ago1mitSwift
Reactive + Automaton + VTree in Swift, inspired by Elm.
React Nonav57
a year ago2December 09, 201942mitTypeScript
Experimental React Native declarative navigation
Alternatives To Beedle
Select To Compare

Alternative Project Comparisons


The current build status based on whether tests are passing The Uncompressed size of Beedle The GZIP size of Beedle The Brotli size of Beedle License: MIT

Beedle is a tiny library to help you manage state across your application. Inspired by great libraries like Vuex and Redux, Beedle creates a central store that enables you predictably control and cascade state across your application.

This library was initially created as a prototype for this article on CSS-Tricks, where you learn how to build a state management system from scratch with Vanilla JavaScript.

See the documentation See the project structure


How it works

Beedle creates a pattern where a single source of truth, the 'Application State' cascades state across your app in a predictable fashion. To modify state, a set flow of actions and mutations help create a traceable data-flow that makes things a little easier to debug.

Using a Pub/Sub pattern which notifies anything that is subscribed to changes, a fully reactive front-end can be achieved with a few kilobytes of vanilla JavaScript.

A flow diagram that shows an action that calls a mutation, which mutates the state and triggers an update to anything that is listening

As the diagram above shows, a simple, predictable flow is created by pushing data into an action which subsequently calls one or more mutations. Only the mutation can modify state, which helps with keeping track of changes.

Continue reading the documentation

A mini library for small projects

Beedle is inspired by libraries like Redux, but certainly isn't designed to replace it. Beedle is aimed more at tiny little applications or where a development team might be looking to create the smallest possible footprint with their JavaScript.

Performance budget

Beedle is intended to be tiny, so the largest that the uncompressed size will ever get to is 5kb.

Browser support

Beedle is aimed at browsers that support ES6 by default. It also uses a Proxy to monitor state, so anything that supports Proxy will support Beedle.

You could use the Proxy polyfill to support more browsers.

Most major browsers will support Beedle with no issues.

Getting started

You can pull Beedle down via npm or take a zip of this repository. The rest of this guide assumes you've used npm.

1) Install

Run npm install beedle in your project directory.

2) Create a store instance

First up, import it into your JavaScript:

import Store from 'beedle';

Once you've got that you should create some actions, mutations and some initial state:

const actions = {
    saySomething(context, payload) {
        context.commit('setMessage', payload);

const mutations = {
    setMessage(state, payload) {
        state.message = payload;

        return state;

const initialState = {
    message: 'Hello, world'

Once you've got those setup, you can create a Store instance like this:

const storeInstance = new Store({

3) Use in your app

Let's say you've got a text box that you type a message into. When the content is changed, it could dispatch a new message to your store:

// Grab the textarea and dispatch the action on 'input'
const textElement = document.querySelector('textarea');

textElement.addEventListener('input', () => {

    // Dispatch the action, which will subsequently pass this message to the mutation
    // which in turn, updates the store's state
    storeInstance.dispatch('saySomething', textElement.value.trim());

4) Listen for changes

Beedle uses the Pub/Sub pattern to transmit changes. Let's attach the message to a DOM element:

// Grab the text element and attach it to the stateChange event
const messageElement = document.querySelector('.js-message-element');

// This fires every time the state updates
storeInstance.subscribe(state => {
    messageElement.innerText = state.message;

Head over to the basic demo to see this in action


Thanks to Eli Fitch for giving me the idea to call this Beedle. This matches my preference to call my little projects names based on Zelda. Here's Beedle from Zelda.

Thanks to the incredible people who maintain projects such as Redux, Vuex and MobX et. al. Thanks for making our lives easier and for inspiring this project.

Popular State Machine Projects
Popular Reactive Projects
Popular Control Flow Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vanilla Javascript
State Machine
State Management