Demo Open Source Products With a Live Code Editor

RECENTLY WE’VE OPEN SOURCED SEVERAL PRODUCTS. It has been great to improve our code and to allow Engineers to grow outside of their normal workflow. We’ve learned that a key to improving our open source products and our learnings is providing demos for our open source projects in live code editing tools like CodePen.

Providing demos in a live code editing tool gives developers who are interested in using the plugin the ability to quickly view, edit, and test the plugin to see if it fits their needs.

An unexpected benefit of providing demos in this format is that developers can quickly offer support for bugs or opportunities to improve products.

When we released Shave, we had no idea that the plugin would be adopted so quickly. Within the first or second week of its release, we received a Codepen demo saying that Shave didn’t support non-spaced languages. This demo quickly gave insight into something we wanted to support. We were able to provide support for non-spaced languages quickly within 3 days of knowing about the enhancement opportunity.

From our learnings, we recommend using live demos for open source products along with code samples within a readme. It enables developers interested in the product to play with the demo and see if it suites them. An unexpected benefit has been the power we’ve given developers to catch bugs and suggest enhancements.