How to use W2G Builder

How to use Watch2Gether
1

W2G Builder: UI & Feature Overview

(Beta)

W2G Builder is a browser-based IDE for creating WebXDC apps for Watch2Gether — games, tools, anything that runs live and synced for everyone in a room. Describe what you want in plain language and an AI assistant writes real, editable files for you, or open the file tree and write the code yourself. This post walks through the interface end to end, including how to hook up your own local tooling instead of staying in the browser.

Find it at builder.w2g.tv.

The project picker

When you land on the builder, you get:

  • + New project — start a blank project.
  • Open existing folder… — reconnect a project you’ve previously linked to a folder on your computer (see “Connect to local folder” below).
  • Import .xdc package… — load an existing WebXDC .xdc file to keep editing it.

Existing projects are listed with their name and last-modified date; click one to open it, or delete it from the picker.

Tour of the IDE

Once a project is open you get a three-pane layout: a sidebar on the left, the main panel in the middle (chat or file editor), and a live preview on the right.

Top bar

  • Back arrow — returns to the project picker.
  • Project name.
  • Feedback — a quick link to send feedback about the builder while it’s in beta.
  • Publish — opens the publish dialog (see below).

Sidebar

Two views, switched with the icons on the left:

  • AI Chat (default)
  • Files

AI Chat panel

Describe what you want to build or change in plain language — any language works, we see plenty of Spanish, English, and others in real use. The assistant writes and edits real project files directly (you can watch them appear in the Files panel), builds multiplayer logic on top of Watch2Gether’s realtime update channel, and can fix bugs you report back in the same conversation. New chat clears the conversation and starts fresh — your files aren’t touched.

Using the AI assistant requires a Watch2Gether account signed in in the same browser; if you’re not signed in you’ll be prompted with a sign-up link.

Files panel

  • File tree on the left: + File / + Folder to create new ones, click a file to open it, delete from the row actions.
  • Code editor on the right, with tabs for each open file.
  • Every .js file that’s saved — by you or by the AI assistant — is checked for syntax errors before it’s applied, so a broken edit can’t silently break your live preview.
  • Connect to local folder button at the bottom — the “use your own tooling” option, covered in detail below.

Live preview

The preview always shows two simulated users at once (labeled U1 / U2), side by side or stacked (toggle with the layout button), so you can test multiplayer interactions — turns, shared state, chat — without needing a second browser or a real Watch2Gether room.

Toolbar controls:

  • preview from — pick which folder to serve as the app root (e.g. /, /dist, /build) if your project has a build step.
  • Reset app data — clears stored WebXDC updates and reloads both preview frames from scratch.
  • Layout toggle — side-by-side vs. stacked.
  • Refresh — reloads the preview cache from disk and reloads both iframes; use this if the preview looks stale.

Below the preview, a tabbed panel shows:

  • console — JS console output from both preview frames.
  • chat — a simulated feed of whatever your app sends via webxdc.sendToChat(), so you can see what would land in a real room’s chat.

Publishing

Click Publish to open the publish dialog. Pick which folder to publish (root, or a build output folder), give it a name and short description, then choose one of two tabs:

  • Publish on Watch2Gether — uploads the app directly. When it’s done you get a URL to paste into the Watch2Gether room search bar so anyone can add it to a room. Requires a Watch2Gether account.
  • Download .xdc package — packages the app into a .xdc file you can download, share, or sideload into any WebXDC-compatible host. No account needed.

There’s also an “Include this app in the future Watch2Gether store” checkbox — the store isn’t live yet, but this flags whether you want to be included when it launches. You can change your mind the next time you publish.

Using your own tooling: Connect to local folder

If you’d rather write code in VS Code, your terminal, or your own AI coding agent, you don’t have to stay inside the browser IDE. Click Connect to local folder in the Files panel (or Open existing folder… from the project picker) to link your project to a real folder on your computer, using the browser’s File System Access API.

How it works:

  1. Pick an empty folder. The builder copies your current project files into it — it refuses non-empty folders so it never overwrites something already there.
  2. Your browser asks for read/write permission to that folder.
  3. From then on the project lives on disk. Edit it with whatever you like — your own editor, your own AI coding agent, version control, build tools — and changes sync back into the browser IDE, where the live preview, the AI assistant, and publishing all keep working.
  4. Every generated project includes an AGENTS.md file at its root describing the WebXDC sandbox rules (no external network, no alert/confirm, layouts must handle both portrait and landscape, etc.) and the multiplayer state pattern the app uses — handy context if you’re pointing your own coding agent at the project.

A few details worth knowing:

  • Currently Chromium-only (Chrome, Edge, Brave, or similar) — the File System Access API isn’t available in Firefox or Safari yet.
  • If the same file changes in the browser IDE and on disk around the same time, the editor shows a conflict banner letting you Reload from disk or Keep my version.
  • If the browser loses permission, or the folder gets moved or deleted, you’ll see a “Lost access to local folder” dialog — grant permission again to keep going, or disconnect and return to the project list.

What you can (and can’t) build

WebXDC apps run in a sandbox with no external network access — no fetch, no XMLHttpRequest, no WebSockets. Everything has to be a local asset, and cross-user communication goes only through Watch2Gether’s built-in realtime update channel. Practically:

  • You can’t embed another website via an <iframe> inside your app — it’s blocked by the sandbox, and most sites block being framed anyway. If you want to open an external link from your app, use Watch2Gether’s own external-link/co-browsing feature rather than trying to build a mini-browser inside a WebXDC app.
  • You can build fully offline, self-contained apps and games — this is where W2G Builder shines: multiplayer games, tools, drawing boards, quizzes, anything that only needs local assets and player-to-player sync.

Beta status

W2G Builder is in beta — you’ll see the badge throughout the UI. Expect rough edges, and please use the Feedback link in the top bar to tell us what’s working and what isn’t.

Also saved to /tmp/claude-1000/-home-florian-npdev-w2g-workspace/4ab7fd32-530b-4aff-b97d-75d47e5ceb14/scratchpad/w2gbuilder-overview.md if you want it as a file.