LeaferJS × Cloud Studio: A Powerful Playground Environment for Running Code and Mini Games Easily
2024-08-20 "First Collaboration Between LeaferJS and Tencent Cloud Studio"
User Voices
“Is there an online Playground where we can directly run official example code and share snippets or demos?”
On a bright sunny morning, I was working on LeaferJS as usual. As this open-source project continued to grow, the user base was steadily expanding.
That day, the community suddenly became lively. Several developers started discussing: “Is there an online Playground environment where we can directly run example code from the official website and share code snippets and demos?”
This question quickly resonated with others.
I paused my work and looked at the screen. In fact, I had already realized that users were eager for such a platform—but with so many tasks at hand, I hadn’t had time to focus on it.
An Unexpected Collaboration Opportunity
While I was thinking about how to solve this need, a private message popped up. It was Gan Mi, the product lead from Tencent Cloud Studio.
“I’ve noticed the discussions in your user group recently,” he said directly.
Then he added: “You could try building this Playground environment using Cloud Studio—we can provide technical support.”
At the time, I didn’t pay much attention and casually replied: “Sounds good, I’ll check it out when I have time.”
To be honest, I was thinking: “It might be better if we build our own Playground—some users are even interested in contributing to it.”
Exploring the Solution
Soon after, more users asked about the Playground.
Out of curiosity, I decided to take a closer look at Cloud Studio.
With the help of Megan Zhang, I quickly set up an online Playground environment.
This was exactly what users needed—edit code, click run, see the results instantly, and easily share the code for others to preview.
At that moment, I changed my mind. Instead of spending a lot of effort building a Playground from scratch, it made more sense to leverage Cloud Studio and focus our time on developing the core features of LeaferJS.
Feature Improvements and Launch
Although Cloud Studio wasn’t originally designed specifically for Playground use, it offered strong capabilities.
To make it more user-friendly, I proposed a feature: “Can users create a LeaferJS Playground environment directly from a link?”
The Cloud Studio team responded quickly. They integrated LeaferJS into open-source templates and enabled direct template selection via link. To prevent abuse, users still need to manually click a “Create” button—but as long as the steps are clear, this is perfectly acceptable.
How to Use
Now, anyone can create their own LeaferJS Playground environment in just a few simple steps. Give it a try!
Enter via the homepage entry scenarios
Follow the guided steps to the creation page
Enter the Playground environment
Share Your Code
In the past, many LeaferJS users had to set up their own environments before sharing their work.
Now, with Cloud Studio, you can directly import projects from GitHub, quickly create applications, and share them via a link.
As the LeaferJS community continues to grow, the official examples are no longer enough. More users want to learn from real-world snippets and use-case demos.
We need more shared examples and practical scenarios.
We encourage you to share your code snippets or projects in our community—we’ll curate and publish them on the official website so developers can learn and grow together.
A quick insight: mini-games and graphics editor demos are currently the most popular. We are also actively improving features like sprites, animations, and filters to better meet developers’ needs.
Learn More About LeaferJS & Cloud Studio
LeaferJS is a powerful and easy-to-use Canvas rendering engine. It is free and open-source, and can be used for efficient drawing, UI interaction (including mini-games), graphics editing, and auto layout.
Website: https://www.leaferjs.com
Cloud Studio is an online programming and application sharing platform, providing a powerful web IDE and cloud development environment, enabling you to easily write, run, and share applications.
Website: https://cloudstudio.net