Inserting elements
Components, HTML tags, loops, conditions, text, code, style and script blocks, from the ⌘E palette.
Press ⌘E (or ⌘F) anywhere except the code editor to open the insert palette. Type, press Enter, and the item lands at the current selection.
Where it lands: inside the selected node if that node takes children, otherwise directly after it.
What is in the list
Components: every .astro file in src/components and src/layouts, plus
Astro’s <Image> and <Picture> from astro:assets. Inserting one writes its
import if the page does not have it yet.
Elements: every HTML tag. Inside a component or layout, <slot> is in the
list too; on a page it is not, because a page has no caller to pass it content.
Other: the pieces a page is made of that are not tags:
| Item | Inserts | Notes |
|---|---|---|
| Loop | items.map((item) => …) |
Starts empty so it renders nothing until you pick a source. See loops and conditions |
| Condition | test ? … : … |
Starts as true, so the “then” branch is visible immediately |
| Text | A text node | |
| Comment | An HTML comment | Also shown as the node’s comment in Settings |
| Code Expression | { … } |
Anything the visual model cannot hold |
| Doctype | <!doctype html> |
For a layout that owns the whole document |
| Style Block | <style> |
Becomes a source the style panel can write into |
| Script Block | <script> |
Tabs
The palette groups results into All, Components, Elements and
Other. Matches on the start of a name rank above matches inside one, so
typing but finds Button before IconButton.
Dragging instead
Components can also be dragged out of the Components panel and dropped into the Navigator, which is the better move when you know exactly where in the tree it belongs.