DEV Community: Daniel Chifamba

One Command to Check How Ready Your System Is for Local AI

Daniel Chifamba — Sun, 24 Aug 2025 09:44:28 +0000

If you’re running local AI tools like Ollama, Jan, LM Studio or llama.cpp, one of the first things you’ll want to know is whether your GPU is up to the task. VRAM size, compute capability, and driver support all play a big role in whether models will run smoothly (or crash out of memory).

A neat shortcut: if you have Node.js installed, you can run:

npx --yes node-llama-cpp inspect gpu

Even though this command comes from node-llama-cpp, the output is universally useful. It quickly reports your OS, GPU, CPU, RAM, and driver metrics— that apply no matter which local AI framework you’re using.

Sample Output

With this quick check, you’ll know exactly what your machine can handle, and can better choose the right models and settings for your local AI experiments.

Making a Browser That Slips Past WiFi Captive Portals — and Why This Loophole Isn’t Worth It

Daniel Chifamba — Wed, 13 Aug 2025 09:54:20 +0000

Here's something fun — a loophole in WiFi captive portals that lets you surf the internet using a special web browser even if you haven't logged in yet. But before you pack up your laptop and head for free WiFi...there’s a catch! 😜

You've seen it before - you connect to a coffee shop hotspot or hotel internet, and you're instantly met with the familiar "Please log in or pay" page. Until you do, every site you visit redirects right back to that portal.

Most people assume captive portals completely block internet access until you've paid up or agreed to the terms.

But there's a small, odd exception buried under the hood... This isn't a "free internet" hack, and it won't stream Netflix, but it's a technical side effect of how the internet's plumbing works.

I built a functioning, text-only web browser that works entirely on top of this exception and I'll show you how it works, why captive portals sometimes allow it, and why you probably shouldn't rely on it for anything important.

If you prefer to jump to checking the code and running the browser, you can find the completed code here: https://github.com/nadchif/dnSurfer

What's Really Happening Behind That Wi-Fi Login Page

When you connect to public Wi-Fi, you're not immediately on the open internet. You're placed inside a restricted network, with a captive portal controlling what traffic gets through. Until you log in or accept the terms, it appears that every request you make is intercepted and redirected back to that same login page.

But here's the interesting part — before your browser can load example.com, it first has to ask a DNS (Domain Name System) server for that site's IP address.

And sometimes, the captive portal doesn't block that lookup step.

They assume DNS is harmless ("it's just phone numbers for websites"). 🤷‍♂️
Blocking DNS can break their own login page for people using a custom DNS setup.

The result: even though your web requests (HTTP/HTTPS) are locked away, plain old DNS queries can still slip out into the open internet. And because DNS can carry little snippets of text (via TXT records), clever folks have figured out you can string those snippets together and turn DNS into a tiny — but working — data tunnel.

So naturally, I had to build one to see if this actually worked in practice.

Turning DNS Into a Web Browser

The DNS browsing setup requires two parts.

When you type a URL in the DNS Browser, it doesn't make a normal HTTP request. Instead, it:

Encodes the URL into Base64 so it can fit inside valid DNS labels.
Splits the encoded data into chunks small enough for a DNS query.
Sends each chunk as part of a DNS TXT query to your custom DNS server.

The DNS server — running somewhere outside the captive portal — decodes those labels, fetches the actual webpage from the real internet, strips it down to plain text or Markdown, and splits it into small pieces. It sends each piece back as a TXT record. The Electron app (Browser) then stitches those chunks together and renders them in the window.

This works because captive portals that leak DNS will let these TXT queries and responses pass before login — meaning you can sneak tiny bits of webpage content back to your device.

To see the difference, let's look at the actual network traffic using Wireshark. I visited a page from https://news.ycombinator.com.

Packets captured when we loaded the URL from Chrome showed:

While packets captured when we loaded the same URL from our DNS browser showed:

Notice the difference: our DNS browser relied solely on the DNS protocol (over UDP port 53), while Chrome used TCP connections for HTTPS (TLSv1.2).

The trick is simple: only DNS is used, and DNS is still open. No magic here, folks 😉

Why This Loophole Isn't Worth It

Sure, it's fun, but:

