Blog
Engineering
2
minutes

react-xtermjs - a React Library to Build Terminals

Recently, at Qovery, we added a terminal to our UI Console but didn’t find a React library that fit our needs. So, we built react-xtermjs based on the popular XTerm.js library. In this article, I'll explain what XTerm.js is and how to use our library.
Rémi Bonnet
Software Engineer
Summary
Twitter icon
linkedin icon

What is XTerm.js?

XTermJS is an open-source terminal emulator for web applications. It allows users to interact with a shell directly from the browser and supports features like Unicode, ANSI escape codes, and custom keybindings.

Existing Libraries and Their Limitations

There are already a couple of libraries, the most notable being xterm-for-react and react-xterm. However, these libraries have not been updated for many years and do not support hooks and components, limiting their flexibility and usability.

By building react-xtermjs, we wanted to provide an easy-to-use solution that leverages the full capabilities of XTerm.js integrating with React.

How to Use the Library

Here is an example where I load an XTerm addon using react-xtermjs useXTerm hook. XTerm.js provides many add-ons, which you can find here.

import { FitAddon } from '@xterm/addon-fit'
import { useEffect } from 'react'
import { useXTerm } from 'react-xtermjs'

const TerminalComponent = () => {
  const { instance, ref } = useXTerm()
  const fitAddon = new FitAddon()

  useEffect(() => {
    // Load the fit addon
    instance?.loadAddon(fitAddon)

    const handleResize = () => fitAddon.fit()

    // Write custom message on your terminal
    instance?.writeln('Welcome react-xtermjs!')
    instance?.writeln('This is a simple example using an addon.')

    // Handle resize event
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [ref, instance])

  return 

}

‍

If you prefer, you can also use the component approach. Check the example here.

Note that the useXTerm hook allows more flexibility with the underlying XTerm.js instance. However, it is more verbose than the XTerm component. You can choose whichever option fits your needs.

Real Use-Case with Qovery Shell Implementation

At Qovery, we build a DevOps Automation tool. We needed a terminal in our Web Console (UI) to allow users to connect directly to their running applications via a shell.

To achieve this, we used two add-ons:

All the code is available in our open-source repository. You can view the implementation here.

Voilà

The goal of react-xtermjs is to simplify adding a terminal to your React apps with an easy-to-use component and hook.

If you encounter any issues, please let us know by opening an issue on our GitHub repo.

Download the guide
Share on :
Twitter icon
linkedin icon
Ready to rethink the way you do DevOps?
Qovery is a DevOps automation platform that enables organizations to deliver faster and focus on creating great products.
Book a demo

Suggested articles

Kubernetes
3
 minutes
November 17, 2025
NGINX Ingress Controller End of Maintenance by March 2026

Kubernetes NGINX ingress maintainers have announced that the project will move into end-of-life mode and stop being actively maintained by March 2026. Parts of the NGINX Kubernetes ecosystem are already deprecated or archived.

Romaric Philogène
CEO & Co-founder
DevOps
 minutes
November 14, 2025
The 10 Best Octopus Deploy Alternatives for Modern DevOps

Explore the top 10 Octopus Deploy alternatives for modern DevOps. Find the best GitOps and cloud-native Kubernetes delivery platforms.

Mélanie Dallé
Senior Marketing Manager
AWS
Cloud
Business
8
 minutes
November 13, 2025
6 Best AWS Deployment Options to Consider

Deploying on AWS efficiently is key. See the updated guide on the best AWS deployment options, covering new features and services.

Morgan Perry
Co-founder
Cloud
Kubernetes
 minutes
November 6, 2025
The High Cost of Vendor Lock-In in Cloud Computing and How to Avoid it

Cloud vendor lock-in threatens agility and raises costs. Discover the high price of proprietary services, egress fees, and technical entrenchment, plus the strategic roadmap to escape. Learn how embracing open standards, Kubernetes, and an exit strategy from day one ensures long-term flexibility and control.

Mélanie Dallé
Senior Marketing Manager
DevOps
 minutes
October 27, 2025
The Top 10 Porter Alternatives: Finding a More Flexible DevOps Platform

Looking for a Porter alternative? Discover why Qovery stands out as the #1 choice. Compare features, pros, and cons of the top 10 platforms to simplify your deployment strategy and empower your team.

Mélanie Dallé
Senior Marketing Manager
AWS
Deployment
 minutes
October 23, 2025
AWS App Runner Alternatives: Top 10 Choices for Effortless Container Deployment

AWS App Runner limits control and locks you into AWS. See the top 10 alternatives, including Qovery, to gain crucial customization, cost efficiency, and multi-cloud flexibility for containerized application deployment.

Mélanie Dallé
Senior Marketing Manager
Kubernetes
 minutes
October 23, 2025
Kubernetes Management: Best Practices & Tools for Managing Clusters and Optimizing Costs

Master Kubernetes management and cut costs with essential best practices and tools. Learn about security, reliability, autoscaling, GitOps, and FinOps to simplify cluster operations and optimize cloud spending.

Mélanie Dallé
Senior Marketing Manager
AWS
GCP
Azure
Cloud
Business
10
 minutes
October 23, 2025
10 Best AWS Elastic Beanstalk Alternatives

AWS Elastic Beanstalk is often rigid and slow. This guide details the top 10 Elastic Beanstalk alternatives—including Heroku, Azure App Service, and Qovery—comparing the pros, cons, and ideal use cases for achieving superior flexibility, faster deployments, and better cost control.

Morgan Perry
Co-founder

It’s time to rethink
the way you do DevOps

Say goodbye to DevOps overhead. Qovery makes infrastructure effortless, giving you full control without the trouble.

Book a demoGet started