Powering React with Python (Wasm)

A few weeks ago, I came across a video by popular tech streamer Theo T3. The video was a read-through of “Powering Angular with Rust (Wasm)” by

. I’ve been building a platform that compiles Python code to WebAssembly, among others, so I knew I had to write a follow-up article exploring the same.

Vibe Coding a Photo Editor in Next.js

Unlike the original article Theo covered, we’re going to build something a bit more interesting: a web-based photo editor. With the abundance of AI tools available, I thought I’d start by simply sketching out what I wanted the UI to look like:

I then created a starter Next.js app with TypeScript, adding Tailwind CSS and Shadcn UI. Next, I handed the wireframe above to Claude 3.7 to generate the required components to recreate the UI. After a fair amount of prompting and refactoring, I managed to get a functioning UI:

Now we’re ready to implement the photo editing routine:

Editing an Image with Python and Wasm

Image editing is a compute-intensive task, because the same mathematical operations get applied to millions of pixels. Writing JavaScript code to perform this editing would result in abysmal performance, given the fact that JavaScript is an interpreted language. On the other hand, WebAssembly is a web technology that allows us to run code with near-native performance, leveraging technologies like SIMD and WebGPU — things that are difficult to do in JavaScript.

We won’t write WebAssembly directly. Instead, we will write our image editing function in a language that can get compiled to WebAssembly. Up till now, this has meant C++ or Rust. But with Function, it is now possible to write Python code that gets compiled to WebAssembly.

Why Python? Python has a a rich ecosystem of numerical computing libraries like Numpy; and is extremely easy to learn, write, and maintain. Here’s all the code we need for our editing function in its entirety:

Next, we can compile the edit_image function for WASM using the Function CLI:

Running the Python Function in the Browser

Once the function is compiled, we can run it in the browser with JavaScript. First, install Function for JavaScript:

Next, let’s implement an effect hook that applies the current filters (from the UI sliders) to the image, and renders it on a canvas element:

And back in the browser, we see the image being edited smoothly in realtime:

Try it Out

You can try out the editor yourself:

And make sure to check out and deploy (and ⭐) the code on GitHub:

What will you build if you could run Python functions in the browser? Computer vision? LLMs? Join the conversation in Function’s Discord community.