# Bubble Io Plugins > Bubble.io plugin development rules, API reference, and coding standards. Use when working on any task in this repo: writing, reviewing, refactoring, or creating initialize.js, update.js, preview.js, header.html, element actions, client-side actions, server-side actions (SSA), Plugin API v4 async/await code, JSDoc, setup files, README, CHANGELOG, marketplace descriptions, or field tooltips. Also use for security audits, code review, debugging, and publishing plugins. Covers instance/properties/context objects, BubbleThing/BubbleList interfaces, data loading suspension, DOM/canvas rules, element vs shared headers, exposed states, event handling, ESLint standards, and Bubble hard limits. - Skill: `jsgforever/bubble-io-plugins` (Agent Skill, multi-file: 12 files) - Install (CLI): `npx skillmds@latest add jsgforever/bubble-io-plugins` - Raw SKILL.md: https://api.skillmd.com/api/skills/jsgforever/bubble-io-plugins/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: jsgforever (https://skillmd.com/u/jsgforever) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jsgforever/bubble-io-plugins --- # Bubble.io Plugin Development — Project Rules ## Project identity This is a **Bubble.io plugin development boilerplate**. It provides the folder structure, coding conventions, and tooling for building plugins that run inside the Bubble.io no-code platform. Plugins are deployed by **copying code into the Bubble Plugin Editor** — no build step, no npm publish. ## Project structure ``` project-root/ actions/ client/ # Client-side workflow actions / action-setup.md client.js params.json # Optional: parameter definitions server/ # Server-side actions (runs on Bubble's Node.js server) / action-setup.md server.js elements/ # Visual plugin elements / element-setup.md initialize.js # Runs once on element load update.js # Runs on every property change + data load preview.js # Renders placeholder in Bubble Editor header.html # content: CDN links, external scripts actions/ # Element-specific workflow actions .js eslint.config.mjs # ESLint flat config package.json # ESLint scripts and dependencies README.md ``` ### Key architectural fact Each local file maps 1:1 to a text field in the Bubble Plugin Editor: | Local file | Bubble Editor field | |---|---| | `initialize.js` | Function: initialize | | `update.js` | Function: update | | `preview.js` | Function: preview | | `header.html` | Element Header | | `actions/.js` | Element Action code | | `server//server.js` | Server-Side Action code | | `styles.css` | Shared/Element Header (wrap in `