WebAssembly

IronRDP supports WebAssembly (WASM) as a first-class target, enabling full-featured RDP clients that run directly in web browsers. The ironrdp-web crate provides WASM bindings, and the web-client directory contains a production-ready Web Component and demo client.

Architecture

The web stack consists of:

ironrdp-web - Rust WASM bindings compiled with wasm-pack
iron-remote-desktop - Reusable Web Component (framework-agnostic)
iron-remote-desktop-rdp - TypeScript implementation of RDP-specific logic
iron-svelte-client - Demo Svelte-based RDP client

Building the WASM Module

Install required tools

cargo xtask wasm install

This installs:

wasm-pack - WASM build tool

wasm-bindgen - Rust/JS interop

Build the WASM module

cargo xtask wasm check

For production builds:

cd crates/ironrdp-web
wasm-pack build --release --target web

This generates:

crates/ironrdp-web/pkg/
├── ironrdp_web.js
├── ironrdp_web_bg.wasm
├── ironrdp_web.d.ts
└── package.json

Build the web client

cargo xtask web install  # Install npm dependencies
cargo xtask web build     # Build the web client

Run the demo client

cargo xtask web run

Open http://localhost:5173 in your browser.

Using the WASM Bindings

Basic TypeScript Example

import init, { Session, SessionBuilder } from './pkg/ironrdp_web.js';

// Initialize WASM module
await init();

// Create session builder
const builder = new SessionBuilder();
builder.set_server_addr('server.example.com:3389');
builder.set_username('user');
builder.set_password('password');
builder.set_desktop_size(1920, 1080);

// Build session
const session = await builder.build();

// Connect
await session.connect();
console.log('Connected!');

// Handle events
session.on_graphics_update = (imageData: ImageData) => {
    renderToCanvas(imageData);
};

session.on_terminated = (reason: string) => {
    console.log('Session terminated:', reason);
};

// Send input
session.send_mouse_event({
    x: 100,
    y: 200,
    flags: MouseFlags.Move,
});

session.send_keyboard_event({
    keyCode: 13, // Enter
    flags: KeyboardFlags.Down,
});

Rendering to HTML5 Canvas

const canvas = document.getElementById('rdp-canvas') as HTMLCanvasElement;
const ctx = canvas.getContext('2d')!;

session.on_graphics_update = (imageData: ImageData) => {
    // Render the decoded image to canvas
    ctx.putImageData(imageData, 0, 0);
};

Handling Input Events

import { DeviceEvent, InputTransaction } from './pkg/ironrdp_web.js';

// Mouse events
canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const event = DeviceEvent.mouse_move(x, y);
    const transaction = new InputTransaction();
    transaction.add_event(event);
    session.send_input(transaction);
});

canvas.addEventListener('mousedown', (e) => {
    const event = DeviceEvent.mouse_button_down(e.button);
    const transaction = new InputTransaction();
    transaction.add_event(event);
    session.send_input(transaction);
});

// Keyboard events
window.addEventListener('keydown', (e) => {
    e.preventDefault();
    const event = DeviceEvent.keyboard_down(e.keyCode);
    const transaction = new InputTransaction();
    transaction.add_event(event);
    session.send_input(transaction);
});

Using the Web Component

The iron-remote-desktop Web Component provides a complete RDP client:

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="./iron-remote-desktop/dist/index.js"></script>
</head>
<body>
    <iron-remote-desktop
        server="server.example.com:3389"
        username="user"
        password="password"
        width="1920"
        height="1080"
    ></iron-remote-desktop>
</body>
</html>

Web Component API

const rdpClient = document.querySelector('iron-remote-desktop');

// Connect
await rdpClient.connect();

// Disconnect
rdpClient.disconnect();

// Listen for events
rdpClient.addEventListener('connected', () => {
    console.log('Connected to RDP server');
});

rdpClient.addEventListener('disconnected', (e) => {
    console.log('Disconnected:', e.detail.reason);
});

rdpClient.addEventListener('error', (e) => {
    console.error('RDP error:', e.detail.message);
});

Svelte Integration

The iron-svelte-client demonstrates full integration:

<script lang="ts">
  import IronRemoteDesktop from './iron-remote-desktop.svelte';

  let server = 'localhost:3389';
  let username = 'user';
  let password = 'password';

  function handleConnected() {
    console.log('Connected to RDP server');
  }

  function handleError(event: CustomEvent) {
    alert('RDP Error: ' + event.detail.message);
  }
</script>

<IronRemoteDesktop
  {server}
  {username}
  {password}
  width={1920}
  height={1080}
  on:connected={handleConnected}
  on:error={handleError}
/>

Advanced Features

Clipboard Support

import { ClipboardData } from './pkg/ironrdp_web.js';

// Handle clipboard from server
session.on_clipboard_update = async (data: ClipboardData) => {
    const text = await data.get_text();
    await navigator.clipboard.writeText(text);
    console.log('Clipboard updated:', text);
};

// Send clipboard to server
navigator.clipboard.readText().then((text) => {
    const clipboardData = ClipboardData.from_text(text);
    session.send_clipboard(clipboardData);
});

Custom Network Transport

Replace the default WebSocket transport:

class CustomTransport {
    async connect(url: string): Promise<void> {
        // Custom connection logic
    }

    async send(data: Uint8Array): Promise<void> {
        // Send data
    }

    async receive(): Promise<Uint8Array> {
        // Receive data
    }

    async close(): Promise<void> {
        // Close connection
    }
}

const builder = new SessionBuilder();
builder.set_transport(new CustomTransport());

