Introduction: What You Will Build

Welcome to this step-by-step guide on building a browser-based drawing application that uses MetaMask for authentication and Arkiv as a decentralized storage layer.

The Goal

The goal of this tutorial is to demonstrate how to use Arkiv with a browser wallet like MetaMask. Unlike the fullstack dashboard tutorial (which uses a private key on the server), this project shows how a user can interact with Arkiv directly from their browser — signing transactions through MetaMask.

We will build a single-page application consisting of three main parts:

1. MetaMask Wallet Integration: Connect to the user’s browser wallet, automatically switch to (or add) the Arkiv Kaolin testnet, and use MetaMask to sign on-chain transactions.

2. A p5.js Drawing Canvas: A simple canvas where users can draw freehand sketches with their mouse.

3. Blockchain-Backed Gallery: Sketches are saved as entities on the Arkiv blockchain. The app queries Arkiv for the connected user’s sketches and displays them in a gallery, complete with links to the on-chain explorer.

The Final Product

By the end of this tutorial, you will have an app that:

• Connects to MetaMask and switches to the Kaolin testnet
• Lets users draw on a canvas and save their artwork to Arkiv
• Displays a gallery of the user’s previously saved sketches
• Links each sketch to the Arkiv Kaolin Explorer for on-chain verification

Check out a live demo of the final application here. You can also browse the full source code on GitHub.

This guide is designed to be a hands-on learning experience. We’ll break down each step, explain the code, and show you how to connect all the pieces. Let’s get started!