The Canvas workspace
Once an AppWeb is open in Studio, Canvas is your workbench: the Copilot chat on one side, and tabs to see the app, code, data, and what the agent is doing on the other.
This guide complements the Quick Start Guide (create → publish). Here we go deeper into each workspace surface for day-to-day use.
Canvas anatomy
The typical layout has two zones:
- Copilot panel: type, dictate, or attach; choose Ask, Plan, or Agent mode.
- Workspace area: Preview, Código (Code), Datos (Data), and Proceso (Process) tabs.
The bar also has Publicar / Live, Conectar Flow, Galería Hub, the resource catalog, and the ⋮ menu (pause, build, undo, etc.).
Preview
The live, navigable app. As Copilot builds or iterates, the preview updates. Use it to check screens, forms, and real look-and-feel before you publish.
- Visual selector (cursor icon): click to point, double-click to edit text, right-click image/background for media.
- Navigation: walk the app routes like an end user would.
Guide: Hub Gallery & right-click media
Code
Shows the generated files for the current version. Useful to review what the agent touched. You don’t hand-edit the source — you ask Copilot, and a new version is created.
Data
Operational view of what your app stores. Hub prepares the database (Supabase) from the data contract; lists appear when you ask for them in chat.
Inside Datos there are three sub-views:
Records
Your app’s lists. Search, create, edit, or delete rows for sample or production data depending on app state.
Data map
Visual schema of lists and fields. The AI manages the schema via chat; here you understand it without SQL.
Files
Runtime files (photos, PDFs…). If something is missing, ask Copilot or upload via Hub Gallery.
Tip: @datos in chat
When you’re on the Data tab (or you type @datos), Copilot gets richer data-plane context to refine lists, fields, or sample seeds.
Process
Activity feed for the current turn: what the agent is doing, which step it’s on, and any notices. Handy when the preview feels slow. It’s not a flow editor — it’s the open “black box” of Copilot.
Versions
In Hub, versions are immutable: every change applied with Agent creates a new version (vN → vN+1). You never hand-edit an existing version’s source.
- Undo turn: from chat or the ⋮ menu (Deshacer último cambio) you can revert recent work without patching an old version.
- Publish / Live: the public URL points at the production version. After iterating in Canvas, use Live to republish.
- Compilar y validar: in the ⋮ menu, builds a preview dist; it does not by itself activate the public
/a/URL.
If Preview fails
When there’s a preview incident, Hub shows a briefing with a failure summary. The usual flow:
- Open the Proceso tab to see where the agent stopped.
- Review the preview briefing (message + failed checks).
- If the failure is in the app, click Enviar a Copilot (Agent mode) to attempt a repair.
- If the failure is in the Hub engine, the briefing invites you to Enviar a Hub (Ops / Errors).
You can also describe the symptom in chat (“contact page won’t load”, “form doesn’t submit”) in Agent mode. A concrete message + an Adjuntar screenshot speeds up the fix.
Copilot tools
Chat is the main way to change the app. Three modes:
- Ask: research and define; does not apply changes.
- Plan: proposes a structured plan; launch Build when you’re happy.
- Agent: applies changes in the live workspace.
Attach
Screenshots, PDFs, or visual references. Great for “make it like this image”.
Microphone
Dictate the brief or the change. Speaking is as natural as typing.
Examples of good messages
Ask for concrete changes. A clear message is usually enough; a screenshot helps even more.
Hub Gallery
Media library (images, video, PDF). Upload or generate with AI. To change a photo on the web: Visual selector → right-click the media → Gallery / upload / regenerate.
Resources and capabilities
Maps, Stripe, LLMs, AI images… are requested in the Copilot message. You can also open the resource catalog from the Canvas bar (+).
Mis AppWeb (projects)
Mis AppWeb is the Studio home: your project list. From there you create, open, and manage apps before entering Canvas.
- Nueva AppWeb / Crear AppWeb Canvas: starts an empty project with Copilot ready.
- Continuar: returns to the last opened project.
- Per card: open, rename, duplicate, send a copy to another Hub user, or delete.
Guide: Send a copy (vs duplicate and public URL)
On mobile
On narrow screens, Canvas switches surfaces: Copilot chat or the active view (Preview, Code, Data, Process). Use the top bar to switch and the ⋮ menu for the rest.
Day-to-day costs
Copilot (Ask, Plan, Agent) and AI resources in your published app debit the same Hub AI Credit. Your plan includes balance; you can top up 1:1. If it runs out, the app stays online and only AI pauses.
Guide: Hub AI Credit Models and credit
Publish, Live, and Flow
Publicar sets the public URL. Once live, the button becomes Live to open or republish. Conectar Flow links a conversational assistant (WhatsApp, Telegram, etc.) to your AppWeb.