Touch Input Support

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    const x = touch.clientX - rect.left;
    const y = touch.clientY - rect.top;

    const event = DeviceEvent.mouse_button_down(0); // Left button
    const moveEvent = DeviceEvent.mouse_move(x, y);

    const transaction = new InputTransaction();
    transaction.add_event(moveEvent);
    transaction.add_event(event);
    session.send_input(transaction);
});

Connection via Gateway

Connect through a Devolutions Gateway or websockify proxy:

const builder = new SessionBuilder();
builder.set_gateway_url('wss://gateway.example.com/jet/rdp');
builder.set_server_addr('internal-server:3389');
builder.set_username('user');
builder.set_password('password');

Performance Optimization

WASM Streaming

import init from './pkg/ironrdp_web.js';

// Use streaming instantiation for faster loading
await init('./pkg/ironrdp_web_bg.wasm');

Worker Thread Processing

// main.ts
const worker = new Worker('./rdp-worker.js', { type: 'module' });

worker.postMessage({
    type: 'connect',
    server: 'server.example.com:3389',
    username: 'user',
    password: 'password',
});

worker.onmessage = (e) => {
    if (e.data.type === 'graphics_update') {
        renderToCanvas(e.data.imageData);
    }
};

// rdp-worker.ts
import init, { Session } from './pkg/ironrdp_web.js';

await init();

self.onmessage = async (e) => {
    if (e.data.type === 'connect') {
        const session = await createSession(e.data);
        // Process session in worker
    }
};

Request Animation Frame

let pendingUpdate: ImageData | null = null;

session.on_graphics_update = (imageData: ImageData) => {
    pendingUpdate = imageData;
};

function render() {
    if (pendingUpdate) {
        ctx.putImageData(pendingUpdate, 0, 0);
        pendingUpdate = null;
    }
    requestAnimationFrame(render);
}

requestAnimationFrame(render);

Debugging

Enable Console Logging

import { set_panic_hook, set_log_level } from './pkg/ironrdp_web.js';

// Enable panic traces
set_panic_hook();

// Set log level
set_log_level('trace');

Browser DevTools

// Log WASM performance
console.time('rdp-connect');
await session.connect();
console.timeEnd('rdp-connect');

// Monitor memory usage
setInterval(() => {
    const memory = (performance as any).memory;
    if (memory) {
        console.log('Heap:', memory.usedJSHeapSize / 1048576, 'MB');
    }
}, 5000);

Deployment

Static Hosting

Deploy to any static host (Netlify, Vercel, GitHub Pages):

cargo xtask web build
cd web-client/iron-svelte-client
npm run build
# Upload dist/ directory

Headers Configuration

For WASM to work, configure CORS headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Service Worker Caching

// service-worker.js
self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('ironrdp-v1').then((cache) => {
            return cache.addAll([
                '/ironrdp_web_bg.wasm',
                '/ironrdp_web.js',
                '/index.html',
            ]);
        })
    );
});

Browser Compatibility

IronRDP WASM works on:

✅ Chrome/Edge 90+
✅ Firefox 88+
✅ Safari 15+
✅ Mobile browsers (iOS Safari, Chrome Android)

Requires:

WebAssembly
WebSocket (or alternative transport)
Canvas API
ES Modules

Production Examples

Devolutions ships production IronRDP web clients in:

Devolutions Gateway - Standalone web interface (free, since v2024.1.0)
Devolutions Server - Self-hosted credential manager
Devolutions Hub - Cloud-based credential manager

Next Steps

Building a Client - Understand the underlying architecture
Graphics Rendering - Optimize canvas rendering
Virtual Channels - Add clipboard and custom channels

Get Started

Architecture

Core Concepts

Guides

Architecture

Building the WASM Module

Using the WASM Bindings

Basic TypeScript Example

Rendering to HTML5 Canvas

Handling Input Events

Using the Web Component

Web Component API

Svelte Integration

Advanced Features

Clipboard Support

Custom Network Transport

Touch Input Support

Connection via Gateway

Performance Optimization

WASM Streaming

Worker Thread Processing

Request Animation Frame

Debugging

Enable Console Logging

Browser DevTools

Deployment

Static Hosting

Headers Configuration

Service Worker Caching

Browser Compatibility

Production Examples

Next Steps

Build docs developers (and LLMs) love

Get Started

Architecture

Core Concepts

Guides

​Architecture

​Building the WASM Module

​Using the WASM Bindings

​Basic TypeScript Example

​Rendering to HTML5 Canvas

​Handling Input Events

​Using the Web Component

​Web Component API

​Svelte Integration

​Advanced Features

​Clipboard Support

​Custom Network Transport

​Touch Input Support

​Connection via Gateway

​Performance Optimization

​WASM Streaming

​Worker Thread Processing

​Request Animation Frame

​Debugging

​Enable Console Logging

​Browser DevTools

​Deployment

​Static Hosting

​Headers Configuration

​Service Worker Caching

​Browser Compatibility

​Production Examples

​Next Steps

Build docs developers (and LLMs) love

Architecture

Building the WASM Module

Using the WASM Bindings

Basic TypeScript Example

Rendering to HTML5 Canvas

Handling Input Events

Using the Web Component

Web Component API

Svelte Integration

Advanced Features

Clipboard Support

Custom Network Transport

Touch Input Support

Connection via Gateway

Performance Optimization

WASM Streaming

Worker Thread Processing

Request Animation Frame

Debugging

Enable Console Logging

Browser DevTools

Deployment

Static Hosting

Headers Configuration

Service Worker Caching

Browser Compatibility

Production Examples

Next Steps