wterm: Emulador de terminal web rápido impulsado por Zig y WASM

Introducción

Si alguna vez has necesitado un terminal dentro de una aplicación web —ya sea para un IDE en la nube, un panel de control de shell remoto o un tutorial interactivo— wterm es la herramienta que estabas esperando. Desarrollado por Vercel Labs, wterm es un emulador de terminal completamente funcional que se ejecuta en el navegador usando WebAssembly compilado con Zig. Su pequeño tamaño (≈12 KB para el binario WASM central) y su rendimiento similar al nativo lo hacen ideal para cualquier stack web moderno.

Por qué wterm destaca

Estas capacidades hacen que wterm sea más que una demostración; es un componente listo para producción que puedes incrustar en cualquier proyecto web.

Comenzando

Requisitos previos

• Zig 0.16.0+ (para compilar el núcleo WASM)
• Node.js 20+
• pnpm 10+ (gestor de paquetes recomendado)

Instalación

# Clone the repository
git clone https://github.com/vercel-labs/wterm.git
cd wterm

# Install JavaScript dependencies
pnpm install

Compilar el binario WASM

zig build               # Debug build (default)
zig build -Doptimize=ReleaseSmall   # Production‑size build (~12 KB)

Compilar todos los paquetes

pnpm run build   # Compiles @wterm/* packages and bundles examples

Usando wterm en diferentes entornos

1. JavaScript puro (Renderizador 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. Integración con 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. Componente Vue 3

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

Funciones avanzadas

Tematización con variables CSS

:root {
  --wterm-bg: #1e1e1e;          /* Background */
  --wterm-fg: #d4d4d4;          /* Foreground */
  --wterm-cursor: #ffcc00;     /* Cursor */
}

Conexión a un PTY remoto vía 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);

Uso del backend libghostty

Si necesitas cumplimiento total con VT100/VT220 (p. ej., para aplicaciones complejas como tmux), instala el paquete @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'
});

Casos de uso reales

1. IDE en la nube – Integra wterm como la shell incorporada para plataformas como Gitpod, CodeSandbox o IDE SaaS personalizados.
2. Documentación y tutoriales – Renderiza demostraciones de línea de comandos en vivo directamente en la documentación sin requerir un terminal local.
3. Paneles de monitoreo – Muestra registros en tiempo real o herramientas CLI interactivas dentro de paneles de administración.
4. Plataformas educativas – Proporciona a los estudiantes una shell aislada para aprender comandos de Linux.

Contribución y comunidad

wterm es de código abierto bajo la licencia Apache‑2.0. Se agradecen las contribuciones: - Informes de errores – Abre un issue en GitHub. - Solicitudes de funciones – Propón mejoras mediante pull requests. - Documentación – Mejora el README, agrega ejemplos o escribe tutoriales.

El proyecto utiliza Playwright para pruebas end‑to‑end (carpeta e2e) y Vitest para pruebas unitarias en todos los paquetes. Ejecutar la suite de pruebas es tan sencillo como:

pnpm test

Conclusión

wterm cierra la brecha entre la experiencia de terminal nativa y las aplicaciones web modernas. Su núcleo WASM basado en Zig ofrece velocidad, mientras que el ecosistema de paquetes (vanilla, React, Vue, Ghostty) garantiza una integración fluida sin importar tu stack. Ya sea que estés construyendo un IDE en la nube, un tutorial interactivo o un panel de shell remoto, wterm te brinda una solución fiable, extensible y de código abierto.

¿Listo para probarlo? Clona el repositorio, compila el binario WASM e incrusta el terminal en minutos. Únete a la creciente comunidad de desarrolladores que están llevando el poder de la línea de comandos al navegador.