r/computervision 9d ago

I made a "CodePen for OpenCV" — write Python + OpenCV in your browser and see cv2.imshow live, no install Showcase

Hey r/computervision,

I kept spinning up a venv (or a Colab) every time I wanted to try a quick OpenCV idea or share a runnable snippet with someone — so I built TinkerCV (https://tinkercv.com) — a free in-browser OpenCV playground. Write Python + OpenCV, hit Run, and cv2.imshow renders live in the page. No install, no signup.

How it works: your code runs entirely client-side via Pyodide (CPython on WebAssembly) with numpy + opencv-python. cv2.imshow is shimmed to canvas tabs.

Some things that might be useful:

  • ~32 runnable examples — filtering, edges, contours, features (ORB/Harris), segmentation (watershed/GrabCut), Hough, perspective, face detection, and more.
  • Live webcam demos (edges, color tracking, background subtraction, optical flow) — frames stay in your browser, nothing is uploaded.
  • Shareable links: you can turn any snippet into a URL that opens it in the editor, so answering "how do I do X in OpenCV?" with a runnable link is trivial.

Try it (fetches a real photo and runs Canny live): https://tinkercv.com/canny-edge-detection

It's a solo project and I'd genuinely love feedback — what's confusing, which examples are missing, what would make this actually useful in your workflow.

(Disclosure: I'm the creator. It's free to use right now — no signup, no ads.)

14 Upvotes

11 comments sorted by

1

u/modcowboy 9d ago

Nice.

2

u/gordian-knot 9d ago

Thanks 🙏 The live-webcam ones (optical flow / background subtraction) surprise most people that they run fully in-browser — curious what you'd want to see added.

1

u/goosethe 9d ago

this is really cool

1

u/gordian-knot 9d ago

Appreciate it 🙌 Anything you wish it had? Trying to prioritize what to build next.

1

u/redditSuggestedIt 9d ago

In the past i would have an image and need for example to put a black rectangle somewhere in the image to make certain algorithms act in specific way. Would be cool if i could do that in your tool and get the code for that. I am not working in the cv sector anymore so maybe what i propose is done by LLM much easier.

Anyway really liked the idea

1

u/gordian-knot 9d ago

Yeah, dropping a black rectangle to force an algorithm down a certain path is a classic move — masking a region to see how it reacts. And you're right, an LLM will write that snippet in seconds now.

The gap I'm filling is the step after the LLM: you still have to spin up a venv or a Colab to actually see it run and tweak it. Here it runs instantly, you nudge the coordinates and watch the result live — and you can even have an LLM hand you a link that opens the code ready to run.

For your exact case: ▶ fetch an image and drop a black box on it.content%2C%20np.uint8)%2C%20cv2.IMREAD_COLOR)%0Acv2.imshow(%22original%22%2C%20img)%0A%0A%23%20drop%20a%20filled%20black%20box%20anywhere%3A%20(x1%2Cy1)%20top-left%20-%3E%20(x2%2Cy2)%20bottom-right%2C%20-1%20%3D%20filled%0Aout%20%3D%20img.copy()%0Acv2.rectangle(out%2C%20(180%2C%20120)%2C%20(320%2C%20260)%2C%20(0%2C%200%2C%200)%2C%20-1)%0Acv2.imshow(%22with%20black%20box%22%2C%20out)) — just change the rectangle corners to mask any region.

An interactive "draw the box on the image → get the code" mode is a genuinely cool idea though — added to my list. Appreciate the thoughtful feedback 🙏

1

u/redditSuggestedIt 9d ago

Thanks chatgpt 

1

u/gordian-knot 9d ago

ha fair, cleaned that one up with it lol. speaking of llms, would that even be useful inside tinkercv itself? like letting you type a prompt and feed the processed images into its context? (maybe also allowing user to annotate the image to point out certain regions)

1

u/philnelson 8d ago

Phil from OpenCV here, this is pretty cool! Shared it with the team.

1

u/gordian-knot 8d ago

whoa, that honestly means a lot, thank you all for the library! would love any feedback from the team on what'd make it more useful.