Investigations

Visual Node Editor

TypeScript June 2025

A full-featured web-based presentation tool combining slide-based editing with a visual node editor, animations, and PowerPoint export.

This started as a drag-animation prototype and grew into something much bigger — a complete presentation creation tool that combines traditional slides with a visual node editor for non-linear flows.

The editor supports rich animations (fade, slide, scale, draw), a CSS clip-path slicing system for creative transitions, and a presentation mode with drawing/annotation tools and a laser pointer. You can create nodes, connect them with smart snapping connectors, and navigate the canvas with zoom/pan.

What makes it genuinely useful is the PowerPoint export via pptxgenjs — you can build your presentation in the browser and export it as a proper .pptx file. There's also a template system, theme support, copy/paste, keyboard shortcuts, grid snapping, and video time controls.

The architecture went through a major refactoring from a monolithic App.tsx (2,268 lines) to a modular structure with custom hooks. The backend is Go with gqlgen for GraphQL. Frontend is React 19 with react-dnd, Tailwind, Radix UI, RxJS, and Storybook 9.

What this project demonstrates

Visual node editor with smart connector snapping and zoom/pan
Animation system: fade, slide, scale, draw with clip-path slicing
Presentation mode with drawing tools and laser pointer
PowerPoint export via pptxgenjs
Go/gqlgen GraphQL backend, React 19 frontend
Refactored from 2,268-line monolith to modular architecture

Technologies

ReactGraphQLGoPresentationAnimationNode Editor

© 2026 Jonathan Leahy · v0.8.5