Building a TI-84 Plus CE Emulator in WebAssembly: Lessons from 100% Browser-Based Calculator Emulation

Furqan — Mon, 03 Nov 2025 13:14:31 +0000

Building a TI-84 Plus CE Emulator in WebAssembly: Lessons from 100% Browser-Based Calculator Emulation

TL;DR

I built a fully functional TI-84 Plus CE calculator emulator that runs entirely in your web browser using WebAssembly. It provides identical functionality to the $120+ physical calculator at zero cost. Try it live.

The Problem: Accessibility in Education

The TI-84 Plus CE graphing calculator costs $120-150, creating a financial barrier for many students who need it for math courses, standardized tests (SAT/ACT), and homework. I wanted to create a solution that:

Provides identical functionality to the physical device
Works on any device (phones, tablets, computers)
Requires no downloads or installations
Costs zero dollars

The solution? WebAssembly.

Why WebAssembly?

Performance Requirements

Calculator emulation is computationally intensive. We need to:

Emulate the eZ80 CPU (8-bit processor with 24-bit memory addressing)
Handle complex mathematical operations in real-time
Render a color LCD display at 60 FPS
Process touch/click input with minimal latency
Manage flash memory, RAM, and peripheral hardware

Traditional JavaScript couldn't deliver the performance needed. WebAssembly provides near-native C performance in the browser, making true hardware emulation possible.

Cross-Platform Compatibility

With WASM, the same compiled binary runs identically on:

Windows, macOS, Linux (desktop browsers)
iOS Safari, Android Chrome (mobile browsers)
No platform-specific builds needed
No app store approval required

Architecture Overview

Core Emulator (C/C++)

The core is based on CEmu, a third-party emulator focused on developer features. I compiled the desktop C core to WebAssembly using Emscripten.

Key Components:

// Core emulation modules
- CPU (eZ80 processor emulation)
- Memory management (flash, RAM, ports)
- LCD rendering (320x240 color display)
- Hardware peripherals (timers, interrupts, USB)
- Keypad input handling
- File I/O (.8xp program files)

Web Interface (JavaScript)

The web layer handles:

Canvas rendering for calculator screen
Touch/mouse input → emulator keypad mapping
File upload/download for TI-BASIC programs
PWA (Progressive Web App) installation
Service worker for offline functionality

The Critical Bridge

WebAssembly doesn't have direct DOM access. We use Emscripten's bindings to bridge WASM ↔ JavaScript:

// JavaScript → WebAssembly
Module._keypad_press(keyCode);        // Send button press to emulator
Module._lcd_get_frame();              // Get LCD buffer pointer

// WebAssembly → JavaScript  
window.requestAnimationFrame();       // Render loop at 60 FPS

The Build Process

Step 1: Compiling C to WASM with Emscripten

Makefile configuration:

CC = emcc

# Aggressive optimization for size (calculator needs to load fast)
CFLAGS = -W -Wall -Oz -flto

# WASM output with ES6 modules
EMFLAGS := -s WASM=1 
          -s EXPORT_ES6=1 
          -s MODULARIZE=1 
          -s TOTAL_MEMORY=33554432
          -s EXPORT_NAME="'WebCEmu'"
          -s "EXPORTED_RUNTIME_METHODS=['FS', 'callMain', 'ccall', 'HEAPU8']"

OUTPUT := WebCEmu

$(OUTPUT).js: $(OBJS)
    $(CC) $(CFLAGS) $(EMFLAGS) $^ -o $@

Result: Single WebCEmu.js file with embedded WASM binary (~2MB gzipped)

Step 2: Canvas Rendering Loop

The emulator renders to a 320x240 pixel buffer in WASM memory. We copy this to a HTML5 Canvas every frame:

function startRendering() {
    const LCD_WIDTH = 320;
    const LCD_HEIGHT = 240;

    // Get pointer to LCD buffer in WASM memory
    const lcdBufferPtr = Module._lcd_get_frame();

    // Create typed array view into WASM memory
    const lcdBuffer = new Uint32Array(
        Module.HEAPU8.buffer, 
        lcdBufferPtr, 
        LCD_WIDTH * LCD_HEIGHT
    );

    const ctx = canvas.getContext('2d');
    const imageData = ctx.createImageData(LCD_WIDTH, LCD_HEIGHT);
    const imageData32 = new Uint32Array(imageData.data.buffer);

    function renderLoop() {
        // Copy emulator screen to canvas (60 FPS)
        imageData32.set(lcdBuffer);
        ctx.putImageData(imageData, 0, 0);

        requestAnimationFrame(renderLoop);
    }

    requestAnimationFrame(renderLoop);
}

Performance: Consistent 60 FPS on modern hardware, ~30 FPS on mobile devices.

Step 3: Input Handling

Mapping web input to calculator buttons required careful touch event handling:

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const x = touch.clientX - rect.left;
    const y = touch.clientY - rect.top;

    // Map click coordinates to calculator keypad
    const keyCode = findKeyCode(x, y);
    if (keyCode !== null) {
        pressKey(keyCode);
    }
});

function pressKey(keyCode) {
    Module._keypad_press(keyCode);  // Send to emulator
    visualFeedback();                // Show button press animation
}

Step 4: PWA Implementation

Making it installable as a native app required:

{
  "name": "TI-84 Plus CE Calculator Online",
  "short_name": "TI-84 CE",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "icons": [...],
  "screenshots": [...]
}

