Canvas Saver
Canvas Saver helps content creators use tldraw to create complex presentations without worrying about losing their work.
Created on 30th June 2024
•
Canvas Saver
Canvas Saver helps content creators use tldraw to create complex presentations without worrying about losing their work.
The problem Canvas Saver solves
Tldraw is a powerful canvas creator I've used to make educational content for developer education. The out-of-the-box feature set is fairly robust but is missing some wants/needs I have as a content creator. One of these is the reliable persistence and storage of canvas creations. The default process relies on copying a "snapshot" link generated by tldraw. Sharing this link does allow users to interact with the canvas however, there is no way to recover the canvas if you lose your link and don't have it stored locally. Sadly, I lost hours of work before I learned this painful lesson!
Canvas Saver solves this problem by capturing a snapshot JSON object, and storing it to Arweave via Irys SDK using the Coinbase Smart Wallet and Base Eth/Sepolia to pay for the storage. Irys provides a mechanism for searching for uploads based on your wallet address so I can always find my canvas even if I lose the gateway url to serve it.
Challenges I ran into
I started with a template repo from the devrel at Irys. It was initially challenging to convert the utility functions to handle my canvas JSON object but I worked it out with the help of some Google-fu and ChatGPT debugging. I made sure to use the commit history and README to explain which parts are the template and which parts I added/customized.
Tracks Applied (2)
Coinbase Smart Wallet
Creator Track
CREATOR with Zora
Technologies used
Cheer Project
Cheering for a project means supporting a project you like with as little as 0.0025 ETH. Right now, you can Cheer using ETH on Arbitrum, Optimism and Base.
