wterm : émulateur de terminal rapide basé sur le Web, propulsé par Zig & WASM

Introduction

Si vous avez déjà eu besoin d'un terminal à l'intérieur d'une application web — que ce soit pour un IDE cloud, un tableau de bord de shell distant ou un tutoriel interactif — wterm est l'outil que vous attendiez. Développé par Vercel Labs, wterm est un émulateur de terminal pleinement fonctionnel qui s'exécute dans le navigateur grâce à WebAssembly compilé avec Zig. Son empreinte réduite (≈12 KB pour le binaire WASM principal) et ses performances quasi natives en font le choix idéal pour toute pile web moderne.

Pourquoi wterm se démarque

Ces capacités font de wterm bien plus qu’une simple démo — c’est un composant prêt pour la production que vous pouvez intégrer à n’importe quel projet web.

Démarrage rapide

Prérequis

• Zig 0.16.0+ (pour construire le noyau WASM)
• Node.js 20+
• pnpm 10+ (gestionnaire de paquets recommandé)

Installation

# Cloner le dépôt
git clone https://github.com/vercel-labs/wterm.git
cd wterm

# Installer les dépendances JavaScript
pnpm install

Construire le binaire WASM

zig build               # Build de débogage (par défaut)
zig build -Doptimize=ReleaseSmall   # Build optimisé pour la taille (~12 KB)

Construire tous les paquets

pnpm run build   # Compile les paquets @wterm/* et regroupe les exemples

Utiliser wterm dans différents environnements

1. JavaScript vanilla (rendu DOM)

<script type="module">
  import { createTerminal } from "https://cdn.jsdelivr.net/npm/@wterm/dom";
  const term = createTerminal({ wasmUrl: "/wterm.wasm" });
  term.attach(document.getElementById('terminal'));
</script>
<div id="terminal" style="height:400px; width:100%;"></div>

2. Intégration React

import { WTermReact } from "@wterm/react";

export default function App() {
  return (
    <WTermReact
      wasmUrl="/wterm.wasm"
      className="my-terminal"
      onData={data => console.log('User typed:', data)}
    />
  );
}

3. Composant Vue 3

<template>
  <WTermVue :wasm-url="'/wterm.wasm'" />
</template>
<script setup>
import { WTermVue } from '@wterm/vue';
</script>

Fonctionnalités avancées

Théming avec des variables CSS

:root {
  --wterm-bg: #1e1e1e;          /* Fond */
  --wterm-fg: #d4d4d4;          /* Premier plan */
  --wterm-cursor: #ffcc00;     /* Curseur */
}

Connexion à un PTY distant via WebSocket

import { createTerminal } from '@wterm/core';
const term = createTerminal({
  wasmUrl: '/wterm.wasm',
  transport: new WebSocketTransport('wss://my-pty-server.example.com')
});
term.attach(document.body);

Utilisation du backend libghostty

Si vous avez besoin d’une conformité VT100/VT220 complète (par ex. pour des applications complexes comme tmux), installez le paquet @wterm/ghostty :

pnpm add @wterm/ghostty

import { createTerminal } from '@wterm/core';
import { GhosttyCore } from '@wterm/ghostty';

const term = createTerminal({
  core: new GhosttyCore(),
  wasmUrl: '/wterm.wasm'
});

Cas d’utilisation réels

1. IDE cloud – Intégrez wterm comme shell intégré pour des plateformes telles que Gitpod, CodeSandbox ou des IDE SaaS personnalisés.
2. Documentation & tutoriels – Rendu de démonstrations de ligne de commande en direct directement dans la documentation, sans nécessiter de terminal local.
3. Tableaux de bord de surveillance – Affichez des journaux en temps réel ou des outils CLI interactifs dans les panneaux d’administration.
4. Plateformes éducatives – Fournissez aux étudiants un shell sandboxé pour apprendre les commandes Linux.

Contribution & communauté

wterm est open source sous licence Apache‑2.0. Les contributions sont les bienvenues : - Rapports de bugs – Ouvrez une issue sur GitHub. - Demandes de fonctionnalités – Proposez des améliorations via des pull requests. - Documentation – Améliorez le README, ajoutez des exemples ou rédigez des tutoriels.

Le projet utilise Playwright pour les tests end‑to‑end (dossier e2e) et Vitest pour les tests unitaires de tous les paquets. Exécuter la suite de tests est aussi simple que :

pnpm test

Conclusion

wterm comble le fossé entre l’expérience d’un terminal natif et les applications web modernes. Son noyau WASM basé sur Zig fournit rapidité, tandis que l’écosystème de paquets (vanilla, React, Vue, Ghostty) assure une intégration fluide quel que soit votre stack. Que vous construisiez un IDE cloud, un tutoriel interactif ou un tableau de bord de shell distant, wterm vous offre une solution fiable, extensible et open source.

Prêt à l’essayer ? Clonez le dépôt, compilez le binaire WASM et intégrez le terminal en quelques minutes. Rejoignez la communauté croissante de développeurs qui apportent la puissance de la ligne de commande au navigateur.