About the Wix Vibe Code Tab
Wix Vibe is an AI-powered platform that enables you to create websites from scratch using conversational prompts. Under the hood, Wix Vibe creates a Wix headless project and a frontend interface that's also hosted by Wix.
When working with Wix Vibe, you may want to interact directly with your project's code. The Code tab provides a VS Code Web-based development environment where you can edit code directly.
Note: Safari users see a different code editor interface with limited functionality.
File structure
Wix Vibe projects are built using Astro, a web development framework optimized for performance. The UI components provided by Wix Vibe are written in React.
Extensions folder
Your Wix Vibe project may also include an extensions folder. This folder hosts the code for any Wix app extensions included in your project. App extensions allow you to extend dashboard and backend functionality. For example, you can add custom dashboard pages or implement backend logic to handle events.
Note: The supported extension types for Wix Vibe are the same as those supported by the CLI for Headless.
IDE features
The Code tab provides a development environment based on VS Code Web, including many standard features like syntax highlighting, code navigation, and multi-file editing.
Your code changes are automatically saved every few seconds.
Note: VS Code extensions aren't persistent, and you'll need to reinstall them each time you open the Code tab.
npm packages
You can't install npm packages directly from the Wix Vibe editor. To add npm packages to a Wix Vibe site, set up GitHub integration. Then, install the packages locally and push the changes.
AI assistance
Wix Vibe includes an AI agent that lets you request code changes, ask questions, and get explanations. The AI agent can edit the site's code directly.
In the Code tab, you can highlight code and click Ask AI Assistant to add it as context to the AI agent. This allows you to ask questions or request changes about specific code sections.
GitHub integration
From the Code tab, you can connect a Wix Vibe project to a dedicated GitHub repository. This enables version control, collaboration, and the flexibility to work in any external IDE. Learn more about Wix Vibe GitHub integration.