User guide

How to use the YouthDevs IDE

A quick reference for everything in your workspace: the editor, the AI assistant, the terminal, live preview, collaboration, and shipping your project.

Getting startedThe editorAI assistant ("Vibe" chat)TerminalLive previewCollaborating with a teamGitHub sync & deployingGood to know

Getting started

Everything happens from your workspace dashboard.

Sign in

Sign in with Google, GitHub, or an email and password from the Sign in page. GitHub sign-in also asks for repo access, which is what powers the optional GitHub sync feature below.

Create a project

From your workspace dashboard, choose "Create project" and pick a starter template — a plain HTML/CSS/JS site or a Next.js app. Give it a name; a URL-friendly slug is generated for you automatically.

Open a project

Click any project card to open it in the IDE. The URL becomes your project's own address (e.g. yourapp.com/your-project-slug) — bookmark it or share it with teammates.

The editor

A full code editor in your browser, powered by Monaco (the same editor as VS Code).

File explorer

The left panel lists every file in your project. Click a file to open it, or use the explorer's controls to add and remove files.

Editing

Standard editor shortcuts, syntax highlighting, and multi-file editing all work as you'd expect. Your changes save automatically and sync to your teammates in real time.

Resizable layout

Drag the dividers between the file explorer, editor, and the chat/terminal footer to resize each panel to how you like to work.

Describe your changes

When you add, remove, or otherwise commit a manual edit, you'll be asked to briefly describe the change. This keeps a readable history for your team (and becomes your GitHub commit message, if your project is linked to GitHub).

AI assistant ("Vibe" chat)

Describe what you want in plain language and let the assistant edit your files for you.

How it works

Open the chat panel and type an instruction — e.g. "add a dark mode toggle" or "fix the bug where the form doesn't submit." The assistant reads your project's files and responds with a set of file changes, which are applied straight into your workspace.

Review before you trust it

The assistant can create, update, or delete files. Always look over what changed afterward — treat it like a fast but occasionally wrong collaborator, not an oracle.

Supercharge

Toggle Supercharge (in the top bar) to use a stronger model for trickier requests. Supercharge is rate-limited — after your uses run out you'll enter a 10-minute cooldown before you can use it again. A countdown timer shows how much time is left.

Chat history

Your conversation with the assistant is saved per-project, so you and your teammates can scroll back through past requests and changes.

Terminal

A real, live terminal connected to your project — install packages, run scripts, and inspect output.

Using it

Open the terminal panel at the bottom of the IDE. It behaves like a normal Linux shell, with your project's files already present. Run things like npm install or npm run dev directly.

Reconnecting

If the terminal disconnects (e.g. after being idle, or a network hiccup), it will attempt to reconnect automatically. If it doesn't recover, refresh the page.

Live preview

See your app rendered as you build it, without leaving the IDE.

HTML projects

Static HTML/CSS/JS projects preview instantly in an embedded panel — no extra setup needed.

Next.js projects

Next.js projects start a real local dev server behind the scenes to render your app. This can take a few seconds to spin up the first time or after a large change.

Collaborating with a team

Projects are shared spaces — build together in real time.

Inviting teammates

From the top bar of a project, invite a teammate by email. Anyone you invite gets access to the same project, files, chat history, and terminal.

Real-time sync

File edits, chat messages, and project state sync to everyone in the project live. The top bar shows a badge for the most recent change and who made it.

GitHub sync & deploying

Take your project out of the browser and into the real world.

Connect GitHub

If you signed in with GitHub, you can link a project to a GitHub repository. Once linked, edits you commit are pushed to that repo automatically, keeping GitHub as your project's source of truth.

Deploy to Vercel

Use the Deploy action to publish your current project to the web. HTML and Next.js projects are both supported — you'll get a live URL when the deployment finishes.

Good to know

Theme

Toggle dark/light mode from the top bar — your preference is remembered on this device.

Hackathons

If you're participating in a YouthDevs hackathon, your project can be flagged and submitted for review directly from your dashboard once submissions are open.

Getting help

If something looks broken or you're stuck, reach out to your event organizer or the YouthDevs team.

Ready to build something?

Go to your workspace