🍃 A Minimal Fediverse Reader Experiment :: Chris Hayes | Web Dev

Screenshot of the Fediverse Reader UI Screenshot of the Fediverse Reader UI

📚 Why Build a Fediverse Reader?

I wanted to learn how to consume Mastodon content in a “read-only” way—no posting, boosting, or liking, just viewing.

Enter Fedify. I started with a minimal Next.js example that taps into Fedify and ActivityPub.

Initially planned as a boilerplate for other developers, but as I explored, the design aspect drew me in.

🔨 The Approach

This project queries a Mastodon post by URL and displays it on a custom page.

It’s lightweight, focusing only on reading content without handling interactions.

While the main feature is simple—show a single Mastodon post—styling and layout posed the real challenge.

I aimed for a consistent, fun appearance, battling messy floating shapes and SVG elements. The React code might not be perfect, but it served its purpose.

Another screenshot, this time inside and with a resizeable pool. — Desktop and mobile page designs laid out in Inkscape.

🎨 Designing in Inkscape for a Web App?

Yes, Inkscape. While dedicated web design tools are common, Inkscape is effective for prototyping. You can draw and iterate quickly, then recreate shapes in code.

Trial-and-error in React is time-consuming, so polished designs saved time. It kept me motivated and provided direction, even with complex SVG paths in code.

A closeup of the toot text where you can hover the hashtags to see a yellow highlight, like a yellow highlighter. Drag selecting text also highlights text, though it's just yellow and doesn't have the marker shape to it.

🎨 SVG Paths for Style

The highlight and link backgrounds utilize SVG paths, making it easy to control path lengths and create subtle animations. These animations include highlights that "underline" hashtags or links.

I also experimented with animated clouds, where each blob is a separate path, adding a playful touch. This whimsical design element distinguishes it from a standard "just text and links" interface.

Hovering the author username shows a nice little cloud pop in and below that the full username is displayed. The author avatar is also shown in sepia.

🛠️ Considering Other Tools

I considered using Penpot (a FOSS alternative to Figma) but faced stability issues and limited VM resources. Inkscape's stability and drawing tools were more reliable for now, though Penpot remains a future option as it develops further.

💻 Code and Availability

This project was a learning experience rather than a polished final product. In the spirit of open-source, all the code is available here:

GitHub: Christopher-Hayes/basic-fediverse-reader

🏁 Wrapping It Up

This Fediverse reader was a quick experiment to learn Fedify and ActivityPub, and to iterate on designs in Inkscape. It's not perfect but serves as a working example for exploring the Fediverse without full social interaction. Give it a try and share your thoughts!

👉 Try it out at fediverse.hayes.software