DEV Community

Oswin Jerome
Oswin Jerome

Posted on

From Easels to My Own Whiteboard: How I Built a Moodboard App to Replace Arc’s Feature

#webdev #nextjs #superbase

🎨 From Easels to My Own Whiteboard: Rebuilding a Moodboard App for Creatives

Like many creatives and visual thinkers, I loved using Easels in the Arc browser. It was my go-to tool for moodboards — a simple, intuitive way to capture screenshots, images, and arrange them into creative layouts.

And then… they removed it.

So instead of complaining — I built my own.

Image description

📌 The First Version: A Weekend Proof of Concept

In a burst of weekend creativity, I put together a whiteboard application using:

  • 🎨 Excalidraw for the canvas
  • ⚡ Next.js for the frontend
  • 🐙 Supabase for backend services and real-time collaboration via WebSockets
  • 🌐 A Chrome extension that sends screenshots and images directly to my whiteboard

The coolest part? I wrote a custom auto-arrangement algorithm that intelligently positioned new images on the board as moodboards.

The result:

  • 📡 Real-time collaboration
  • 🖼️ Instant image capture via a Chrome extension
  • 🗂️ Auto-arranged, visually organized moodboards

It wasn’t perfect — but it scratched the itch I had when Easels disappeared.

🚀 Why I'm Rebuilding It (and Changing the Stack)

Now that I’ve proven the concept works, it’s time to level it up.

I’m planning to:

  • Move to a custom HTML5 canvas implementation (for better control and flexibility)
  • Rebuild the backend using Spring Boot for a more scalable, production-ready backend
  • Switch to PostgreSQL for managing boards, images, and moodboard metadata
  • Retain Next.js for the frontend because of its flexibility and developer experience

This rebuild will give me:

  • 🎛️ Full control over canvas rendering, layering, and layout logic
  • ⚡ Faster, scalable real-time sync
  • 🔄 Better long-term maintainability

🛠️ Planned Architecture

Frontend

  • Custom Canvas (likely using HTML5 Canvas API or libraries like konva.js or fabric.js)
  • Next.js app
  • WebSocket integration for live collaboration
  • Image upload & integration with my existing Chrome extension

Backend

  • Spring Boot REST API + WebSocket server
  • PostgreSQL for storing moodboards, images, layout positions, and metadata
  • Cloud or local image storage

Auto-Arrangement

  • Refactor and optimize my custom image arrangement algorithm
  • Dynamically position images based on canvas size, image dimensions, and user-defined groups

✨ What’s Next?

The ultimate goal is to build a fully open, collaborative moodboarding tool — better than the original Easels — allowing creatives and visual thinkers to:

  • 📥 Instantly send images from anywhere via a browser extension
  • 🖼️ Organize ideas visually in a flexible whiteboard interface
  • 📝 Collaborate in real-time
  • 🎨 Maintain complete creative control without platform limits

I’ll be sharing updates as I go — from building the custom canvas, to optimizing WebSocket sync, to refining the image auto-layout algorithm.

💡 Final Thoughts

Sometimes, when a tool you love disappears, it opens up an opportunity.

I turned my frustration into a fun weekend proof-of-concept project, and now I’m rebuilding it into a real, scalable application — on my own terms.

🚀 Are you a moodboard lover or Arc Easels user too? I'd love to hear your ideas! Drop them in the comments 👇

Top comments (0)