Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There are so many delightful visual demos on CodePen. Every now and then, some do something a little extra!

dat.GUI is a small, unobtrusive user interface that squeezes up in the corner of your site or demo to give the viewers the ability to easily tweak and tune your variables in real time!

You can see it in action in Matei Copot’s Pen:

You can add dat.GUI to your demo quickly and easily with our autofill resource popup.

Then, follow along with its amazing documentation to see how to hook it up to your variables and you’ll be good to go!

For good measure, here are a few more of my favorite demos featuring dat.GUI:

André Mattos’ “Audio Cloud”

Mombasa’s “Torus Tunnel”

Francesco Trillini’s “Spiral”