Skip to content

A tour of the editor panels

tutorial lesson Beginner ⏱ 8 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor (Get Started)

What you'll learn

  • Select an entity and read its inspector sections
  • Open the console panel to see engine logs
  • Open the build panel to export the game
  • Open the command palette with Ctrl+K

What you'll build: A guided tour of the editor's inspector, console, build panel, and command palette.

Walkthrough — A tour of the editor panels · generated by site/media/lessons/editor-tour.lesson.ts (5 steps)

A quick tour of the panels you use most. (The viewport, gizmo, and hierarchy have their own pages — see Viewport and Hierarchy & inspector.)

  1. Open a scene in the editor. Load examples/scenes/editor-tutorial.vscn.json.

    A scene open in the editor
    The editor with a scene loaded.
  2. Select an entity — the inspector shows its sections. Click an entity; the inspector (right) shows the sections it has (Transform, Mesh, Material, …), with fields generated from the engine’s Zod schemas.

    The inspector populated for the selected entity
    The inspector adapts to the selection.
  3. Open the Console tab to see engine logs. The bottom panel’s Console shows engine logs with level filtering — your first stop when something misbehaves.

    The console panel
    The console panel (engine logs).
  4. Open the Build tab to export the game. The Build panel exports a web build (HTML5 / itch.io) or a Steam-ready desktop build via the editor server.

    The build panel
    The build/export panel.
  5. Press Ctrl+K for the command palette. A searchable list of editor actions (focus, save, play, view presets, …).

    The command palette open
    The command palette (Ctrl+K).

Recap

New functionality

  • Read an entity's inspector sections
  • Opened the console and build panels
  • Opened the command palette

New concepts & skills

  • The inspector is schema-driven (matches the runtime)
  • The console shows engine logs with level filtering
  • The build panel exports web/Steam; the palette (Ctrl+K) runs actions

Next lesson → Editor: assets, prefabs & ops