Result: Users can "Add to Home Screen" and use it offline after initial load.

Key Challenges & Solutions

Challenge 1: Large WASM Binary Size

Problem: Initial WASM file was 8MB uncompressed, causing slow load times.

Solution: Aggressive optimization flags

-Oz                          # Maximum size optimization
-flto                        # Link-time optimization
--closure 1                  # Google Closure Compiler
-s MINIFY_WASM_IMPORTS=1     # Shrink WASM exports

Result: 2MB gzipped, loads in ~2-3 seconds on mobile.

Challenge 2: Memory Management

Problem: eZ80 uses banked memory addressing that doesn't map cleanly to WASM's linear memory.

Solution: Custom memory mapping functions

uint8_t *mem_get_ptr(uint16_t page, uint16_t offset) {
    // Map banked address space to WASM linear memory
    return wasm_memory_ptr + (page << 16) + offset;
}

Challenge 3: File I/O

Problem: WebAssembly has no filesystem access.

Solution: Emscripten's virtual filesystem

// Upload .8xp file from user
const fileInput = document.getElementById('file-upload');
const arrayBuffer = await fileInput.files[0].arrayBuffer();
const uint8Array = new Uint8Array(arrayBuffer);

// Write to emulator's virtual filesystem
Module.FS.writeFile('program.8xp', uint8Array);
Module._load_file('program.8xp');  // Tell emulator to load it

Challenge 4: Touchscreen Support

Problem: Calculator UI designed for buttons, not touch.

Solution: Responsive button sizing + visual feedback

.keypad-button {
    min-width: 48px;    /* Thumb-friendly touch targets */
    min-height: 48px;
    touch-action: none; /* Prevent scrolling during button press */
}

Performance Results

Metric	Desktop	Mobile
Initial Load	2-3 seconds	4-6 seconds
Render FPS	60 FPS	30-45 FPS
Memory Usage	~40 MB	~50 MB
Battery Impact	Minimal	Moderate

Mobile performance is playable but not ideal. The calculator is designed for desktop/tablet use primarily.

Security & Legal Considerations

ROM Distribution

Critical: We do NOT distribute TI's proprietary ROM firmware. Users must provide their own ROM dump from a physical calculator they own.

Implementation:

// ROM file handling (server-side validation)
if (!isValidROMFile(romFile)) {
    throw new Error('Invalid ROM file');
}
// Only accept ROMs with correct checksums

Acceptable Use

Educational purposes
Student homework and practice
Teaching demonstrations
Developer testing

Not acceptable:

Test cheating (physical calculator required)
Copyright infringement (distributing ROMs)

What I Learned

WebAssembly is Production-Ready

WASM delivers the performance needed for complex applications. Modern browser support is excellent (96%+ global).

PWA > Native Apps (Sometimes)

For simple tools like calculators, PWAs offer:

Zero app store friction
Instant updates
Cross-platform codebase
Smaller development time

Education Needs Open Alternatives

Creating free alternatives to proprietary educational tools removes financial barriers for students worldwide.

Future Improvements

Performance: WebGPU rendering for faster graphics
Features: Link cable emulation for multi-calculator collaboration
Mobile: Native iOS/Android apps for better battery life
Accessibility: Screen reader support, high contrast mode

Try It Live

Demo: https://ti84ce.com

Tech Stack:

WebAssembly (Emscripten)
Canvas API
PWA (Service Worker + Manifest)
Vanilla JavaScript (no frameworks)

Source: Based on CEmu (GPL v3)

Discussion

Questions for the community:

What other desktop applications should be web-emulated?
How can we improve WASM tooling for better DX?
What are the limits of browser-based emulation?

Share your thoughts in the comments!

webassembly #wasm #education #javascript #emulation #opensource #webdev #calculator #stem #accessibility

Note: This article discusses WebAssembly compilation techniques only. It does not reveal proprietary Texas Instruments code, ROM firmware, or trade secrets. All code examples are either publicly documented WebAssembly features or standard Emscripten compilation flags.

About the author: I'm a developer passionate about making educational tools accessible. Find me at ti84ce.com.

Forem: Furqan

Building a TI-84 Plus CE Emulator in WebAssembly: Lessons from 100% Browser-Based Calculator Emulation

Building a TI-84 Plus CE Emulator in WebAssembly: Lessons from 100% Browser-Based Calculator Emulation

TL;DR

The Problem: Accessibility in Education

Why WebAssembly?

Performance Requirements

Cross-Platform Compatibility

Architecture Overview

Core Emulator (C/C++)

Web Interface (JavaScript)

The Critical Bridge

The Build Process

Step 1: Compiling C to WASM with Emscripten

Step 2: Canvas Rendering Loop

Step 3: Input Handling

Step 4: PWA Implementation

Key Challenges & Solutions

Challenge 1: Large WASM Binary Size

Challenge 2: Memory Management

Challenge 3: File I/O

Challenge 4: Touchscreen Support

Performance Results

Security & Legal Considerations

ROM Distribution

Acceptable Use

What I Learned

WebAssembly is Production-Ready

PWA > Native Apps (Sometimes)

Education Needs Open Alternatives

Future Improvements

Try It Live

Discussion

Tags

webassembly #wasm #education #javascript #emulation #opensource #webdev #calculator #stem #accessibility