Zero HTTPS protection. Everything travels in plain text, so anyone between you and the DNS server can read every page you load. It's basically broadcasting your activity in public, leaving you susceptible to MITM attacks.
Bare-bones browsing. Forget forms, images, or anything interactive this is text-only, and even that's slow.
Not dependable. Some captive portals already block DNS traffic, and those that don't might close the gap at any time. (The network admins read posts like this too, apparently 😅)

Think of it like this: if your neighbor locks the front door but leaves a small window open, it doesn't mean you should climb in. If you can put together a system like this, you can probably also manage the far simpler task of paying for that coffee or grabbing a Wi-Fi pass. 😉

Treat dnSurfer as a curiosity — a safe way to explore how protocols behave under unusual conditions — not a replacement for normal browsing.

The full source code (including chunking logic, multi-page navigation, and rendering) is in the repo:

nadchif / dnSurfer

A DNS-only web browser — browse even when HTTP(S) is blocked.

dnSurfer Suite

A web browser that surfs entirely over DNS

dnSurfer is a proof-of-concept browser that operates entirely over DNS, using a client–server connection to turn DNS queries into text-only web content.

DNS Browser (Desktop/Electron) — A text-only browser that fetches pages entirely over DNS TXT records.
Custom DNS Server (Node.js) — Serves stripped-down web pages as DNS responses.

No HTTPS. No TCP. Just DNS queries slipping past wifi captive portals.

Quick Start – How to Run the Browser

Pre-requisites

Node.js 20+
Git
Custom DNS Server (See how to setup server)

Steps

Clone this project

git clone https://github.com/nadchif/dnSurfer.git

Change directory to the cloned folder

cd dnSurfer

Launch Browser

npm run browser

How It Works

Best explained in the blog post I published here

Bundling / Compiling Executable

Change directory to the desktop client folder:

cd desktop-client

Install dependencies

npm install

Build app

MacOS

npm run dist:mac

Windows

npm run dist:win

View on GitHub

High-level code breakdown

For those who want the technical details:

Server Side (Node.js):

We use the dns2 library to create a UDP server listening on port 53
When TXT query requests come in, we extract the Base64-encoded URL from the DNS query
Decode the Base64 to get the original URL, then fetch that page using standard HTTP
Convert the HTML response to clean Markdown using the turndown library
Store the converted content in Redis with a 5-minute TTL for caching
Split the Markdown response into chunks small enough for DNS TXT records
Return each chunk with metadata like <|1/4|> indicating chunk number and total chunks

Client Side (Electron):

Create a minimal browser interface with a URL input field
When user submits a URL, encode it to Base64 and split into DNS-safe chunks
Use Node.js dgram to create UDP connections for DNS queries
Send TXT queries using the syntax: ..dns.me
Parse responses to extract chunk metadata (<|1/4|>, <|2/4|>, etc.)
Continue querying until all chunks are received
Reassemble the chunks, convert Markdown back to HTML using the marked package
Render the final HTML in the Electron webview

The whole system essentially turns DNS into a slow but functional HTTP proxy, with the server doing the heavy lifting and the client just reassembling text chunks.

If you're responsible for one of these captive portal setups, this is probably something to look into. While most people won't build custom DNS browsers, it's still an unintended hole that's worth plugging.

If you're into this kind of weirdness, check out:

Ch.at (chat with an LLM over DNS)
Links (browser in terminal)
Gophie (browse in gopher, alternative to http protocol)

Real-Time Transcriber & Translator to 100+ languages

Daniel Chifamba — Sun, 24 Nov 2024 14:39:20 +0000

This is a submission for the AssemblyAI Challenge : Really Rad Real-Time.

What I Built

I built a platform where users can start a live stream in english, and listeners can join to receive real-time translations in over 100 different languages.

This could be is great for a multi-lingual conference or gathering where the speaker is speaking, and the audience see the subtitle-like translations in a language of their choice.

When the stream ends, the broadcaster can also download an audio recording as well as text transcript.

Demo

Demo Site: https://gtreach.vercel.app

Client Code: https://github.com/nadchif/gt-reach-ui
Server Code: https://github.com/nadchif/gt-reach-server

Journey

After familiarizing myself more with AssemblyAI documentation, I was really excited to give this project a go!

This has always been something I've wanted to do, but I didn't really know where to begin. When I saw how fast and accurate the AssemblyAI transcriber is, this helped me make progress.
I could focus on the other pieces of the platform and leave AssemblyAI to do its magic 🪄 🧃

