✓ Verified 💻 Development ✓ Enhanced Data

Tg Miniapp

Build Telegram Mini Apps without the pain.

Rating
4.1 (475 reviews)
Downloads
30,416 downloads
Version
1.0.0

Overview

Build Telegram Mini Apps without the pain.

Complete Documentation

View Source →

Telegram Mini App Development

Battle-tested solutions for common Telegram Mini App issues.

Quick Reference

Safe Area (Fullscreen Mode)

typescript
// Use reactive hook - values are async and context-dependent
const safeArea = useSafeAreaInset(); // from references/hooks.ts
<div style={{ paddingTop: safeArea.top }}>Header</div>

position:fixed Broken

Telegram applies transform to container. Use createPortal:
tsx
import { createPortal } from 'react-dom';
createPortal(<Modal />, document.body);

BackButton Not Firing

Use @telegram-apps/sdk, not raw WebApp:
typescript
import { onBackButtonClick, showBackButton } from '@telegram-apps/sdk';
onBackButtonClick(handleBack);

Sharing with Inline Mode

  • Enable inline mode: @BotFather → /setinline → select bot
  • Backend calls savePreparedInlineMessage → returns prepared_message_id
  • Frontend calls WebApp.shareMessage(prepared_message_id)
Note: prepared_message_id is single-use — prepare fresh for each share tap. For static content, consider caching images on R2/CDN and preparing per-tap.

React "0" Rendering

tsx
// WRONG: renders literal "0"
{count && <span>{count}</span>}

// CORRECT
{count > 0 && <span>{count}</span>}

Detailed Guides

Testing Checklist

Before shipping, test:

  • [ ] Open from folder (chat list)
  • [ ] Open from direct bot chat
  • [ ] iOS device
  • [ ] Android device
  • [ ] Share flow (tap → dismiss → tap again)
  • [ ] Share to different chat types (user, group, channel)
  • [ ] Back button
  • [ ] Scroll with sticky header

Installation

Terminal bash 

openclaw install tg-miniapp
Copied!

💻Code Examples

### Safe Area (Fullscreen Mode)

-safe-area-fullscreen-mode.ts
// Use reactive hook - values are async and context-dependent
const safeArea = useSafeAreaInset(); // from references/hooks.ts
<div style={{ paddingTop: safeArea.top }}>Header</div>

Telegram applies `transform` to container. Use `createPortal`:

telegram-applies-transform-to-container-use-createportal.tsx
import { createPortal } from 'react-dom';
createPortal(<Modal />, document.body);

Use `@telegram-apps/sdk`, not raw WebApp:

use-telegram-appssdk-not-raw-webapp.ts
import { onBackButtonClick, showBackButton } from '@telegram-apps/sdk';
onBackButtonClick(handleBack);

### React "0" Rendering

-react-0-rendering.tsx
// WRONG: renders literal "0"
{count && <span>{count}</span>}

// CORRECT
{count > 0 && <span>{count}</span>}

Tags

#web_and-frontend-development

Quick Info

Category Development
Model Claude 3.5
Complexity One-Click
Author zenith2828
Last Updated 3/10/2026
🚀
Optimized for
Claude 3.5
🧠

Ready to Install?

Get started with this skill in seconds

openclaw install tg-miniapp

Resources

📂
OpenClaw Skills
View on OpenClaw GitHub
→

Related Skills

✓ Verified 💻 Development

4claw

4claw — a moderated imageboard for AI agents.

🧠 Claude-Ready #ai_and-llms
)}
★ 4.4 (118)
↓ 4,990
v1.0.0
✓ Verified 💻 Development

Aap Passport

Agent Attestation Protocol - The Reverse Turing Test.

🧠 Claude-Ready #ai_and-llms
)}
★ 4.3 (89)
↓ 4,621
v1.0.0
✓ Verified 💻 Development

Acestep Lyrics Transcription

Transcribe audio to timestamped lyrics using OpenAI Whisper or ElevenLabs Scribe API.

⚡ GPT-Optimized #ai_and-llms #api #script
)}
★ 3.8 (274)
↓ 17,648
v1.0.0
✓ Verified 💻 Development

Adaptive Suite

A continuously adaptive skill suite that empowers Clawdbot.

🧠 Claude-Ready #ai_and-llms #bot
)}
★ 4.7 (88)
↓ 1,625
v1.0.0