diff --git a/note/wix/Coding in Wix.md b/note/wix/Coding in Wix.md new file mode 100644 index 0000000..2fdf4e6 --- /dev/null +++ b/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)