I'm excited about the AssemblyAI future and I hope they can support more languages for transcribing in the future. I'd like to be able to what a movie in another language and have live subtitles on the fly 😎

This has been a journey I'll remember 🙂

Price categories

Really Rad Real-Time

Fun Flashcards Game for Kids using AI Speech Recognition

Daniel Chifamba — Fri, 22 Nov 2024 06:59:37 +0000

This is a submission for the AssemblyAI Challenge : Really Rad Real-Time.

What I Built

I made a fun math game for kids with math flashcards. Kids answer by speaking, and the game uses AI Powered Speech Recognition to check their answers.

It has three levels of difficulty and a setting to turn sound effects on or off.

Demo

Live: https://mathwave.vercel.app

screenshot 1	screenshot 2	screenshot 3

Journey

I had fun hacking this one out. Initially setup most of the game using the native browser Speech Recognition API. That was an eye opener as I noted:

The recognition was rather poor. I assumed it was my voice so I had other people try it out. They too, seemed to end up frustrated as it was failing to recognize the right answer.
A lot of code and handling of edge cases was required
Results are not consistent across browsers. (ahem...Safari 😅)

Then came AssemblyAI to the rescue 🛟 🌊
The (HUGE) difference:

Very easy to setup, very few lines of code
Consistent experience across browser
Awesome speech recognition from kid's voices to adult voices, even where it was a bit noisy 🔥

Oh...and the Docs and Cookbook were on point 🙂 I found a perfect example pretty close to what I wanted to do here

I simply followed this example to come up with the code that transcribes the answers by voice

The rest of the Source Code can be found here:

https://github.com/nadchif/mathwave-ui

Price categories

Really Rad Real-Time

Run Your Offline AI Chat: Pure Browser, No Backend

Daniel Chifamba — Thu, 10 Oct 2024 14:18:01 +0000

Imagine running a ChatGPT-like AI right here in your browser - completely offline. No server needed, no API calls, just pure browser power. Sounds impossible? Not anymore! Modern browsers have evolved into incredibly capable platforms, and I'm excited to show you just what they can do. Together, we will build a React.js web app that you can chat with, even while you're offline

In this guide, we'll go through three options:

The Quick Start Approach. A ready-to-use version that works offline after downloading your chosen LLM
The Local Development Path. Running the source code locally on your own browser
Building from the Ground Up. Making a similar project from scratch using React

Background

"Boring...😴" Okay, If you're eager to jump straight into implementation, feel free to skip to "Running your own local models" 😜

The AI revolution has transformed how we work, and for good reason. Consider this: while it might take a person 20-30 minutes to read and summarize a book, an AI can accomplish the same task in seconds. Many of us have embraced tools like ChatGPT, Gemini, Claude and Grok for this very reason. But what if you want these capabilities without sharing your data with cloud services?

Thanks to the open-source AI community, we have many LLMs (Large Language Models) that are publicly available. Take the latest LLMs released by Google for example, they are compact enough to run on-device and the good news is they are available for anyone to use. But here's the thing - once you've got these models in your hands, how do you actually use them locally?

Popular solutions like Ollama and LMStudio offer impressive local AI capabilities, making it possible for you to run a model on your device. Ollama offers a nice CLI chat, while LMStudio provides a polished GUI experience. Both support API integration for custom applications. But today, we're exploring something cool - running these models directly in your browser.

Running your own local models in your browser without a backend

What makes this approach special is that we're running LLM models directly in your browser - no backend required. The concept is straightforward: download a model file once, then run inference locally, right in your browser. The capabilities of modern browsers are truly remarkable.

This magic is possible thanks to WebAssembly, which allows us to leverage powerful C/C++ tools like llama.cpp.

Drum-roll please 🥁...

Introducing Wllama - an impressive project that provides WebAssembly bindings for llama.cpp, enabling seamless in-browser LLM inference.

Let's begin.

The Quick Start Approach 🚀

Visit the pre-built demo site: https://private-ai-chat.vercel.app/ and experience it yourself:

Choose your preferred model from the dropdown
Type your prompt
Hit enter

That's all it takes. The page downloads your selected model directly to your device (browser cache), and from there, everything runs locally. Want proof? Try disconnecting from the internet or check your browser's network tab - no external calls, just pure local processing power at work.

