Realtime TypeScript on a distributed log

GuideBlogAPI Docs

Canvas is a framework for TypeScript applications, that puts your core application logic into a durable state container like Redux, making it possible to write reactive applications that run everywhere.

You can use it like an embedded, instant-sync database in the browser, that syncs browser-to-server and peer-to-peer.

Write your application as a set of model mutations, and user actions are replicated in realtime, with conflicts handled through rollback netcode or CRDTs or custom logic.

Here's an example to get started:

import { useCanvas } from "@canvas-js/hooks"

const contract = {
  models: {
    messages: {
      id: "primary",
      text: "string",
    }
  },
  actions: {
    createMessage: (db, { text }, { address, msgid }) => {
      db.set("messages", { id: msgid, text })
    }
  }
}

const { app } = useCanvas({ 
  topic: "demo.canvas.xyz", 
  contract,                 
})                          

export const contract = {
  models: {
    messages: {
      id: "primary",
      text: "string"
    }
  },
  actions: {
    createMessage: (db, { text }, { address, txid }) => {
      db.set("messages", { id: txid, text })
    }
  }
}

// From the command line:
$ canvas run contract.ts --topic demo.canvas.xyz 

Distributed Durable Execution ​

Under the hood, each state container stores a compacted version of the execution history of the application.

When new applications are started up, they catch up on history using an efficient sync algorithm that only downloads the difference of their actions.

This means that users don't need to wait for a network roundtrip before they can apply their actions locally. Every user can apply actions on their local replica.

This makes it possible to develop realtime applications like multiplayer games, local-first applications like Linear, and other use cases where performance is important.

For demanding applications, you can shard an application into multiple state containers, and state containers can be snapshotted and compacted.

Learn more ​

To build realtime sync today, you might use a hosted service like Firebase, or write multiple implementations of custom sync code for your server and client.

Recent improvements in databases have made it possible to abstract much of this away. Now, you can just write your state mutations once, and have them run isomorphically on both the frontend and backend.

To learn more, check out our docs, or join us on Github and Discord.

© 2024 Canvas Technologies, Inc.