vault backup: 2026-06-05 19:31:28

note/wix/Coding in Wix.md

@@ -0,0 +1,68 @@
+---
+category: Development
+technologies:
+  - Velo (JavaScript)
+  - Wix Studio
+  - Wix Blocks
+  - Wix Headless (SDK)
+  - Wix CLI
+supported_languages:
+  - JavaScript (ES2024+)
+  - TypeScript (Headless/Local)
+  - CSS (Wix Studio)
+ide_integrations:
+  - Wix IDE (Browser-based VS Code)
+  - Desktop VS Code (via GitHub/Wix CLI)
+  - Cursor / AI Editors (via Wix Skills)
+backend_features:
+  - .jsw Web Modules
+  - HTTP Functions
+  - Job Scheduler
+  - Data Hooks
+---
+
+# Coding in Wix (2026 Guide)
+
+Wix provides a tiered development experience ranging from low-code visual scripting to full-stack headless applications.
+
+## 🛠️ Development Environments
+
+### 1. Wix Studio (The Standard)
+The flagship environment for professional designers and developers.
+- **Dev Mode:** Enables the built-in IDE and Velo engine.
+- **GitHub Sync:** Best-practice workflow. Sync your site to a repo to use **Local VS Code**.
+- **Wix IDE:** A full VS Code experience running in your browser, no setup required.
+
+### 2. Wix Blocks
+A dedicated builder for creating **reusable widgets and apps**.
+- Define properties, methods, and events for your components.
+- Install your "blocks" across multiple sites or the Wix App Market.
+
+### 3. Wix Headless
+For total control over the frontend (React, Next.js, Astro, etc.).
+- **Wix SDK:** High-level JS/TS library to access Wix business logic (Auth, Cart, CMS).
+- **CLI-First:** Use `npm create @wix/new` to scaffold projects.
+
+## 💻 Technical Capabilities
+
+### Full-Stack JavaScript (Velo)
+- **Frontend:** Manipulate UI elements using the `$w` API (e.g., `$w('#button').onClick(...)`).
+- **Backend:** Write server-side code in `.js` or `.jsw` files.
+- **Secrets Manager:** Securely store API keys and credentials.
+- **npm Integration:** Install any public npm package for use in your backend logic.
+
+### Data & Automation
+- **CMS / Data Collections:** Query and modify structured data using `wix-data`.
+- **Hooks:** Run code automatically before/after database operations.
+- **HTTP Functions:** Create your own REST API endpoints on Wix (`site.com/_functions/myApi`).
+- **Scheduled Jobs:** Run background tasks at specific intervals.
+
+## 🤖 AI-Assisted Coding (2026)
+- **Wix Aria:** AI agent that can write component logic and troubleshoot errors within the IDE.
+- **Wix Skills:** Context-aware instructions you can feed into AI editors like **Cursor** to make them experts in your specific Wix project.
+- **MCP Server Support:** Allows AI tools to directly interface with your Wix site's data schema and backend functions.
+
+## 🚀 Getting Started locally
+1. **Install the CLI:** `npm install -g @wix/cli`
+2. **Login:** `wix login`
+3. **Pull Project:** `wix pull` (Requires GitHub integration enabled in Wix Studio)