Realtime multiplayer TypeScript applications

GuideBlogAPI Docs

Canvas is a framework for building realtime TypeScript applications, that runs your core application logic in a durable state container similar to Redux.

It's like if your React state manager implemented a smart contract, with verifiable state transitions and end-to-end verifiability.

Write your application backend as a set of mutations, and user actions get replicated in realtime, with conflicts handled through rollback, CRDTs, and/or custom merge 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 Execution ​

Every Canvas state container runs on a durable execution log, which stores a compactable history of the application.

When new applications are started up, they catch up on history using efficient sync to catch up on the latest state.

This makes it possible to develop multiplayer games, local-first applications like Linear, and realtime applications with higher responsiveness, since users don't need to wait for a network roundtrip.

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

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

© 2024 Canvas Technologies, Inc.