Ready to explore more models? Head over to HuggingFace's GGUF model collection. You'll find a vast array of models ready for use - just download any GGUF file (up to 2GB) and load it through the dropdown.

Here are a few to get you started:

Gemma 3 270M by Google DeepMind
SmolLM2 135M by HuggingFace
Qwen 3 0.6B by Alibaba
Llama 3.2 1B by Meta

"That's nice, but I want to run it locally myself", I hear someone say. Sure...I got you covered 🙂

The Local Development Path 🏠

Let's set up your own local instance.

What You'll Need:

Basic HTML, Javascript, and CSS knowledge
Web browser with WebAssembly support. (I'm betting yours has 🤞😁)
Node.js installed. You can get a copy here and follow the installation steps.

Steps:

Clone the repository:

git clone https://github.com/nadchif/in-browser-llm-inference.git

Install dependencies:

cd in-browser-llm-inference &&
npm install

Note that it will attempt to download a model during installation to be used as the default option when you run the web app.

Launch the web app:

npm run dev

Navigate to http://localhost:5173/

Have fun!! 😊

Building from the Ground Up 💪

Now, let's demystify what is really going on by building our own implementation from scratch.

1. Create a React App with Vite

First, let's set up our development environment:

npm create vite@latest

When prompted:

Name your project (we'll use "browser-llm-chat")
Select React as your framework
Choose JavaScript as your variant

Then initialize your project:

cd browser-llm-chat
npm install

2. Design the Basic UI

Let's create a clean, functional interface. Replace the contents of App.jsx with:

import { useState } from "react";

function App() {
  const [prompt, setPrompt] = useState("");
  const [output, setOutput] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [progress, setProgress] = useState(0);

  const handlePromptInputChange = (e) => setPrompt(e.target.value);
  const shouldDisableSubmit = isLoading || prompt.trim().length === 0;


  const submitPrompt = () => {
    // We'll implement this next
  };

  return (
    <div>
      <pre>{output.map(({ role, content }) => `${role}: ${content}\n\n`)}</pre>
      {!output.length && (
        <div>
          {isLoading ? <span>Loading {Math.ceil(progress)}%</span> : <h1>Hi, How may I help you?</h1>}
        </div>
      )}
      <div>
        <input
          type="text"
          value={prompt}
          onChange={handlePromptInputChange}
          placeholder="Enter your prompt here"
        />
        <button type="button" onClick={submitPrompt} disabled={shouldDisableSubmit}>
          <div>→</div>
        </button>
      </div>
    </div>
  );
}

export default App;

Add some basic styling by replacing the contents of index.css with:

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
}
pre {
  font-family: sans-serif;
  min-height: 30vh;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
}
input {
  padding: 12px 20px;
  border: 1px solid #aaa;
  background-color: #f2f2f2;
}
input, pre {
  width: 60vw;
  min-width: 40vw;
  max-width: 640px;
}
button {
  padding: 12px 20px; 
  background-color: #000;
  color: white; 
}

3. Integrate Wllama

Now for the exciting part - let's add AI capabilities to our application:

npm install @wllama/wllama @huggingface/jinja

Update your App.jsx to integrate Wllama:

import { useState } from "react";
import { Wllama } from "@wllama/wllama/esm/wllama";
import wllamaSingleJS from "@wllama/wllama/src/single-thread/wllama.js?url";
import wllamaSingle from "@wllama/wllama/src/single-thread/wllama.wasm?url";
import { Template } from "@huggingface/jinja";

const wllama = new Wllama({
  "single-thread/wllama.js": wllamaSingleJS,
  "single-thread/wllama.wasm": wllamaSingle,
});

/* You can find more models at HuggingFace: https://huggingface.co/models?library=gguf
 * You can also download a model of your choice and place it in the /public folder, then update the modelUrl like this:
 * const modelUrl = "/<your-model-file-name>.gguf";
 */
const modelUrl = "https://huggingface.co/lmstudio-community/SmolLM2-135M-Instruct-GGUF/blob/main/SmolLM2-135M-Instruct-Q8_0.gguf";

/* See more about templating here:
* https://huggingface.co/docs/transformers/main/en/chat_templating
*/
const formatChat = async (messages) => {
  const template = new Template(wllama.getChatTemplate() ?? "");
  return template.render({
    messages,
    bos_token: await wllama.detokenize([wllama.getBOS()]),
    eos_token: await wllama.detokenize([wllama.getEOS()]),
    add_generation_prompt: true,
  });
};

function App() {
  // previous state declarations...

  const submitPrompt = async () => {
    setIsLoading(true);

    if (!wllama.isModelLoaded()) {
      await wllama.loadModelFromUrl(modelUrl, {
        n_threads: 1,
        useCache: true,
        allowOffline: true,
        progressCallback: (progress) => setProgress((progress.loaded / progress.total) * 100),
      });
    }
    const promptObject = { role: "user", content: prompt.trim() };
    setOutput([promptObject]);
    await wllama.createCompletion(await formatChat([promptObject]), {
      nPredict: 256,
      sampling: { temp: 0.4, penalty_repeat: 1.3 },
      onNewToken: (token, piece, text) => {
        setOutput([promptObject, { role: "assistant", content: text }]);
      },
    });
    setIsLoading(false);
  };
  // rest of existing code...
}
export default App;

Congratulations! Nicely done 👏 At this point, you have a functioning AI chat interface running entirely in your browser!

Let's review what we just did.

We imported and initialized an instance of Wllama
We added the URL that will be used to download the model initially.
We set up Chat Templating. Learn more about that 👉 Chat Templating Documentation and Extended Wllama Examples

Your web app will:

Download and cache the model on first use so it works completely offline after that.
Process prompts locally, in your browser, using your CPU
Stream responses as they're generated

If you're not already running the web app, start it using npm run dev and visit http://localhost:5173/. Test it out, and celebrate 🎉👏

Current Limitations 😅

Currently CPU-only (no WebGPU support yet)
2GB file size limit for models, though there's a workaround to split them (see the Wllama documentation)

A Huge Thanks To 👏

Cool Similar Projects to Check Out 😎

Ready for a challenge? (Pick any)

Update your copy of the code and improve the styling/CSS
Implement the ability for a user to pick a model file on their device. See: Example and Wllama documentation
The chat output is currently shown as plain text. To enhance the visual presentation, integrate a markdown library like react-markdown.

Share your outcome - let's celebrate your win! 🏆 🕺

Run a Virtual Machine in Your Browser

Daniel Chifamba — Sun, 06 Oct 2024 01:18:24 +0000

We're going to run a complete virtual machine right here in your browser! And not just run the VM - we'll boot up both FreeDOS and Alpine Linux. "Wait, what? We already have VirtualBox, VMware, and DOSBox for that stuff!" Well, who needs VirtualBox when you have a web browser? (Just kidding! 😄)

But seriously, let's have some fun showcasing just how powerful modern browsers have become, especially now that they support WebAssembly (Wasm). Sure, traditional VM software is great, but being able to run an entire operating system in your browser? That's just cool! 🚀

If you prefer to jump to the finished product, you can find the completed code here https://github.com/nadchif/in-browser-virtual-machine

In this guide, we'll use React.js, but I'm keeping things generic so you can adapt everything to plain HTML or whatever framework makes you happy.

What You'll Need

Basic HTML, Javascript, and CSS knowledge
Web browser with WebAssembly support. Don't worry, the browser you're using right now will likely work 😊
Node.js installed. You can get a copy here and follow the installation steps.

Okay, Let's Build This Thing!

1. Setting Up Our Web App

If you're already a React pro, feel free to skip the setup and jump to the Components part!

First, let's create our app using Vite (it's super fast and modern):

