About two years ago, the first JavaScript contest held by Telegram just ended. It was a thrilling challenge but that time I only managed to take the second prize. However, that was the starting point for a chain of events which led to the WebZ app becoming one of the official Telegram web clients.

Another longest and spectacular JavaScript contest was there to follow, and I want to share its story. I'm going to talk about the technologies we used, the problems we faced, and the solutions we were lucky to find. Moreover, because this story is still being written.

No doubt, the new Telegram web clients are among the most sophisticated and technologically advanced web projects out there. They combine most of modern Web APIs, specifications, and techniques: complicated CSS and Canvas animations, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, reactive data streams, and so much more.

I'll talk a little bit about it all and will provide links to the code examples in the telegram-webz repository as well as to some other useful external resources.

Stay tuned.

(more coming soon...)

Telegram Web Z was updated to version 1.30

👏 Harder
• Meet Message Reactions:
- React to a message with ❤️🔥🎉😁😱🤩😢👎💩🤮 in the context menu.
- Send a quick 👍 reaction by hovering over the bottom corner of a message.
- You can change your default reaction to another emoji in Settings > General.
- Group and Channel admins can enable and control reactions via their chat's Info Page > Edit > Reactions.

• Interactive Emoji:
- Added support for all interactive emoji, including fullscreen animations and sound effects. Try 🔥, 🍆, 🍑 and more.
- Animations play simultaneously when both users have the chat open.
– The “is watching…” status will appear when your chat partner is also seeing the animations.

• Manage invite links for Groups and Channels:
– Enable admin approval or limited duration and users.

🤩 Better
• Better quality for uploaded profile pictures.
• Various UI improvements.

🚀 Faster
• Several optimizations for older devices – no more freezing while typing.

💪 Stronger
• Saved Messages now correctly renders in search results.
• Fixed missing icons for muted chats in the chat list.
• The context menu no longer flickers on older devices.
• Fix re-scheduling messages to a previous date.

Telegram Web Z was updated to version v1.31

👏 Harder
• Hide text with an animation using the crossed-eye icon 👁 in the formatting menu.
• Quickly add Spoiler formatting with Ctrl + P (⌘ + P on macOS), or || markdown around the text.
• Admins can manage Join Requests and revoked invites.
• Promote new admins in your groups and channels via Global Search.

🤩 Better
• Network stability enhancements.
• Various improvements and tuning for reactions and interactive emoji.
• Media Viewer improved for mobile devices.
• Numerous layout adjustments.

🚀 Faster
• The app better renders multiple components.

💪 Stronger
• Fixed inline playback for QuickTime videos.
• Fixes for tooltips – including stickers, emoji, and mentions.
• Unread counter now correctly reflects values on mobile devices.
• Emoji now properly copy from message text.
• Users’ display names now appear in service messages.
• Fixed collapsing multiple spaces in messages.
• Reactions and the “Send As” feature are now always available in Discussion Groups.

Telegram Web Z was updated to version v1.32

Harder
• Create and share Video Stickers made from .webm files.
• 5 new reactions and interactive emoji: 🥰🤯🤔🤬👏
• Send entire folders as a file.
• Directly add chats to chat folders from Global Search.

Better
• Redesigned group management pages with animated artwork.
• ‘Forward To’ menu has smooth infinite scroll on mobile.
• Spoiler animations re-hide text after a short period.
• Numerous layout fixes and improvements.

Faster
• Media loads and scrolls faster in Shared Media and Global Search.
• Optimized some heavy background calculations.
• Memory usage optimizations.

Stronger
• Fixed missing sticker suggestions (e.g. for ❤️ emoji).
• Fixed infinite spinning in Sticker panel.
• Fixed scroll jumps and missing sender names in local search results.
• Fixed highlight color when searching in dark mode.
• Fixed pasting text and media from clipboard on Firefox and iOS browsers.
• Media Viewer: Fixed navigating to the origin message on mobile.
• Media Viewer: Fixed lingering audio after moving to the next item.
• Reactions: Fixed unexpected interaction animations.
• Fixed jumping cursor when typing in Safari.

Telegram Web Z was updated to version 1.36

👏 Harder
• ‘Add Contact’ and ‘Block User’ buttons appear in the chat header of new chats.
• Send media without sound or schedule it for later. Right-click the Send button on desktop, or press and hold on mobile.
• Added support for viewing shared geo, live locations and venues.
• Chat owners can leave their own groups without deleting them.
• Choose from more categories when reporting specific messages.

🤩 Better
• Even more UX improvements.

💪 Stronger
• Fixed flickering menu for bot commands.
• Copying message text on mobile devices now works as expected.
• Fixed frozen UI when moving between chats and comments.

Telegram Web Z was updated to version 1.37

👏 Harder
• Access detailed interactive statistics for channels you manage.
• Accessibility: screen readers properly detect the attachment menu.

🤩 Better
• Enhanced colors for dark mode with higher contrast.
• Even more UX improvements.

💪 Stronger
• Fixed issues when creating polls in channels.
• Drafts no longer overwrite original text when editing messages.
• Reacting to your own message no longer sends a notification.

Telegram Web Z was updated to version 1.38

