JSPipe - Seamless WebGL / TypeScript & NPM Bridge

Unity WebGL builds often feel isolated from the web page they run on. Integrating modern web features, frontend frameworks, or browser APIs usually involves .jslib workarounds and messy SendMessage strings. JSPipe changes that.


It introduces a clean, high-level Module-based architecture where your C# classes and TypeScript classes mirror each other. You can define a method in C#, call it directly from JS, and await the result asynchronously—and vice versa.


Key Features:

- ⚡ Bi-Directional RPC: Call C# methods from JS and JS methods from C# with full support for return values, Promises, and async/await patterns. No more string parsing!

- 📦 Full NPM Support: Use upackage.json to directly install any library from the Node Package Manager (React, Vue, Telegram SDK, Web3 providers). Just install and import them.

- 🛡️ Type-Safe TypeScript: Write your frontend logic in TS. The package includes an automated build pipeline that compiles your .ts files into a highly optimized bundle.

- 🚀 Automated Pipeline: No manual build steps required. JSPipe integrates deeply with the Unity Build Player. It utilizes esbuild for lightning-fast bundling and Html Agility Pack to inject scripts into your WebGL templates automatically.

- 🧩 Modular Architecture: Organize your communication logic into named Modules (e.g., AuthModule, TelegramModule, Web3Module), keeping your codebase clean, scalable, and easy to maintain.

- 🎨 Custom WebGL Templates: Create custom index.html templates with dynamic script injection support.


Workflow:

1. Create: Write a C# class inheriting from `JSPipeModule`.

2. Mirror: Write a TS class extending `JSPipeModule`.

3. Register: Add methods using `RegisterHandler` / `registerHandler`.

4. Build: Hit Build & Run. JSPipe compiles the TS, bundles dependencies, and patches the WebGL build automatically.


Perfect for: 

- 📱 Telegram Web Apps (TWA) / Mini Apps: Seamlessly connect internal Unity logic with the Telegram browser API.

- ⚛️ Modern Frontend Integrations: Easily embed Unity inside React.js, Vue, Angular, or Next.js applications.

- 🪙 Web3 & Crypto: Build seamless connections with Crypto wallets (MetaMask, Phantom, ConnectKit) and smart contracts.

- 🌐 Advanced Browser Features: Complex networking via WebSockets/WebRTC, or cleanly accessing browser APIs (LocalStorage, Geolocation, DOM elements) without writing a single line of .jslib.


Dependencies:

- Asset uses UniTask under MIT License; see Third-Party Notices.md file in package for details.

- Asset uses esbuild under MIT License; see Third-Party Notices.md file in package for details.

- Asset uses Html Agility Pack under MIT License; see Third-Party Notices.md file in package for details.


If you have issues, please don't hesitate to email contact@tiltshift.xyz