mirror of
https://github.com/Rainyy21/framework_note.git
synced 2026-10-10 23:40:30 -04:00
Rainyy21
69 lines
2.7 KiB
Markdown
69 lines
2.7 KiB
Markdown
---
|
|
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)
|