What happens when you try to build a game in Retool? You discover limitations, pivot multiple times, and end up with a hybrid architecture that somehow works.
The Challenge
To build a fully playable Flappy Bird game for the Retool challenge while pushing Retool to its limits.
Spoiler: I found those limits. Then I found creative ways around them.
The Journey: Three Failed Attempts
Attempt #1: Retool's HTML Component
The Plan: Build the entire game in Retool's HTML component with inline JavaScript.
The Reality: Retool strips JavaScript from HTML components for security. The game rendered beautifully but was completely non-interactive. Canvas appeared, bird appeared, nothing happened.
Attempt #2: postMessage Communication
The Plan: Run game in iframe, use postMessage to send scores to parent Retool app, have a JavaScript query listen with window.addEventListener.
The Reality: Retool's JavaScript queries don't have access to window or addEventListener. The game sent messages into the void. Nobody was listening.
Attempt #3: The Webhook Solution (Success!)
The Plan: Deploy game to GitHub Pages, call a Retool Workflow webhook directly via fetch().
The Architecture
┌─────────────────────────────┐
│ GitHub Pages (Game) │
│ - Full Canvas game │
│ - Generated with Claude │
│ - 60 FPS gameplay │
└──────────┬──────────────────┘
│
│ HTTP POST (score data)
▼
┌─────────────────────────────┐
│ Retool Workflow │
│ - Accept POST request │
│ - Insert to database │
│ - Return success response │
└──────────┬──────────────────┘
│
▼
┌─────────────────────────────┐
│ Retool Database │
│ - scores table │
└──────────┬──────────────────┘
│
▼
┌─────────────────────────────┐
│ Retool App (Dashboard) │
│ - IFrame (game display) │
│ - Live leaderboard │
│ - Score analytics chart │
│ - Auto-refresh every 5s │
└─────────────────────────────┘
Why This Works
The Game (GitHub Pages):
-
Generated with Claude - full Canvas implementation with physics engine and collision detection
-
Zero Retool limitations - full browser API access, smooth 60 FPS
-
Deployed once, loads fast everywhere
The Webhook (Retool Workflow):
-
CORS-enabled endpoint the iframe can call directly
-
Three-step flow: parse input → insert to DB → respond with success
-
No postMessage gymnastics needed
The Dashboard (Retool App):
-
IFrame component displays the game
-
Leaderboard table auto-refreshes every 5 seconds
-
Score distribution chart with dynamic bucketing
-
Top 3 ranks get star emojis (
1, 2, 3)
What I Learned
Retool's Limitations:
-
HTML components strip
<script>tags completely -
JavaScript queries can't access
windowor attach persistent event listeners -
IFrame postMessage reception is impossible in JS queries
The Pivot:
-
Stop fighting Retool's security model
-
Use external hosting for complex client-side logic
-
Webhooks are Retool's superpower for external integration
-
Hybrid architecture: right tool for each job
Retool Assist helped me navigate from failed attempts to the working solution, even as we discovered platform’s constraints together. The final architecture uses each tool for what it does best.
Try it yourself: Play the game, submit your score, watch it appear on the leaderboard in real-time. It's silly, it's festive, and it proves you can build almost anything when you stop asking "Can Retool do this?" and start asking "How can I make Retool do this?"
Play now and join the leaderboard
https://sionkim001.retool.com/embedded/public/1677bee9-f966-4a7f-9c21-c663c4c374b0
If you ever want to revisit this, I'd recommend exploring