Bask + VS Code: Bubble Plugins Made Easier

Dreaming of smoother Bubble plugin development? Bask shortens the process, so you can get building, testing, and publishing ASAP.

Théo Goldberg
November 14, 2023 • 3 minute read
Bask + VS Code: Bubble Plugins Made Easier

It’s no secret that plugins are a vibrant part of the Bubble ecosystem. Since their debut in 2016, more than 5,000 plugins have been launched in the marketplace. Plugins have expanded the possibilities for Bubble users and their apps, from enabling payment processing and integrating artificial intelligence (AI) to extending apps with almost any API or JavaScript.

A screenshot of the Bask plugin being used in the VS Code workspace

Bask is a new tool for VS Code users that helps streamline Bubble plugin development — making it faster to build, bundle, and publish plugins, so you can focus on the details ‌that matter.

Complementing what Bubble does best

People building with Bubble don’t need to know how to code — you can build and scale apps using an entirely-visual interface that allows you to drag and drop together a front end, back end, and even APIs. But plugins make Bubble an even more extensible, versatile, and flexible platform. For example, if users did want to add some custom JavaScript to their Bubble app, they could use the Toolbox plugin

Some plugins are built by Bubble, but the majority are built by members of the wider community who have expertise working with traditional code in integrated development environments (IDEs). But because Bubble is not an IDE — our bread and butter is visual programming and no-code development — many plugin developers prefer to use a third-party tool like Visual Studio Code (VS Code) instead of Bubble’s native plugin editor. The problem is, switching back and forth can make for a clunky process.

That’s where Bask comes in.

Why you should use the Bask VS Code extension for Bubble plugins

Bask was built to streamline Bubble plugin development, helping you work faster while making it easier to organize and maintain complex plugins built in IDEs like VS Code. 

A screenshot of the Bask plugin being used in the VS Code workspace
Bask auto converts plugin functions to named functions so linters and build tools stay happy

While the default Bubble plugin editor can be connected to a test app to help debug plugins in real-time, IDEs like VS Code don't automatically push server-side actions, client-side actions, or visual element edits to Bubble. As a result, plugin developers tend to sync their code manually using git or by copy and pasting between their IDE and the Bubble plugin editor. This can slow down the pace of development, especially for plugins that require a bundling step. 

Bask is a VS Code extension that makes this process smoother by: 

  • Allowing developers to edit and debug plugins in their test apps in real time from VS Code
  • Working from any git branch you're in (not just “main”), allowing you to save development versions of your plugin without having to publish
  • Releasing a new version of your plugin and tagging it in git, so your repo stays in sync when published
  • Enforcing the separation of source from distribution files, allowing you to package performant SSAs, CSAs, or visual elements without losing your human-readable code
  • Making it easier to navigate plugin files by giving them human-readable names
  • Unlocking effortless treeshaking, which enables plugins to use ES6 modules while speeding up some SSAs by almost an order of magnitude

How to use the Bask VS Code extension for Bubble plugins

It’s simple to get started using Bask:

  1. Tap Install from the Bask VS Code Marketplace page or search the phrase “Bask” within VS Code’s Extensions tab.
  2. Then run the Bask Pull command to pull your first plugin into VS Code. New users will be prompted to enter an API key, which can be purchased here (they offer a 14-day free trial).
  3. Once you’re registered, Bask will ask you to enter your Bubble credentials, which are securely stored on your device to carry out all of Bask's core functions. 
  4. You’re all set to start using Bask! Just edit your plugin in VS Code, save its files, and watch your plugin update in your linked Bubble test.

You can learn more about Bask in their official documentation and install the VS Code extension here.

Start building with a free account

Build your app on Bubble's Free plan. No need to upgrade until you're ready to launch your app.

Join Bubble

LATEST STORIES

blog-thumbnail

Bubble vs. Retool: Comparing the Top No-Code Platforms

Retool is a low-code tool for developers looking to build internal apps and frontend interfaces. Bubble’s no-code platform has been used to build and scale more than 4 million applications, from startups to enterprise apps. Here’s how the two platforms compare.

Bubble
February 04, 2025 • 26 minute read
blog-thumbnail

Bubble vs. Jotform: Comparing the Top No-Code Platforms

Jotform Apps is a no-code app builder based on the forms-builder Jotform is known for. Bubble is a flexible no-code builder that allows you to build any kind of app or website. Here’s how the two stack up.

Bubble
February 03, 2025 • 25 minute read
blog-thumbnail

Bubble vs. WordPress: Comparing the Top No-Code Platforms

Bubble and WordPress are both no-code builders with customizable options. WordPress is suited more toward websites, while Bubble focuses on web apps and mobile apps.

Bubble
February 03, 2025 • 28 minute read
blog-thumbnail

Bubble vs. Power Apps: Comparing the Top No-Code Platforms

Power Apps is a low-code development tool for building business apps within the Microsoft ecosystem. Bubble is a no-code development platform for building all kinds of web and mobile apps. Here’s how the two platforms compare.

Bubble
January 31, 2025 • 26 minute read

How You Can Automate Web App Testing with No-Code Using Preflight and Bubble

January 18, 2022 • 3 minute read

Bubble + Zapier: Connect Everything Together With No-Code

March 02, 2021 • 2 minute read

Bubble’s No-Code Slack Integration

September 01, 2020 • 2 minute read

Bubble + Figma Integration: Design and Deploy Your Web App Without Code

July 31, 2020 • 2 minute read

Build the next big thing with Bubble

Start building for free