Craf-te

Inspiration

The spark came during a late-night design session on a shared screen. Two teammates, a designer and a copywriter, were trying to iterate on a brand poster. They were pushing the same PNG back and forth over Slack, losing context with every export, losing fonts, losing track of who had the latest version. By 3 a.m. they asked the same question we all know: "Why isn't there a lightweight, fast, AI-powered design tool where you can just work together in real time, without the 400-pound gorilla of enterprise software getting in the way?" We wanted something between Canva and Figma stripped of complexity, loaded with smarts, and alive. Where the canvas breathes with live cursors, where AI generates the image you couldn't find on stock-photo sites in under ten seconds, and where inviting a teammate takes one click instead of an onboarding flow.

What it does

craf-te is a collaborative AI design platform that lets teams create, edit, and ship graphics together in real time. It sits right in your browser, works flawlessly on desktop and mobile, and keeps every stroke, layer, and conversation in sync across every screen connected to the room.

Here's what actually happens when you open it:

Live Canvas Editing: Every shape, text layer, gradient, and image updates instantly across all connected users. No refresh, no "check if the change saved" anxiety.

Cursor Presence: You see exactly where everyone is on the canvas, color-coded and labeled, in real time. It turns a lonely design task into a room full of creative energy.

In-App Project Chat ** A persistent project-level chat sidebar runs alongside the canvas. Talk strategy, drop hex codes, or share feedback without ever leaving the workspace. **AI Image Generation Hit a button, describe what you need, and the platform generates images that slot directly onto your canvas. No tab-switching, no importing, no workflow death spiral.

Advanced Typography System: Dynamic font loading, custom web font support, and paragraph/text controls that actually behave the way designers expect.

Draggable Mobile Controls The editor isn't "shrunken desktop" on a phone. Controls are touch-optimized, panels are draggable, and the entire canvas is responsive without losing functionality.

Auto-Save & State Persistence: Every change is captured, versioned, and recoverable. Reload the page and you land exactly where you left off. Invitation System : Share a project in seconds. Generate a link, invite by email, or pull from your team roster. Permissions are handled cleanly and securely.

Cloud Asset Management: Network hiccups don't destroy work. The platform queues changes locally and replays them the moment the connection returns.

Cloud Asset Management : All uploaded images are stored and optimized through a robust cloud pipeline, ready to embed anywhere on the canvas.

How we built it

We started with a React + TypeScript frontend because predictable state and rock-solid types matter when you're syncing canvas geometry between twenty different users. The entire drawing surface is rendered with a high-performance canvas engine that supports scaling, rotation, opacity, gradient fills, and multi-select operations all on a single HTML5 canvas with GPU-accelerated transforms.

Collaboration Layer: We built a WebSocket-powered realtime channel on top of Supabase's Realtime engine. Here's the magic: every time a user drags a layer, resizes an image, or changes a color, that change is serialized into a lightweight delta and broadcast to every other user in the project. We deliberately built a sparse delta system so only the changed fields travel over the wire, not the entire canvas state. That keeps latency low even on sketchy hotel Wi-Fi.

Cursor & Presence: Each collaborator's mouse position streams through a dedicated presence channel at 30 Hz. The client side smooths those coordinates with a lerp interpolation, so cursors glide naturally even when the network skips a beat.

AI Integration: Image generation is wired directly into the creative flow. A user types a prompt in the AI sidebar, the request hits our backend proxy (also on Supabase), and the generated image drops straight onto the canvas at the user's chosen position. We went with an async generation pipeline so the canvas stays responsive while the image renders in the background.

Mobile Architecture: Instead of trying to squeeze desktop panels onto a phone, we rethought the entire mobile interaction model. Property panels become bottom sheets, the toolbar collapses into a floating action button cluster, and controls are physically draggable. The canvas itself responds to touch with native-feeling pinch-to-zoom that anchors on the gesture midpoint no clumsy zoom buttons required.

State Management: We use a custom undo/redo system with a bounded history stack, so users can walk back through design decisions without bloating memory. Canvas state is normalized and persisted to PostgreSQL with row-level security policies.

