UI Battle Arena

Editor Shortcuts

VS Code-inspired keys for the arena editor, plus the snippets and match actions that are specific to UI Battle.

Dashboard

Build Snippets

! or html:5 + Enter/Tab Insert a full HTML5 document shell.
div.card, #app, a.btn + Enter/Tab Expand simple HTML class and id abbreviations.
ul>li*3, nav>ul>li*4 + Enter/Tab Create repeated nested HTML structures.
card, hero, grid, form, modal, table, video Drop common UI starter blocks into HTML.
m10, p16, w100p, d:f, grid2, pos:a, shadow Expand quick CSS utility snippets.

Editing

Ctrl+Space Open autocomplete suggestions.
Ctrl+F Find text in the current editor.
Ctrl+H Replace the next matching text.
Ctrl+/ Toggle a line comment.
Shift+Alt+A Toggle a block comment when the language supports it.
Ctrl+L Select the current line.
Ctrl+D Select the next matching word or selection.
Ctrl+Shift+L Select all matches in the current editor.
Ctrl+G Jump to a line number.

Lines and Layout

Alt+Up / Alt+Down Move the current line up or down.
Shift+Alt+Up / Shift+Alt+Down Duplicate the current line.
Ctrl+Shift+K Delete the current line.
Ctrl+[ / Ctrl+] Outdent or indent selected code.
Shift+Alt+F Format indentation.
Alt+Z Toggle line wrapping.
Ctrl+Alt+Up / Ctrl+Alt+Down Add another cursor above or below.

Arena Actions

Ctrl+1 / Ctrl+2 / Ctrl+3 Switch between HTML, CSS, and JavaScript.
Ctrl+` Cycle to the next editor tab.
Ctrl+S Save locally and refresh the preview.
Shift+Enter Refresh the live preview.
Ctrl+Enter Submit and check your score.
Ctrl+Alt+R Reset to the starter code after confirmation.
Alt+C in CSS Open the color picker near the cursor.

VS Code Memory

Ctrl+K Ctrl+S VS Code opens Keyboard Shortcuts. In the arena, use this page as the reference.
Ctrl+Shift+P VS Code opens the Command Palette. Arena keeps match actions visible instead.
Ctrl+P VS Code opens Quick Open. Arena uses fixed HTML, CSS, and JS tabs.
F5 VS Code starts debugging when a debugger is available. Arena debugging tools stay disabled for fair play.

Reference Sources

These arena shortcuts are adapted from common VS Code editing patterns and adjusted for fair-play match rules.

VS Code keyboard shortcuts VS Code default keybindings