npm create vite@latest

When it asks you:

Pick a project name (I'm going with "browser-vm")
Choose React as the framework.
Go with Javascript as the variant. (Keeping it generic as promised 😄 )
Then run:

cd browser-vm
npm install

Components

Now let's set up our VM display. Open App.jsx replace all the contents with just this:

function App(){
return (
 <div id="screen_container">
 <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
 <canvas style={{display: 'none'}}></canvas>
 </div>
 );
}
export default App

Open index.css and replace the contents with:

#screen_container {
 white-space: pre;
 font-family: Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}

2. Getting Our Virtual Machine Ready

We're using this cool project called V86 that turns your browser into a proper computer emulator. It uses WebAssembly to translate computer instructions on the fly - pretty neat, right? More on that here

Grab these files from V86's GitHub releases:

Next, download the following BIOS files from the bios folder of the V86 repository:

Put them in your project like this:

public/
├── v86.wasm
├── libv86.js
└── bios/
    ├── seabios.bin
    └── vgabios.bin

3. Time to Make It Work!

Update your index.html to include our VM engine by adding <script src="libv86.js"></script>:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>FreeDOS 1.2</title>
</head>
<body>
 <div id="root"></div>
+ <script src="libv86.js"></script>
 <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Now for the fun part - let's configure our virtual machine! Update the contents of App.jsx to:

