Recreating NASA’s UI for their Mission Control Tech

JuanCarlos Chavez
JuanCarlos Chavez
Posted underTech

It’s pretty cool that NASA has an open-source javascript project that anyone can contribute to. You can actively write some code with the mission of space exploration & scientific discovery with some HTML, CSS, and JavaScript!

This was my first glimpse into NASA’s openMCT program where they are determined to create a universal mission control system that future space exploration endeavors could use and adapt as their own.

When I first read about their project on their website I imagined a Stark Industry looking piece of tech for sending people to space. I thought I would give it a jab to give my own rendition given that the site is open source.

Here is how I started.

NASA’s openMCT home page


On their homepage you can check out some introductory information and have access to a demo by clicking the “Try it now” button, or check out the source code by clicking “Get Source”.

Nasa’s openMCT homepage 2021

Downloading the project

You need to have Git and Node.js installed in order for you to get started. Check those out if you do not have them on your machine yet.


  1. Clone the source code:
    1. git clone
  2. Install dependencies by running:
    1. "npm install" or "yarn"
  3. Start the server locally
    1. npm start” or “yarn start

The current UI of openMCT

Running openMCT project on the localhost:8080/

The current interface is already looking pretty sweet with time-series charts and other elements of data visualizations composed on their “Display Layout” interface. I was even able to integrate my own blog pretty easily too ?. The application is structured as a plug-in system that encourages integrations with other teams and systems. Such as another team creating a 3D tracking web app of a rocket leaving the ground “Google-Earth” style:

SpaceX CRS-9 visualized by flight club

Tweaking the css

Besides going through the docs and tutorials, I am fairly new to the code base, so I think the easiest thing to do is to start updating the design.

I was inspired by with some cyberpunk looking color schemes, font choices, and elements. I wished I could have used their components but I could not since it’s written in react (and the codebase is written in Vue.js) I am just stripping out the CSS and implementing it here.

After a few lines of code I got it to look something like this:

NASA’s openMCT redesigned with cyberpunk looking UI/UX

Pretty sweet if you ask me.

Adding a loading screen and redesigned UI components

Since the entry point to the application is a single index.html file that is served via express, I simply made changes to that one file to customize openMCT with my own UI and even embed videos and blogs.

NASA openMCT redesign with loading screen and links

The demo pages for openMCT have their own loading screen so I thought I would add my own with a link to my website and a button to try the redesign.

The animated moon background is solely CSS and HTML that was ported over from this codepen.

Lastly, I updated the button styles for both the loading screen and the canvas page.

What I learned

I have yet to deep dive yet into the open-source world. I’ve made a few contributions but nothing significant. There is no better way to get started than to contribute to a project that captures my interests in space exploration and web development at the same time.

I highly recommend checking out the NASA’s openMCT homepage for more resources on how to contribute.

Try it out yourself with the “juancarlos-cyberpunk-redesign” branch on my forked repo of openMCT:

Thanks for reading!


If you enjoyed this read let me know by dropping a mail to:

? Cheers to the new years! #2021

Get notified about tech, design, and entrepreneurship posts:

Subscribe to our newsletter to get to know about my latest projects and posts.

More Stories

Youtube, Podcast, & Life Updates – March 2021

The beginning of the quarter of the year is always a hectic time for me. We’re just coming off from holidays, getting back into work, & preparing for tax season. I always tend to feel refreshed and ready to attack the year in Jan & Feb with my list of goals in hand, being filled […]

JuanCarlos Chavez
JuanCarlos Chavez

How To Code a Personal Website STEP by STEP for Beginners! With FREE Hosting 2021 Edition

Have you ever wanted to learn to code but didn’t know where to start? You are in the right place. This blog is to help accompany the video above as a written guide. Who is this guide for? This tutorial is designed for those who are total beginners to web development and coding. Have you […]

JuanCarlos Chavez
JuanCarlos Chavez

Working on my second Youtube Video

I am at the beginning of my content creation journey and I have to admit, it’s asking me a lot deeper questions of myself and who am I more than I thought. Some questions come to mind: What kind of stuff do you want to share with the world? What would you do if you […]

JuanCarlos Chavez
JuanCarlos Chavez

2021 Goals

This is the year that I’ve decided to be more open than ever especially in the digital space. One way of doing this is by sharing the goals I am attempting to accomplish this year. It was tough trying to balance setting achievable goals and ambitious goals. I, as the pragmatic type, try to lean […]

JuanCarlos Chavez
JuanCarlos Chavez

How I created my first video & launched my YouTube Channel

First of all, Happy 2021! I know the craziness still exists but man it feels good that a fresh new number was added to the year ? Why start a YouTube Channel? There are 5 main reasons why I decided to finally hit record & upload: I want to be a producer rather than a […]

JuanCarlos Chavez
JuanCarlos Chavez

The Simple Intro Guide to Accounting for Small Businesses

When you create a business the first step is to register your business with your state. Each state has different processes fortunately (or unfortunately) that you could learn to do yourself but it can get clunky and weird. If you have some extra money (around $500) it’s highly recommended that you start your business with […]

JuanCarlos Chavez
JuanCarlos Chavez

How I Coded Up My Own Blog with NextJS and WordPress

If you are reading this post before in 2020 or 2021, odds are the website you are reading is built with the technologies I will be mentioning. I say this since you can inspect the code on this page pretty easily by right clicking any where on the page an hitting “inspect” and be able […]

JuanCarlos Chavez
JuanCarlos Chavez

Creating a project proposal for an agency in Notion

I have been using Notion for all list keeping including clients for the web design agency I am working to build over at My objective was to create a template “Project Proposal” plan for my future clients. I’ve looked at other samples and watched a few explanations on YouTube can came up with my […]

JuanCarlos Chavez
JuanCarlos Chavez