Building My First HTML5 Free Body Diagram App: Reflections on Creativity, AI Tools, and Privacy

Over the past few weeks, I’ve been exploring something I’ve wanted to do for years—create an app that allows students to draw and save their own free body diagrams (FBDs). As a physics instructor and instructional designer, I’ve long recognized how valuable it is for students to be able to visualize forces interactively, but until recently, the technical barriers made it difficult to bring this idea to life in a simple, browser-based way.

Using Claude, I was able to build and refine an HTML5 app that finally does what I’ve always envisioned: it lets students sketch free body diagrams for different scenarios, label forces, and export their finished diagrams as images. You can view the app here: Free Body Diagram App.

What Made This Different

I’ve experimented with several platforms over the years—Scratch, JavaScript tutorials, and even a few interactive whiteboard tools—but none offered the same combination of control and simplicity. What made Claude stand out was how easy it was to iterate and modify code. I could describe a desired feature in natural language, get functioning HTML and JavaScript instantly, test it, and tweak it in minutes. For someone who knows rudimentary HTML but isn’t a full-time developer, that accessibility was transformative.

Balancing Innovation and Privacy

As exciting as the creative process was, it also raised new concerns. Hosting an app through Claude means the page technically lives within their system, and even though I’ve turned off the use of data for training, I’m still cautious about privacy—especially when students are involved. My app doesn’t collect personal data or require a login, but I’m mindful of the ethical responsibility educators have when deploying AI-assisted tools.

Moving forward, I plan to explore alternative hosting options such as GitHub Pages or my institution’s learning management system, where I can ensure full control over privacy and accessibility compliance.

Looking Ahead

This experience has opened a door to a new kind of instructional design—one that blends human creativity, AI-assisted coding, and thoughtful attention to ethics. I’m already envisioning extensions: perhaps integrating preset physics scenarios, a “hint” system tied to Newton’s laws, or even the ability to check for balanced forces automatically.

Building this small app reminded me why I love what I do. The intersection of teaching, technology, and curiosity continues to offer new spaces for exploration—and sometimes, the best way to learn is by building something that lets others learn too.