Fork me on GitHub

Ractive Datastore

This project combines the DOM manipulation and data-binding of Ractive.js with the data sync capabilities of the Dropbox Datastore API.

This combination makes it easy to build two-way databinding that syncs across devices.

Demo: Hello, World!

Try opening this app in another browser tab. Changes should be synchronized instantly.

Demo source code

<div id="content"></div>
<script id="template" type="text/ractive">
    <h2>Greeting: {{greeting}}, {{recipient}}!</h2>
    <label>Edit the values (two-way data binding!):</label>
    <input value="{{greeting}}" />
    <input value="{{recipient}}" />

    var rds = new RactiveDatastore(
        'no33k6derwjd4h7', // app key
        'content', // ID of element to populate with template
        '#template', // template string or tag ID
        { greeting: 'Hello', recipient: 'World' } // initial data


Data model

Ractive Datastore uses a single table called "ractivedatastore". Each key/value pair is stored in a record with the key as the ID and the value as a field called "value".

Check it out in the Datastore browser.


You can find the full source code and instructions for using it in the Ractive Datastore GitHub project.