@tomic/react: Using Atomic Data in a JS / TS React project

Atomic Data has been designed with front-end development in mind. The open source Atomic-Data-Browser, which is feature-packed with chatrooms, a real-time collaborative rich text editor, tables and more, is powered by two libraries:

  • @tomic/lib (docs) is the core library, containing logic for fetching and storing data, keeping things in sync using websockets, and signing commits.
  • @tomic/react (docs) is the react library, featuring various useful hooks that mimic useState, giving you real-time updates through your app.

Check out the template on CodeSandbox.

This template is a very basic version of the Atomic Data Browser, where you can browse through resources, and see their properties. There is also some basic editing functionality for descriptions.

Feeling stuck? Post an issue or join the discord.

Getting Started


npm install @tomic/react


For Atomic React to work, you need to wrap your app in a StoreContext.Provider and provide a Store instance.

// App.tsx
import { Store, StoreContext, Agent } from '@tomic/react';

const store = new Store({
  serverUrl: 'my-atomic-server-url',
  agent: Agent.fromSecret('my-agent-secret');

export const App = () => {
  return (
    <StoreContext.Provider value={store}>


Atomic React provides a few useful hooks to interact with your atomic data. Read more about them by clicking on their names


Easy access to the store instance.


Fetching and subscribing to resources


Reading and writing data.


Querying large sets of data.


Easy full text search.


Get the current agent and change it.


Check for write access to a resource.


Find some examples here.