How to code a Wix Studio Two site with Aria

4 days ago

4 min read

Updated: 2 days ago

Open the Code tab in the Studio Two editor, start Aria, and describe one feature in plain English. Aria generates the extensions and code. You then review the result, check it with Preview, and use Publish to send it to the live site.

Status: The Studio Two editor was released in November 2026. The Code tab does not open in some browsers, including some versions of Safari, and the editor tells you when to switch.

accessing the code panel in studio two, — Image: Wix Help Center, “Studio Two Editor: Using Aria to Code Your Site”

Before you start

A site in the Studio Two editor, not the classic Studio editor.
A browser that supports the Code tab. Some Safari versions do not.
Optional: a test site, so you can try changes away from the live site.
Basic familiarity with TypeScript, JavaScript and npm if you plan to review or edit the generated code.

Step by step

Open the Code tab. In the editor, switch from the Design tab to the Code tab in the top bar. It runs Visual Studio Code in the browser with your site project already loaded, so nothing needs installing locally.
Start the coding environment. On first use, click Start Coding on the welcome screen. Wix prepares the environment, which takes about a minute. The environment also starts when you create an extension, click Go to Code on a selected element, or open a file from a code error.
Open Aria. Click Ask AI in the Code tab, or use the Aria icon at the bottom of the editor's left edge. The Aria panel stays open beside the Code tab while you work.
Describe one feature. State what it should look like, where it appears and which data it uses. Keep each request to a single feature and add the next one when the first is done. Aria can build Editor React Components, page behavior, CMS connections, backend logic and business extensions.
Use a section as context. If your request concerns one part of the page, put that section in context for Aria. You can then start from a suggestion such as Improve this section or Suggest better layout, or write your own prompt.
Review what Aria generated. Open the files in Explorer. Extensions sit under src/extensions/ in site, dashboard and backend folders, each with a .extension.ts manifest. Aria can be wrong, so read the code before relying on it. For a selected component, check its bindings in the Inspector panel.
Edit or extend by hand. Change any generated file directly in the editor. Add new extensions through the Wix Extension Builder panel. Install npm packages from the Terminal in the bottom panel, which you can toggle with Control+J or Command+J on macOS.
Connect collections if needed. The Wix Data panel lists your CMS collections. Ask Aria to bind a component to one, or write the connection yourself with the @wix/data package. This panel is separate from Connect to Data on the Design tab.
Preview the result. Click Preview to run the site in a test environment. The live site stays unchanged.
Publish the changes. Click Publish when the feature behaves as expected. Preview and Publish remain in the editor header while the Code tab is open.
Debug with Aria and the logs. Describe the problem to Aria, ask for the likely cause, then ask for a fix or for instructions to apply yourself. If that fails, read the Problems panel for errors, and check Wix Logs in Developer Tools for backend errors.

start coding with studio two, — Image: Wix Help Center, “Studio Two Editor: Using Aria to Code Your Site”

Good to know

Aria writes code only when the editor cannot already do what you asked. Where it can, for example connecting an element to an existing CMS collection or Data Source, Aria sets that up instead.
The project folder is always named user-code, and edits save to the site as you work.
The WIX LOGS panel in the Code tab shows development environment output. Logs under Developer Tools show messages from your site code while it runs. They are separate.
Wix Code uses Git. The Source Control panel shows the change history and lets you revert to an earlier version if a publish breaks the site.
The project is built on the Astro framework and has access to the @wix/* SDK packages.

parnii note

Aria's output can be wrong, so we read the generated extension files and check the Preview before every Publish. For larger changes, try them on a test site first.

FAQ

Can I edit the code Aria writes in Studio Two?

Yes. The Code tab is a browser-based Visual Studio Code, so you can open and edit any file Aria created. The project uses TypeScript and JavaScript and gives you the @wix/* SDK packages.