Errors
Click any entry to jump to it. Entries without a line number are global parse errors and aren't pinned to a specific spot in the editor.
Keyboard shortcuts & autocomplete
| ? | Show this help |
| ⌘/Ctrl + Enter | Run program (in manual mode) |
| ⌘/Ctrl + K | Toggle live / manual run |
| ⌘/Ctrl + S | Save to localStorage (auto on type) |
| ⌘/Ctrl + Shift + I | Toggle inspect mode |
| ⌘/Ctrl + Shift + D | Toggle Aktion DevTools (state · profiler · effects) |
| Ctrl + Space | Trigger autocomplete |
| Tab / Enter | Accept the highlighted autocomplete suggestion (Tab otherwise indents / advances snippet fields) |
| ⌘/Ctrl + F | Find / replace panel (⌘/Ctrl + G next, Shift + that for previous) |
| ⌘/Ctrl + D | Select the next occurrence of the selection |
| ⌘/Ctrl + Alt + G | Go to line |
| ⌘/Ctrl + Shift + M | Open the diagnostics panel (errors and lint warnings) |
| ⌘/Ctrl + Alt + [ / ] | Fold / unfold the block at the cursor |
| Esc | Close popups / exit inspect mode / exit full-screen |
File explorer. With the tree focused: Enter opens the selected file (or expands a folder), F2 renames, Delete / Backspace deletes, and ↑ / ↓ move the selection (Shift extends it). With the pane splitter focused, the arrow keys resize the editor / preview split.
Smart autocomplete. At the top level, tab through
components, builtins, language keywords
(if, for, function,
import, export, try…), the
runtime globals
($http, $query, $mutation,
$socket, $sse, $form,
$store, $router, $effect,
$state, $memo, $i18n,
$head, $script, $toast,
$dom, setTimeout, $storage,
$console, Math, JSON,
Object, Array, Date…), and
snippets (Router…, Effect…,
function…, Http…, Form…,
Socket…, Hook…). Inside a call like
Button("Save", { cursor }) the editor surfaces
named-arg names with their types
(variant:, tone:, icon:) plus
the universal channels every component accepts
(sx:, animate:, aria:,
data:…), ranked below the component's own props. After
the colon, enum-typed args show their allowed values inline so you
can pick one with a single tab.
Cursor-aware param docs. Hover any identifier,
or just place your cursor inside a
name: value slot, to see the matching parameter's
type, description, and allowed values. The status bar also pins
the active named arg so you always know what you're editing.
Sharing. Use to copy a share link, or to download a standalone HTML file you can host or open offline.
Errors and warnings. Click the pill in the editor's
status bar to open the diagnostics inspector — every parse error,
schema error and lint warning, with line numbers and
click-to-jump. Warnings are amber and don't block rendering: they
flag silent footguns the schema validator can't see, such as calling
a component that doesn't exist (which renders nothing at all) or
shadowing the t destructured from $i18n.
Runtime options. The toolbar's Runtime group drives
<aktion-app> attributes directly:
Strict turns on the dev-mode morph guard and
unresolved-identifier warnings, RTL previews the
mirrored layout (dir="rtl"), Errors
renders the runtime's own error banner inside the preview, and
Trusted / Sandboxed switches the program's access to
host JavaScript globals. A program opened from a share link starts
Sandboxed — no eval, DOM, network or storage —
because it came from whoever wrote the URL.
DevTools. Click DevTools (or
⌘/Ctrl + Shift + D) to
open the Aktion inspector docked to the page: a live, editable
$state tree, a render profiler with a per-commit
flamegraph, and a timeline of every effect. See the
DevTools guide for details.