VyroAI

Loading...

Web App Studio

Real web apps with pages, accounts and data — dashboards, shops, booking systems.

What it builds

A Web App is a real application with more than one page: people sign in, data is stored, and pages change depending on who is looking at them. It is a separate project type from a Game, which is a single self-contained file for the Arcade.

If what you are describing has accounts, a database or a checkout, it belongs here.

Starting one

Pick Web App when you create a project. The wizard then asks what kind of app you want:

If none of those is quite it, describe your own — the four are shortcuts, not a menu you must pick from.

Examples that come with it

The wizard carries worked examples you can start from and change: a server dashboard, a web shop with checkout and receipts, a booking system with a calendar, a community forum with moderation, a support desk with tickets, a link-in-bio page, and a team wiki with shared editing and search. Each one is a full description rather than a skeleton, so the AI builds it for your case instead of pasting the same files for everybody.

Separately from those, there is a shelf of ready-made templates with a room of its own — see The Template Shelf.

The Motion step — how the page opens

The new-project wizard for a web app has one step no other project type gets: Motion. It is the second step, straight after Basics and before you describe the site, because how the page opens changes what the rest of the wizard plans for. The full order is Basics → Motion → Describe → Questions → Optimise → Plan. It asks How should the page open? and shows three cards:

Beside Low cost and Higher cost the card gives the price in credits for the number of chapters planned. While a price is not known yet it reads the exact price is shown before you start instead. Opening the step and picking a card cost nothing. Credits are only taken when you press a button that draws pictures or makes clips, and Continue never waits on this step.

Pick a cinematic card and the step shows your Kit as chips: tap one to put its tag in your description. The kit cards and the Frames board, where you plan the chapters, draw the pictures and approve them one by one, sit on the Plan step behind Plan the chapters. A Cinematic Website Opening walks through it and says exactly when credits are taken.

If the clip model box stays on "Loading models…"

In Cinematic video, the row Clips between the pictures has a box for the video model. If that box stays on Loading models…, there is no model to film with, and the Make the … clips button stays greyed out. The pictures you already drew were still charged. Cinematic pictures needs no video model, so it is the safe route.

Seeing it as you build

In a web app project the running app is the main panel — not a strip beside the code. It fills the screen, refreshes as files change, and you click through your pages in it as a visitor would.

The code has not gone anywhere: three tabs sit in that panel's own toolbar — Preview, Code and Changes — and you switch between them. Changes carries a count of the files the last run touched, and shows you the green-and-red view of exactly what moved. Chat stays where it always is, so you can ask for a change and watch it appear.

The toolbar tells you the truth about the build in one pill — Live · built in 1,4s, Building…, Build failed, Crashed while running, or Built, but the page is blank — and a Desktop / Phone toggle squeezes the preview to phone width so you see what a visitor's phone sees. Beside it is the way into the visual editor: on a computer it is Customize, which opens a sidebar down the left; on a phone it is a plain Edit toggle, because a 300px sidebar is the phone. See The Visual Editor. Putting the app on the internet is Publishing a Web App.

When the page comes up blank

A build that errors, or a page that renders nothing, gets a diagnosis card at the bottom of the preview rather than a silent white screen. It names the likely culprit — your code, our builder, or a missing file — shows the error with the file and line when it knows them, and carries two buttons: Fix it for me, which hands the crash to the chat, and Send screenshot to chat, which attaches the picture instead.

When the culprit is the builder, the card says so in amber — that one is our fault, not yours.

The tool itself is in Early access — in VyroAI that word decides who can open it, not just how polished it is. Early access means staff and hand-granted testers only. So if Web App is not in your studio list, nothing is wrong with your account and there is nothing to buy or switch on: the tool has not been opened to everyone yet. Finding Your Way Around explains why two people can see different studios.

When you do have it: the generator is real and the preview works, but expect to iterate more than you would on a plugin — describe one screen at a time rather than asking for the whole product in one prompt.

Everything in Plans, Questions and the Task Queue, Project Memory and Version History applies here too. A web app is an ordinary VyroAI project; only the type and the preview differ.

Where to next

Also linked from this page: Finding Your Way Around — why an Early access studio can be missing from your sidebar

5 of 37 in Code Studio (IDE) · Last checked 23 September 2026 · Previous: Editor & Themes