ECHO in Action

This demonstrates how two peers would synchronize over ECHO (The Eventually Consistent Hierarhical Object store), a peer-to-peer graph database written in TypeScript.

Type in the boxes below to create new list items and experiment with the replication toggle to see how clients reconcile when returning from offline mode. Learn more about ECHO.

const TaskList = ({ space, clientIndex }: { space: Space; clientIndex: number }) => {
  const tasks = useQuery(space, Task.filter());
  const [input, setInput] = useState<HTMLInputElement>();

  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
    if (event.key === 'Enter' && input) {
      const task = new Task({ title: input.value });
      input.value = '';
      space.db.add(task);
    }
  };

  const inputId = `createTaskInput--${clientIndex}`;

  return (
    <div className='task-list'>
      <p role='heading'>{`Peer ${clientIndex + 1}`}</p>
      <input
        aria-label='Create new item'
        placeholder='New item'
        id={inputId}
        ref={(e: HTMLInputElement) => setInput(e)}
        onKeyDown={handleKeyDown}
      />
      <div role='list'>
        {tasks.map((task) => (
          <div role='listitem' key={task.id}>
            <input type='checkbox' checked={!!task.completed} onChange={() => (task.completed = !task.completed)} />
            <p>{task.title}</p>
            <button onClick={() => space.db.remove(task)}>&times;</button>
          </div>
        ))}
      </div>
    </div>
  );
};

The highlighted line above shows how easy it is to track state with ECHO.

Simply mutate objects received from ECHO as you would any regular JavaScript object, and the changes will propagate to all connected peers automatically. Read more about ECHO, mutations in TypeScript, and react.