The Founder's Problem
Readlyn
Creating professional infographics takes hours in Canva or Figma. You need design skills, layout knowledge, and time you don't have. Content creators and marketers need visual content fast, without a design degree or an expensive agency.
Timeline
21 days
Solo sprint · full ownership
Target User
Content creators, marketers & developers
Performance
Infographic generation in <8 seconds, streaming elements in real time
Why Alternatives Fell Short
- Canva and Figma require manual design work. There's no AI that understands your topic and builds the layout for you.
- Existing AI image tools generate pictures, not structured data-rich infographics with real facts and statistics.
- No tool combines AI generation with a live interactive canvas editor you can tweak after generation.
What I Built
Groq AI (Llama 3.3 70B) infographic generation from plain text prompts with real facts and statistics
9 layout archetypes (Steps, Stats, Timeline, Compare, List, Pyramid, Funnel, Cycle, Auto) with pre-computed element positions
5 color themes and 3 canvas sizes (A4 Portrait, Square 1080x1080, Wide 1920x600)
Interactive Fabric.js v6 canvas editor with drag, resize, rotate, layers panel, and properties panel
Tech Stack & Why
Next.js 16 + React 19
App Router for clean server/client split. Streaming API routes for real-time canvas updates.
Fabric.js v6
Most capable open-source canvas library. Handles drag, resize, rotate, and layer management natively.
Groq (Llama 3.3 70B)
800 tokens/second. Fast enough for streaming canvas generation without user frustration.
Supabase
Auth, PostgreSQL for project history, and Storage for parallax image uploads. One SDK for everything.
The 3-Week Process
Canvas architecture + Fabric.js integration, AI prompt engineering + layout archetypes
Streaming generation pipeline, Layers + Properties panels, Supabase auth
Parallax Studio, Export + rate limiting, Polish + deploy
Lessons Learned
Streaming to a canvas is fundamentally different from streaming to text. You need element-level state management, not just string appending.
Pre-computing layout positions for all archetypes was the right call. Dynamic layout calculation at generation time caused jitter.
Rate limiting on AI generation routes is non-negotiable. Without Upstash, a single user can exhaust your Groq quota in minutes.
Parallax Studio was a bonus feature that took 3 days and became the most-shared demo. Scope creep can be strategic.
Would Do Differently
I'd pin the canvas library version on day one and write integration tests before building the UI layer. Fabric.js v6 dropped breaking changes mid-build and forced a full canvas rewrite, a cost that was entirely preventable.