👏 Harder
• See interactive statistics for groups you manage.
• Adjust volume and playback speed with new controls in the Media Viewer.
• Save GIFs sent by other users.
• Schedule stickers and GIFs or send them silently – right-click on desktop or long-press on mobile.
• "Report Spam and Leave" button added for unknown channels.
• Drafts now save when editing messages.
• Set a custom name or include a phone number when adding contacts.
• New contacts can now be added from the Contacts page.
• Click to copy code blocks to your clipboard.

🤩 Better
• Background pattern added for Night Mode.
• New message drafts are restored after editing another message.
• Updated font for Persian language (Vazirmatn 32.1).
• More and more UX improvements.

🚀 Faster
• Optimized multiple algorithms, accelerated rendering.

Telegram Web Z was updated to version 1.39

🤩 Better
• New animations for QR code on login screen.
• Toggle Attach Menu with keyboard or screen reader.
• Another update for Persian language font.
• Various UX improvements.

💪 Stronger
• Fixed media sometimes not being loaded.

Telegram Web Z was updated to version 1.40

🤡 Happy April Fool's Day! 🤡

👏 Harder
• Finally added support for Telegram Stories.
• Explore 37 new emoji.
• Set Night Mode to follow your operating system in Settings > General.
• Upload all types of audio files with cover images and meta tags.
• Improved designs for Settings and Management pages.

🤩 Better
• Proper date formatting for all languages.
• Changing volume in the media viewer automatically unmutes audio.
• Groups you were restricted from now stay in your chat list.
• Accessibility: Screen Reader support for emoji panel.
• Removed reaction sounds.
• Various layout improvements.

🚀 Faster
• Smoother transitions in Settings.

💪 Stronger
• Fixed error messages for ‘You must be an admin’ and ‘You can't write in this chat’.
• Fixed calendar months that start on a Sunday.
• Fixed duplicated files when downloading.
• Fixed forwarding protected content.
• Fixed saving Privacy Exceptions.
• Fixed various issues when switching between message lists.

I like the way the verification badge looks with our new avatar 😎

More interesting stuff to come on the channel, don't forget to tell a friend.

@webztalks

Telegram Web Z was updated to version 1.42

👏 Harder
• Telegram bots just became even more powerful – and Web Z fully supports their flexible interfaces.
• Statistics for large groups and channels have expanded – see new metrics for recent posts at the bottom of the statistics page.

🤩 Better
• Emoji load faster on all platforms.

💪 Stronger
• An issue when adding users to groups has been fixed.
• Fixed unwanted notifications caused by reactions to posts.
• Online indicators for group members now work as expected.
• Unexpected logouts should no longer occur.
• Service notifications containing media are now rendered properly.
• Read receipts now appear in groups with exactly 100 members.

@webztalks

Telegram Web Z was updated to version 1.43

🤩 Better
• Some improvements for the support of revolutionary web bots such as @wallet.
• Better app icon on macOS.
• Layout improvements and fixes.

💪 Stronger
• Various improvements for Statistics screen.

@webztalks

Telegram Web Z was updated to version 1.44

👏 Harder
• Mention and reaction badges are now shown both in the chat list and inside chats – tapping the badge in chat jumps to the relevant message.
• Improved Device Management – with a detailed overview of active sessions and new icons. Tap or click a session in the list to see more info or remotely log it out.
• Privacy Settings now have options for Calls, including Exceptions.
• From other chats, instantly open a 1-on-1 chat with a bot using ‘Open Bot' in the ⋮ menu of the bot's preview window.

🤩 Better
• Browser navigation has been rebuilt from scratch – no more freezes or crashes.

💪 Stronger
• Fixed an issue where chats could get stuck in the Unread folder.
• The app no longer duplicates text pasted from the clipboard.
• Random media files failing to load should no longer occur.
• Fixed issues when adding a contact with a hidden phone number.

@webztalks

Telegram Web Z was updated to version 1.45

👏 Harder
• Copy phone number from the contact card context menu.

🤩 Better
• Migrated chats do not appear in the chat list anymore.

🚀 Faster
• Optimized memory usage.

💪 Stronger
• Header buttons are now clickable when notifications are shown.
• Fixed infinite spinner when clicking on a contact card.

@webztalks

Telegram Web Z was updated to version 1.46

👏 Harder
• Web Z becomes the first official app to support code syntax highlighting – start a code block with a language code, and the app will highlight separate terms and functions: ```js.

console.log('Hello world!');

• Use new buttons to copy code contents and switch word wrapping.
• When available, Group Sticker Sets now appear in the sticker panel.
• Improved Sticker Management – preview sticker sets faster or clear recently sent stickers by right-clicking and selecting ‘View Pack’ or ‘Remove from Recent’.

🤩 Better• Added fresh and modern chat background.

🚀 Faster
• Reduced bundle size.

💪 Stronger
• Fixed issues when copying chat noscripts.
• Searching for chats no longer adds them to the history stack.
• The ‘Discuss Post’ button in channels now properly redirects.
• Background should no longer flicker after logging in.
• Fixed closing the forward dialog when switching to inline bots.
• Fixed scrolling in Channel Management > Join Requests.

@webztalks