Styling: The entire UI is built with Tailwind CSS and a custom Blueprint design system a deep navy palette with precision grid overlays, technical annotation markers, and a Coda/Source Han Mono SC font pairing that feels both industrial and modern.

Challenges we ran into

Realtime Sync Without Thundering Herds: When five people are editing the same text box simultaneously, you hit the classic "last-write-wins" problem fast. We prototyped a full CRDT (Conflict-free Replicated Data Type) approach but that ballooned complexity. Our solution was a hybrid: element-level locking with live presence. If you're actively editing a layer, your cursor "claims" it with a subtle highlight that every other user sees. It feels seamless but prevents silent overwrites.

Canvas Coordinate Hell on Mobile: Getting pinch-to-zoom to anchor on the exact midpoint of two fingers sounds simple until you factor in container padding, CSS transforms, device pixel ratios, and the fact that React re-renders mid-gesture. Our first implementation had the canvas "running away" from the fingers. We solved it by snapshotting the starting transform matrix, computing world-space focal coordinates, and applying the new zoom/pan as a delta from that snapshot — never chasing the live state.

AI Generation Latency vs. UX: Waiting 4 to 8 seconds for an image to generate kills creative momentum. We decoupled the generation pipeline from the canvas renderer: a placeholder slot appears instantly, the image streams in when ready, and the canvas reflows smoothly without jumping layout.

Mobile Toolbar Collapse States: On a small screen, every pixel matters. We fought a long battle against "toolbars taking over half the viewport." The breakthrough was making panels draggable and collapsible with an eye-toggle button, plus a dedicated mobile-optimized property panel that swaps its layout based on min-height breakpoints rather than just width.

Font Preloading and FOUT: Web fonts on a canvas don't render the same way as DOM text. We built a font preloader that resolves web font files before anything hits the canvas, eliminating the flash of unstyled text that plagued our early prototypes.

Accomplishments that we're proud of

Building a canvas editor that feels native on a phone. That's rare. Most "responsive" creative tools are just desktop apps wearing a straitjacket. We rebuilt the interaction model from the ground up.

Getting five-person real-time collaboration to run at 60 fps. The cursor tracking, the live element updates, the chat all happening in parallel without a single dropped frame on mid-tier hardware.

The AI image generation pipeline. A user can literally type "generate a mountain logo with orange gradients" and have a usable layer on their canvas before they finish their coffee.

The undo/redo system. It sounds boring until you realize it has to capture the entire canvas state (elements, groups, gradient fills, fonts, opacity) and restore it in a single frame without breaking the realtime channel. We nailed it.

The Blueprint design aesthetic. This isn't another generic whiteboard. The dark navy interface, the visible grid skeleton, the monospace annotations it makes the tool feel like an instrument, not a toy.

What we learned

Canvas + React don't have to fight. We learned that a properly structured React wrapper around a canvas renderer (with refs, imperative handles, and careful memoization) can be just as reactive as a DOM app while delivering rendering performance that DOM simply can't touch.

Realtime data shapes matter more than the protocol. We spent too long optimizing the WebSocket transport before we realized the real win was in the shape of our deltas. Smaller, targeted updates beat raw compression every time.

Mobile-first doesn't mean mobile-only. By designing the mobile experience first (draggable controls, collapsible panels, touch-native gestures), the desktop experience actually became cleaner. Constraints are a feature.

AI is a creative accelerator, not a replacement. The users who loved our platform weren't asking AI to "design for them." They were using it to get unstuck generate a background, suggest a color palette, mock up a shape. That insight reshaped how we positioned the AI features.

What's next for Craf-te

Component Library & Templates: Curated template kits (social media packs, presentation decks, brand identity systems) that teams can clone and customize. Comments & Approval Workflow: Threaded comments pinned to specific canvas regions, plus an "approve/reject" layer for agency-client workflows. Version History & Branching: Full git-style branching so teams can experiment on design variants without polluting the main canvas. Plugin SDK : Open the editor to third-party plugins: custom shapes, data imports from Figma/Sketch, and external asset pipelines. Video Export: Render designs directly to MP4/GIF for motion graphics and social media posts. Collaborative AI Copilot: An agent that observes the team's design choices in real time and proactively suggests layout improvements, color harmonies, or font pairings based on the live canvas state.