Loading...
Editor & Themes
Set up the Code Studio editor your way: Monaco or the Simple Editor, font, size, tab width, word wrap and minimap, plus Dark, Light and High Contrast.
Editor settings
Configure the editor under Profile → Preferences → Editor:
- Font family — your preferred editor font
- Font size — adjust to taste
- Word wrap — on or off
- Minimap — show or hide the side preview
- Line numbers — on or off
- Tab size — 2, 4 or 8 spaces. It starts at 2, but it is your choice, not a rule. It applies in the Monaco editor, on a computer and on a phone; the Simple Editor always uses 4.
Two editors to choose from
The Code Studio runs Monaco — the editor that powers VS Code — by default, but you can swap it:
- Monaco Editor — the full thing: go-to-definition, linting, IntelliSense
- Simple Editor — lightweight, syntax highlighting only
Pick the simple one on a slow machine or a phone, where Monaco is more than you need.
Editor theme
There is a theme picker with four options: Dark, Light, High Contrast, and Custom for VyroAI+ subscribers. Choosing Custom only switches the editor to your custom colours — it does not open anything. The builder itself lives one row away, under Appearance → Editor Colors. Every colour token — background, text, line numbers, syntax colours — can be tuned there and then stays consistent across the app.
IDE Appearance — how the chat looks
The settings above are for the code editor. How the chat looks has its own place: open a project, press the ⚙ gear for Project Settings, go to Editor, and open the folded IDE Appearance row at the bottom.
It has a live preview and these controls:
- User bubble color and AI bubble color — the two chat bubbles
- IDE accent color — the accent colour of buttons
- Chat font size — Small, Medium or Large
- Message density — Compact, Comfortable or Spacious
- Border radius — Sharp, Rounded or Pill
- Background style — Solid, Grid or Dots
It sits in Project Settings, but it is one setting for your whole account: a change shows in every project. It does not touch your plugin's in-game messages; those are set under Styling.
Editor settings are global — they apply to every project. Project Settings → Editor does have an Override for this project switch, but it only covers line numbers, word wrap and minimap, and today those three switches only show while the override is off — turn it on and they disappear. So set them under Profile → Preferences → Editor, where they apply everywhere.
Also in Code Studio (IDE)
- Next in Code Studio (IDE): Web App Studio
- Starting out: Starting a New Project — Four ways to start a project: Quick Create, AI Guided, Advanced Mode and Import from ZIP. Which one suits you, and why simpler project types show three.
- Starting out: Your Projects List — The sidebar, finding a project again, and the defaults every new project starts with.
- Building web apps: The Template Shelf — Ready-made web apps to start from, in a room of their own at /templates.
- Building web apps: A Cinematic Website Opening — A page that tells a story as the visitor scrolls, made in the web app wizard's Motion step. What the three cards cost, how the Frames board works, and when credits are taken.
4 of 37 in Code Studio (IDE) · Last checked 16 September 2026 · Previous: Project Settings