import { useEffect } from 'react';
function App() {

useEffect(function initializeEmulator(){
 // See https://github.com/copy/v86/blob/master/src/browser/starter.js for options 
 window.emulator = new window.V86({
   wasm_path: '/v86.wasm',
   screen_container: document.getElementById("screen_container"),
   bios: {
     url: "/bios/seabios.bin",
   },
   vga_bios: {
     url: "/bios/vgabios.bin",
   },
   hda: { // Hard Disk
    url:  "/images/fd12-base.img",
    async:  true,
    size:  419430400, // Recommended to add size of the image in URL. see https://github.com/copy/v86/blob/master/src/browser/starter.js 
   },
   autostart: true,
 });
}, []);

return (
     <div id="screen_container">
       <div id="screen" style={{overflow: 'hidden'}}>Initializing Emulator…</div>
       <canvas style={{display: 'none'}}></canvas>
     </div>
   );
}
export default App;

For more details on the available emulator options check out: https://github.com/copy/v86/blob/master/src/browser/starter.js

Let's Boot Some Operating Systems!

First Up: FreeDOS

Let's start with something fun - FreeDOS! It's perfect for running classic DOS games and software. Grab the pre-built version here, extract fd12-base.img, and drop it in your public/images folder.

Start the Web App by running:

npm run dev

And open http://localhost:5173/ in your browser

Want to Try Linux Instead?

Here's something even cooler - we can run Alpine Linux right in the browser! Download the latest Alpine virtual ISO and update your VM settings to:

window.emulator = new window.V86({
  wasm_path:  '/v86.wasm',
  screen_container:  document.getElementById("screen_container"),
  bios: {
    url:  "/bios/seabios.bin",
  },
  vga_bios: {
    url:  "/bios/vgabios.bin",
  },
  boot_order: '0x123', // Boot from CD-ROM first
  memory_size: 512 * 1024 * 1024, // 512MB RAM
  vga_memory_size: 64 * 1024 * 1024, // 64MB VGA RAM
  // See more: https://github.com/copy/v86/blob/master/docs/networking.md
  net_device: {
    type: 'virtio',
    relay_url: "wisps://wisp.mercurywork.shop",
  },
  cdrom: {
    // Source: https://dl-cdn.alpinelinux.org/alpine/v3.20/releases/x86/alpine-virt-3.20.3-x86.iso
    url: "/images/alpine-virt-3.20.3-x86.iso", 
  },
  autostart:  true,
});

Refresh the browser and wait for Linux to boot. It may take 3–5 min 😅. When prompted to login, enter: root

Make It Look Extra Cool 😎

Want that authentic retro computer feel? Let's add the perfect font:

Get the Modern DOS font
Drop the files in your project in assets/fonts/ModernDOS and update index.css to:

@font-face {
 font-family: 'ModernDOS';
 src: url('./assets/fonts/ModernDOS/ModernDOS8x16.ttf') format('truetype');
}
#screen_container {
 white-space: pre;
 font-family: 'ModernDOS', 'Courier New', Courier, monospace;
 font-size: 14px;
 line-height: 14px;
 background-color: #000;
 color:#fff;
}

Refresh the page and enjoy the new look!

What's Next?

Now that you've got a virtual machine running in your browser (how cool is that?!), here are some fun things to try:

Run some classic DOS games - https://www.freedos.org/about/games/
Play with Linux commands - https://www.freecodecamp.org/news/the-linux-commands-handbook/
Show your friends - they won't believe it! 🤯
Jump to Episode 2: Run Your Offline AI Chat Assistant: Pure Browser, Zero Backend

Want the complete code? Grab it here:

Similar Cool Stuff to Check Out

Big Thanks To

The awesome V86 project
FreeDOS and Alpine Linux teams
SeaBIOS folks
Modern DOS font creator