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. To enable this, Wix Vibe includes a Code tab. Using the Code tab, you can examine your project's code, identify errors or desired improvements, and then prompt the Wix Vibe agent to implement changes. This allows you to troubleshoot problems that might be difficult to describe through regular conversation with the Wix Vibe agent and implement complex custom functionality.
File structure
Wix Vibe projects are built using Astro, a web development framework that enables fast, content-focused websites. The UI components provided by Wix Vibe are written in React. This allows you to combine Astro's performance benefits with React's component ecosystem.
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 Wix CLI for Headless.
Code tab features
The Code tab in Wix Vibe provides a development environment with several IDE-like features designed to help you work effectively with your project's code.
Code viewing and navigation
- Complete file access: View all generated code files including environment definitions, and the full Astro project structure.
- Intelligent navigation: Use
Control+click(orCommand+clickon macOS) on function names to jump directly to function definitions. - Context-aware display: When viewing site pages in the Site tab, switching to the Code tab automatically displays the corresponding Astro page file.
Code quality tools
- Built-in linter: Automatic code analysis identifies potential issues and suggests improvements.
- Dark mode support: Improved readability for extended coding sessions.
Interactive assistance
The Code tab includes a floating chat that you can access by highlighting code or right-clicking anywhere in a code file.
The floating chat functionality allows you to:
- Request fixes: Ask for specific code modifications or bug fixes directly within the code context.
- Get explanations: Understand complex generated code through conversational queries.
All interactions through the floating chat integrate with the main Wix Vibe agent conversation, maintaining context across the entire project.