Collaborative Drawing in Minutes Using Xano

Xano is far more than a database tool — and this guide proves it. You'll see how to combine Xano's real-time websockets, authentication, file storage, and auto-generated API documentation to power a fully collaborative drawing canvas, with a frontend spun up in minutes using a free Cursor agent.

Setting Up Your Database

Start inside Xano's database screen. Use the database assistant to create an images table that stores a user ID alongside an image. A users table and authenticated endpoints come pre-built with every workspace, so your authentication layer is already in place before you write a single line of logic.

Enabling Real-Time Websockets

Head to your workspace settings and open the real-time settings panel. Enable real-time with one click, then copy your connection hash — you'll need it later. Next, create a channel called canvas and enable nested channels so you can support separate drawing rooms. Set permissions to allow anonymous clients for presence and public messaging, keeping things open for this demo while still requiring sign-in to save images.

Once the channel is saved, add a channel trigger configured to listen for both message and join events. This trigger is what allows your app to send and receive drawing payloads between connected users. That's all it takes to have a working websocket backend.

Building Your API Endpoints

Create a new API group called app to hold your business logic. You'll need two endpoints:

• Upload Image — Requires authentication. Accepts a file resource as input, stores it as a variable, and saves it to the images table along with the authenticated user's ID.
• Get All Images — Also requires authentication. Queries the images table and filters results by the current user's ID, so each user only retrieves their own saved drawings.

After publishing both endpoints, take advantage of Xano's automatically generated Swagger documentation. Each API group gets its own Swagger URL, which provides all the structured information an AI agent needs to integrate your endpoints correctly.

Connecting to a Cursor-Built Frontend

With your backend ready, open Cursor and craft a prompt that includes:

• The Xano SDK CDN link
• Your Swagger documentation URLs for both the app and authentication groups
• Your real-time connection hash
• Your Xano instance base URL

Describe the drawing app requirements and let the agent build it. Once it's running locally, you can test it by opening two browser windows, signing up, drawing on the shared canvas, and exporting a PNG. That image gets uploaded to Xano, stored with your user ID, and returned when you visit your profile — complete end-to-end functionality with minimal manual setup.

What This Shows About Xano

With just a handful of button clicks and one AI prompt, you've got real-time collaboration, secure file storage, and authenticated endpoints all working together. This is the kind of full-stack backend capability that Xano delivers well beyond simple data management.