Close

Sign up to Gadget

Get instant feedback on your code with the new JS playground in Gadget

-

About

Quickly test your backend as you build with the flexibility and instant feedback loop of the new JS playground.

Problem

Solution

Result

Get instant feedback on your code with the new JS playground in Gadget

Emma Hyde
July 8, 2024

TLDR: Test, debug, and run actions in seconds with the new JavaScript API playground.

Build your features faster and minimize the time you spend iterating — without compromising on quality. The new JS playground gives developers an easy, light-weight way to quickly test their Gadget actions while developing. 

Starting today, you can test your Gadget APIs with a single line of JavaScript directly from your browser. Iterate faster using the JS playground to call your app's API client without having to worry about GraphQL mutations or setting up a third-party tool like Postman. 

The JS playground isn't a replacement for unit tests, but it does make it easy to test your actions and APIs without any manual setup of tooling or test frameworks. Run your actions, see the results (or errors!), and iterate on your code quickly. 

And the playground isn't just for testing actions, you can also use it to seed test data into a development environment or manually call your production APIs to fix bad data.

The new JS playground is built to be a developer's sandbox. It lets you test your actions with different inputs in seconds. It comes with syntax and auto-complete baked in, and it’s pre-connected to your API instance. No setup, no config — just fast, easy testing for your code. 

The JS playground lets you create specific use cases in seconds, and write them in JavaScript.

Test quickly, test thoroughly

Since the rest of your code in Gadget is written in JavaScript, it only makes sense that you should have the option to manually test actions in JS as well. With the option to quickly spin up use cases in JavaScript, it's easy for all web devs to start manually testing endpoints.

Most of the time when you make a quick change to your code, you just want to confirm it didn’t break anything. With the JS playground, you can see the impact of your changes in seconds.

As with everything in Gadget, this feature lets you spend more time focused on building out your features, instead of wasting your time on busywork. The JS playground gives you the option to write out more robust tests when you want to, but not before you have to. You can still run exhaustive tests when you need to, but now you can also take advantage of an instant feedback loop.

You can access the JS playground by going to API →API playground in the Gadget editor. Navigate to your Gadget action files and click Run Action in the Triggers panel to automatically load an existing API call into the playground. Any JavaScript docs snippets with an Open in Playground button will also open the JS playground with the sample code pre-loaded.

Wait! What about the GraphQL playground?

If you use Gadget’s existing API playground and you prefer to run your tests there, don’t worry! It’s not going anywhere. You’ll now have more options for how you choose to run your tests. It’s there for those of you who prefer more verbose code and need to refine your queries. The GraphQL playground will still be opened when viewing GraphQL snippets in Gadget or the docs.

If you have questions about the JS playground or want to learn more about how you can use it to run tests, you can join our community Discord.

Interested in learning more about Gadget?

Join leading agencies making the switch to Gadget and experience the difference a full-stack platform can make.
Keep reading to learn about how it's built

Under the hood

We're on Discord, drop in and say hi!
Join Discord
Bouncing Arrow