A library for editing data structures that works really well with React.

github | npm | api documentation

What is it?

Dataparcels lets you edit data structures in an extremely flexible, data-centric way.
It lets you traverse your data structures like Immutable.js does, but with added two-way data binding magic.

You can trigger changes to small parts of your data, and those changes will propagate back up and merge into the original data shape automatically. When your data is held in React state, this can form the basis of almost any interactive user interface you can think of.

It’s designed for use with React, and comes with components for easy state management and performant rendering. The heirarchical, componentized nature of React fits perfectly with the heirarchical, componentized nature of dataparcels.

See an example of dataparcels code in action.

Getting Started

Get started with dataparcels, installation instructions and a first example.


1. Data editing

Data editing is the ability to manipulate data based on user input. This includes:

2. UI behaviour

UI behaviour covers features that help the user interact with the data. This includes:

3. Data synchronisation

Data synchronisation encompasses how dataparcels interacts with pieces of data stored externally. This includes:

🚧 indicates that either the feature or example is still in development

πŸš€ indicates a priority feature


Parcel is a data container.

Its job is to hold your data, split it into smaller parts, and merge changes back together.

ParcelHoc is a React higher order component.

Its job is to provide a parcel as a prop, and to handle how the parcel binds to React props and lifecycle events.

ParcelBoundary is a React component.

Its job is to optimise rendering performance, and to optionally control the flow of parcel changes.

ParcelBoundaryHoc is a React higher order component.

Its job is to control the flow of parcel changes. It is the higher order component version of a ParcelBoundary.

See also: ParcelShape, ChangeRequest, CancelActionMarker, shape.


Dataparcels is written and maintained by Damien Clarke, with feedback from Allan Hortle and others at Blueflag. All online library discussion happens over on Github.

As this library matures I intend to make it easier for other to help out, such as guidelines for contributing, design rules and philosophies this library uses, developement setup, and details on dataparcels internal architecture.

I hope this library helps solve some front-end problems for you.