Loading tutorials…
Loading tutorials…
Wix Velo is Wix's full-stack development platform — JavaScript, databases, APIs, all integrated. It's the answer to 'can I do X custom thing on Wix?' Yes — but the learning curve is real.
Who this is forWix site owners who hit the limits of standard Wix and need custom logic: dynamic pricing, custom forms, third-party API integrations, member-specific content, custom search. Especially relevant if migrating off Wix isn't an option.
What you'll need
Step 1
Editor → Dev Mode → Enable. This unlocks the Velo IDE alongside the visual editor. Velo runs JavaScript on Wix's platform.
Wix Editor → top menu → 'Dev Mode' → 'Turn on Dev Mode.'
The IDE appears as a panel: Page Code (per-page JavaScript), Site Code (global), Backend Code (server-side), Public (shared JS modules), and Database (Wix Data collections).
Velo runs JavaScript (ES6+). Backend code uses Node.js. Database is built on top of MongoDB.
Key files to know: $w (the Wix API for page elements), wix-data (database queries), wix-fetch (HTTP requests), wix-members (member system).
Documentation is at dev.wix.com/docs/velo. Examples are real and usually work — start there, not random Stack Overflow.
Step 2
Add a simple feature: e.g., a dropdown that filters a repeater. Common starting use case.
On any page: add a Dropdown element + a Repeater (collection of cards).
In Dev Mode → Page Code → write: `$w.onReady(function () { $w('#dropdown1').onChange((event) => { /* filter logic */ }); });`
Connect the repeater to a Wix Data collection (Site → Database → Add Collection → fields + data).
On dropdown change, query the database with the selected filter: `wix-data.query('Products').eq('category', event.target.value).find().then(result => $w('#repeater1').data = result.items);`
Test in Editor's Preview mode. If it works, publish.
This 30-line snippet is a fully functional product filter — the kind of feature that costs $200+ on Shopify apps.
Step 3
Velo can call external APIs via wix-fetch. Common use: fetch weather, post to webhook, sync data with HubSpot/Stripe/etc.
Backend Code → New File → backend/external-api.jsw (web-module).
Example: fetch weather for a 'today's forecast' widget. Import wix-fetch + use environment variables for the API key.
Code: ``` import {fetch} from 'wix-fetch'; export async function getWeather(city) { const apiKey = 'YOUR_KEY'; const response = await fetch(`https://api.weather.com/v3/wx/conditions/current?location=${city}&apiKey=${apiKey}`); const data = await response.json(); return data; } ```
Frontend Page Code calls backend: `import { getWeather } from 'backend/external-api'; getWeather('Austin').then(data => $w('#temperatureText').text = data.temp);`
Why backend? Hide API keys, handle CORS, server-side compute.
Secrets management: Site → Secrets Manager → store API keys. Reference via `wix-secrets-backend.getSecret('weather_api_key')`. Never hardcode keys in code.
Step 4
Wix's native form is fine for basic use. For custom validation, conditional logic, or save-to-database, use Velo.
Add form fields (Text, Email, Dropdown, etc.) via Editor.
Page Code: `$w('#submitButton').onClick(() => { /* validate + save logic */ });`
Custom validation: check each field, show inline errors. `if (!$w('#emailField').value.includes('@')) { $w('#emailError').text = 'Invalid email'; $w('#emailError').show(); return; }`
Save to Wix Data: `wix-data.insert('SubmittedForms', { name, email, message, timestamp: new Date() }).then(() => { /* success */ }).catch(err => { /* error */ });`
Conditional logic: 'If user picks Service A, show extra fields; if Service B, hide them.' Use $w('#field').show()/.hide() based on Dropdown change.
Post-submit: redirect to thank-you page, trigger an email via Wix Triggered Emails, or send to webhook (Slack, Make, etc.) via wix-fetch.
Step 5
Velo + Wix Members lets you show different content to different members based on permissions, plan, or custom fields.
Site → Members. Configure member roles + custom fields.
Page Code: `import {currentMember} from 'wix-members'; currentMember.getMember().then(member => { if (member.loggedIn) { $w('#welcomeText').text = 'Welcome, ' + member.profile.nickname; } });`
Gate content per plan: check member's pricing plan via wix-pricing-plans, show/hide elements accordingly.
Build a member dashboard: display their orders, bookings, posts. Query Wix Data filtered by `userId`.
Auth flows: redirect non-members to login page if they hit a protected route. Use `wix-location.to('/login')` if not member.loggedIn.
Step 6
Wix doesn't have a real staging environment. Workaround: use Preview mode + careful versioning.
Preview mode: Editor → Preview button. Shows what visitors see with your latest code (not yet published).
Test edge cases in Preview: empty database, slow API responses, error states, mobile.
Version: Wix auto-saves drafts. Major changes: copy the page code to a backup file before publishing (so you can revert).
Publish: only when confident. Click 'Publish' in Editor. Live within 1-2 minutes.
Post-publish: monitor for 24-48 hours. Wix has a Logs viewer (Editor → Dev Mode → Logs) for backend errors. Watch for spikes.
If something breaks: revert via Site History (Editor → Settings → Site History → restore previous version).
Step 7
Velo code lives in the Wix Editor. Document what each piece does, who owns it, and how to extend.
Velo code in Editor is searchable but not git-tracked. Workaround: copy major code blocks to a local repo with explanatory comments.
Document in a wiki: 'Page X has Velo code that filters products by category. Backend file Y syncs orders to Stripe. Member dashboard reads from collection Z.'
Naming: use clear element IDs ($w('#categoryDropdown') not $w('#dropdown1')). Future-you debugging will thank present-you.
Avoid dead code: when a feature is removed from the site, remove its Velo code too. Otherwise it executes silently and may break.
Quarterly review: which Velo features still work, which broke after a Wix platform update, which to refactor or remove.
Common mistakes
Starting Velo without JavaScript experience
What goes wrong: 20-40 hours of learning curve before shipping anything useful. Common bugs: undefined references, async/await confusion, $w API misuse. Frustration leads to abandonment of features that would have shipped in 2-3 days with a developer.
How to avoid: Either invest in 20-40 hours of JS learning OR hire a Velo developer for first 2-3 projects. Learn by watching what they ship.
API keys in frontend code
What goes wrong: Anyone viewing page source can steal your API keys. Costs: $100-10K depending on the API and bad actor. Common with weather APIs, OpenAI keys, payment processor keys.
How to avoid: Always use Backend Code + Secrets Manager for API keys. Never put keys in Page Code or Site Code that browsers can read.
No error handling
What goes wrong: API call fails, database query times out, member.getMember() fails — and your page silently breaks. Customers see blank cards, broken forms, missing text. Hard to debug because nothing 'errored' visibly.
How to avoid: Wrap every async operation in try/catch. Show user-friendly error messages. Log to Wix Logs viewer for debugging.
Querying database in loops (performance disaster)
What goes wrong: Repeater with 50 items, each item makes its own database query → 50 queries on page load → 5-10 second page load time → bounce rate spikes.
How to avoid: Query once for all items. Use wix-data.query().limit(50) to get all data in one call. Bind repeater to the result.
No backup before major Velo changes
What goes wrong: Edit Page Code, break something, can't remember what changed. Restore from history is possible but loses your in-progress work too.
How to avoid: Before major changes: Site → Site History → save a checkpoint. Or copy code to a local file as backup. Then iterate.
Coding in Page Code when it should be Backend
What goes wrong: Logic in Page Code is exposed to browsers — anyone can inspect, anyone can read. Security-sensitive operations (checking permissions, validating input, calling secure APIs) belong in Backend Code.
How to avoid: Anything involving secrets, permissions, or external API calls → Backend Code. Page Code only for UI interactions.
Recap
Done — what's next
How to set up a Wix site from scratch
Read the next tutorial
Hand it off
Velo is powerful but requires real JavaScript skill. For complex projects (custom forms, third-party API integrations, member dashboards), a Velo developer at $14-16/hr ships in days what would take weeks of DIY learning. Typical project: $300-800 total. Cheaper than the hours you'd spend learning.
See specialist rates
Yes, at least basic JS. Velo is a real development platform — JavaScript syntax, async/await, ES6 features. If you don't know JS, expect 20-40 hours of learning before shipping anything production-ready. Or hire a Velo developer.
Custom forms with conditional logic + validation, dynamic content based on member data, third-party API integrations (HubSpot, Stripe, OpenAI, custom backends), custom search and filtering, custom database-driven pages. Anything you'd need a full-stack developer for.
Included in all paid Wix plans. Business plan recommended for serious Velo work (more storage, more bandwidth, better support). No per-line or per-API-call fees from Wix.
Limited. Wix allows specific npm packages in Backend Code (e.g., axios, lodash, moment). Check Wix's allowed-packages list. For Page Code, you're limited to Wix's APIs.
Wix doesn't have native git integration. Workaround: copy major code blocks to a local git repo with comments. For team projects, this is essential. Wix's Site History gives you point-in-time restore but isn't git.
Wix
Wix promises 'AI builds your site in 30 minutes.' True — and the result is a 30-minute site. The brands that actually rank and convert on Wix invest 5-7 hours getting the basics right, not 30 minutes letting AI guess.
Wix
Wix Stores is the right call for small DTC brands under 20 SKUs and budget under $50/mo. Beyond that, Shopify is the better choice. Here's the setup that works inside Wix's lane.
Wix
Wix Bookings is the integrated alternative to Acuity/Calendly. For service businesses on Wix, it's the right call — no extra subscription, native integration with member accounts and payments. Here's the configuration that actually works.
Wix
Wix's promise is 'anyone can build a site.' True. The harder questions: anyone can build a site that ranks, converts, and integrates with their stack? Those gaps are where specialists earn their fee.