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 hooks 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 part of the library is being developed and will be complete soon.


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.


  • Add rekey, which enables changes via props to be merged into buffered changes (i.e. unsaved changes). This will allow multiple editors to alter the same piece of data simultaneously without overwriting. The ability to rebase unsaved changes onto updated data already exists, but rekey is required to make sense of incoming changes via props.
  • Add cache, an option in useParcelBuffer to save, reload and clear cached data. This can be used with localStorage or similar external storage mechanisms to retain and restore unsaved changes.
  • Add production builds, a proper build process that doesn’t rely on minification and dead code elimination being carried out by the containing project’s build process. This step will finally allow proper optimisations to reduce bundle size.