// tech stack
ElectronWebGLTypeScriptRustNode.js
// the challenge
Existing terminal emulators rendered with DOM elements, causing frame drops during fast output. SSH workflows required constant context switching.
// the solution
Used WebGL for all text rendering — each glyph is a textured quad on the GPU. Implemented a custom font atlas with subpixel rendering for crisp text at any scale.
// measurable impact
Consistent 60fps at 200,000 lines of scrollback. 4.1K downloads in first 3 months.
- Timeline
- 8 months
- Team
- Solo project
- Role
- Systems + Frontend Engineer
// key highlights
- ◆WebGL text rendering with custom glyph atlas and font hinting
- ◆Native SSH client built in Rust (via NAPI bindings)
- ◆Plugin system with JS/WASM runtime sandboxing
- ◆Split-pane layout engine with persistent sessions
// implementation sample
// WebGL glyph renderer — batched draw calls
class GlyphRenderer {
private atlas: GlyphAtlas;
private vertexBuffer: Float32Array;
constructor(gl: WebGL2RenderingContext) {
this.atlas = new GlyphAtlas(gl, { size: 2048 });
this.vertexBuffer = new Float32Array(MAX_GLYPHS * 6 * 4);
}
render(cells: TerminalCell[], viewport: Rect) {
let idx = 0;
for (const cell of cells) {
const glyph = this.atlas.get(cell.char, cell.attrs);
this.writeQuad(this.vertexBuffer, idx, glyph, cell);
idx += 24;
}
this.gl.bufferSubData(ARRAY_BUFFER, 0, this.vertexBuffer, 0, idx);
this.gl.drawArrays(TRIANGLES, 0, idx / 4);
}
}