๐ค The Problem That Drives Everyone Crazy
Ever tried building a Telegram Mini App?
Write your code.
Spin up ngrok (and pray it doesn't crash).
Go to @BotFather, paste the tunnel URL.
Grab your phone, open the bot, type console.log() โ and pray again.
Repeat for every theme, platform, and user type you need to test.
Enter fullscreen mode Exit fullscreen mode
It’s 2015, folks. And there’s still no official emulator.
"The main difficulty is the inability to run a project as easily as in a browser via localhost โ and the absence of a developer console."
โ Habr, March 2025
Enter fullscreen mode Exit fullscreen mode
๐ก Introducing: TMA DevKit
A local emulator and bridge inspector for Telegram Mini Apps. Think Redux DevTools, but for window.Telegram.WebApp.
In one sentence: paste your Mini App URL into the panel, and it runs inside an iframe with a full emulation of the Telegram client โ no phone, no ngrok, no BotFather.
โจ What DevKit v2 Can Do (and Why It’s Awesome)
๐ง MCP Server for AI-Powered Debugging โ Brand New!
Connect any AI assistant (Claude, GPT, local models) via the Model Context Protocol. Ask questions about your app’s state, event flow, or initData validation โ and get instant debugging suggestions.
๐ง A Real Mock, Not a Stub
Full window.Telegram.WebApp API surface (all methods, properties, events).
Cryptographically valid initData generation with HMAC-SHA-256 signature using your bot token.
Backend validation passes as in production.
Compatible with @telegram-apps/sdk v3 out of the box.
Enter fullscreen mode Exit fullscreen mode
โก 5 OneโClick Quick Scenarios
Scenario Description
iOS Premium iPhone user with Premium subscription
Android Free Regular Android user
New User With referral parameter
Group Launch Emulates opening from a group chat
Desktop Wide viewport on computer
Switch contexts in seconds โ no manual input.
๐ Bridge Event Inspector
All web_app_* calls displayed in real time.
Group by type, filter, pause, export logs as .txt.
emit console to fire client โ app events (theme_changed, main_button_pressed, etc.).
Enter fullscreen mode Exit fullscreen mode
โ๏ธ CloudStorage Editor
Visual keyโvalue editor. No more guessing what’s stored or messing with localStorage manually.
๐พ Saved Presets
Save your current config (platform, user, theme, viewport, bot token) as a named preset. Switch between them in one click โ persists across sessions.
๐ฅ๏ธ Polished Panel UX
Resizable panels (like VS Code).
Zoomable device stage (25%โ200%).
Mobile notch and desktop traffic lights react to platform selection.
Import/export config as JSON.
Enter fullscreen mode Exit fullscreen mode
๐งฐ Tech Stack
Component Technology
Frontend React 19, TypeScript, Vite
Styling Tailwind CSS, shadcn/ui
Mock Script ~90 KB of vanilla JS, zero dependencies
Testing 22+ Vitest tests (base64url, config, protocol, events)
License MIT
๐ฏ What’s Next?
The project is under active development. Planned:
More scenario presets.
Enhanced MCP integration with preโbuilt prompts.
VS Code plugin.
Enter fullscreen mode Exit fullscreen mode
๐ Links
GitHub: github.com/Deus-org/tma-devkit
Live Demo (if available) โ add your link or a screenshot.
Enter fullscreen mode Exit fullscreen mode
๐ Call to Action
If you’ve ever built a TMA, I’d really appreciate:
Feedback on the README (is it clear?).
Feature suggestions.
Bug reports (open an issue on GitHub).
Enter fullscreen mode Exit fullscreen mode
โญ๏ธ Star the repo if you find it useful โ it helps a ton!
Built by a developer who got tired of debugging on a phone.
Let’s make TMA development better together! ๐
๋ต๊ธ ๋จ๊ธฐ๊ธฐ