Tiny demo: Pled CLI tool for plugin development

Plugin builders
1

(My imaginary friend Claude and) I need to do a lot of plugin development, so I developed a bare-bones tool to pull ↔ push directly from the command line.

  • decode: the Bubble JSON into a local file structure into src/ for easy navigation
  • encode: changes back into the Bubble JSON and pushes it Bubble - dist/plugin.json
  • watch: watches the directory for changes and automatically encodes and pushes it to Bubble
  • each plugin can live in their own directory and be independent from other plugins.
  • allows me to use git locally

It’s now open source (or at least source available):

If you’re brave enough, download the binaries and try them out.

11 Likes
2

That’s pretty darn cool. How are you sending the JSON to Bubble? Are you using API keys? I’m intrigued because you’re making changes to the plugin code without ever touching bubble. Nice!

3

Just good ol’ cookies.
You have to grab your cookies manually and set them as an env variables.

FYI: To get only the keys that matter in this case, I created a little Raycast snippet to extract it

import { showHUD, Clipboard } from "@raycast/api";

export default async function main() {
  const clipboardContent = await Clipboard.readText();

  if (!clipboardContent) {
    await showHUD("No text found in clipboard");
    return;
  }

  const targetKeys = ["meta_live_u2main", "meta_live_u2main.sig", "meta_u1main"];

  // Parse the cookie string
  const cookiePairs = clipboardContent.split(";").map((pair) => pair.trim());
  const extractedPairs: string[] = [];

  // Extract matching key-value pairs
  for (const pair of cookiePairs) {
    const [key] = pair.split("=");
    if (key && targetKeys.includes(key.trim())) {
      extractedPairs.push(pair);
    }
  }

  if (extractedPairs.length === 0) {
    console.log("No matching cookie values found");
    await showHUD("No matching cookie values found");
    return;
  }

  // Join the extracted pairs with semicolons
  const result = extractedPairs.join("; ") + ";";

  console.log("bubble cookies are", result);
  // await Clipboard.copy(now.toLocaleDateString());
  await Clipboard.copy(result);
  await showHUD("Copied date to clipboard");
}
3 Likes
4

Just made an update to a plugin using Pled. Wow, editing plugins is fun again.

My imaginary friend Claude understood the assignment; he added a new field without touching the visual editor (I can’t wait to FutureMe to regret this decision…):

CleanShot 2025-07-18 at 06.37.27@2x
CleanShot 2025-07-18 at 06.37.27@2x2556×1274 270 KB

2 Likes
5
  • breaks out each element’s actions into their own js file
  • you can add extra actions by hand
2 Likes
6

Amazing Rico. :sports_medal::sports_medal::sports_medal::sports_medal:

1 Like
7

Great stuff!

1 Like
8

Made the repo publicly available.

If you’re brave enough, download the binaries and try them out.

4 Likes
9

v0.0.2 coming up, you can now reorder and rename element fields.

1 Like
10

Hmm… somehow it’s nuking the node modules for server-side actions. I need to figure out what’s happening there.

11

Fixed: now it won’t break your node packages.

12

@rico.trevisan this is awesome!

When adding custom fields through json and their unique IDs (e.g. Aah) - how did you get around breaking Bubble’s system when merging back into the plugin editor?

13

Apparently those keys are more like an index.

CleanShot 2025-07-26 at 21.22.57@2x
CleanShot 2025-07-26 at 21.22.57@2x2126×1226 393 KB

My Tiptap plugin has some manually created keys and I’ve never had any issues with it.

2 Likes
14

Ok thanks! I remember editing these in another plugin and breaking the GitHub sync - but I must have done something else.

1 Like
15

v0.0.5 - file upload

You can now upload files directly from the command line.

16

How do I join the cool kids Slack?

17

Pled v0.0.8-beta - file watcher :magnifying_glass_tilted_left:

It now watches for file changes and automatically pushes

1 Like
18

Thats damn cool. So by looking to the git, I understand you reverse engineered the bubble api to do that? Do you aslo update the files in Github synced repo or something?

Regarding the adding new custom fields or removing using the Github sync, I tried that and it broke the plugin editor UI - when trying to add fields there, it started to have very weird behavior.

19

Working on a command to initialize the directory pled init. You can even run pled init –react to have it add a couple of lines for a react-based plugin.

20

Thanks!

No, not touching

Yeah, I’m a bit iffy on this functionality. I just use the plugin editor to actually generate the code. One day I will badger @josh to help me create that functionality, but not just yet.

I’m that I could add something like


pled create element --name="My awesome element" --type=visual ...

or simply an interactive one


$ pled create
? What type of item would you like to create? (Use arrow keys)
❯ action (a)
  element (e)
  
? Enter element name: My awesome element
? Select element type: 
❯ visual
  data
  
✓ Element "My awesome element" created successfully!