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

Qovery
 minutes
October 2, 2025
Our rebrand: setting a new standard for DevOps automation

Qovery unveils its new brand identity, reinforcing its mission to make DevOps simple, intuitive, and powerful. Discover how our DevOps automation platform simplifies infrastructure, scaling, security, and innovation across the full DevOps lifecycle.

Romaric Philogène
CEO & Co-founder
Qovery
3
 minutes
September 30, 2025
We've raised $13M Series A to make DevOps so simple, it feels unfair

I'm excited to announce our $13M Series A, led by IRIS and Crane Venture Partners with support from Datadog founders and Speedinvest. This investment will fuel our mission to make DevOps simple and scalable, expand in the US and Europe, and accelerate product innovation.

Romaric Philogène
CEO & Co-founder
Observability
 minutes
September 25, 2025
Qovery Observe is Here: Your Deployments, Your Data, Your Visibility

Monitor your deployments with Qovery Observe: real-time metrics, logs, and events, directly integrated with your AWS applications and containers.

Julien Dan
Technical Product Manager
DevOps
9
 minutes
September 17, 2025
Top 10 Fargate Alternatives: Simplify Your Container Deployment

Tired of complex cloud setups? Explore the top 10 Fargate alternatives and discover how Qovery can simplify your container deployment, saving you time and money.

Mélanie Dallé
Senior Marketing Manager
Compliance
DevSecOps
12
 minutes
September 11, 2025
AWS HIPAA Compliance: A Comprehensive Guide & Checklist

Learn how to achieve and maintain HIPAA compliance on AWS with this comprehensive guide. Understand the shared responsibility model, essential architectural principles, and a practical checklist to protect PHI and avoid costly compliance violations. Discover how automation can reduce human error and streamline your security posture.

Mélanie Dallé
Senior Marketing Manager
DevOps
8
 minutes
September 9, 2025
Top 10 DuploCloud Alternatives: Choosing a Better Platform for Your DevOps Needs

Looking for a DuploCloud alternative? Explore why a full-stack platform like Qovery offers a faster, more developer-friendly solution. Compare the top 10 options to find a platform that simplifies DevOps and accelerates your deployments.

Mélanie Dallé
Senior Marketing Manager
Azure
9
 minutes
September 1, 2025
The Essential Guide to Azure Infrastructure, Monitoring, and Management Tools

Master Azure infrastructure management with this comprehensive guide. Learn the four critical pillars - governance, cost control, security, and operations - and discover the essential native and third-party tools needed to scale your cloud strategy effectively.

Mélanie Dallé
Senior Marketing Manager
Cloud
10
 minutes
August 28, 2025
Cloud Sprawl Explained: Taming Uncontrolled Cloud Growth

Tame uncontrolled cloud growth and regain control of your infrastructure. Learn the causes of cloud sprawl, its impact on your budget and security, and strategies to build a more sustainable cloud environment.

Mélanie Dallé
Senior Marketing Manager

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