Editor Guide
Authoring slides inside the AuraDeck editor.
The AuraDeck editor is a single-window application split into three regions: the ribbon (top), the slide panel (left), and the code editor + preview (right).
Ribbon
The ribbon groups the most common actions:
| Group | Actions |
|---|---|
| File | Open, Save, Save As, Save As .adsl, Properties |
| Slide | New, Duplicate, Delete, Move Up / Down |
| Edit | Undo, Redo, Find, Replace |
| Insert | Image, Template snippet |
| Present | Fullscreen (F5), Presenter mode (F6) |
| Export | PDF, PPTX |
The exact set of buttons may evolve — point at any control for a tooltip with its keyboard shortcut.
Slide panel
The left panel shows every slide in playback order, with a thumbnail and the slide's title (from manifest.json → slides[].title).
- Click a slide to open it.
- Drag a slide to reorder it. The change is reflected in
manifest.jsonon save. - Right-click for a context menu with Duplicate, Delete, Rename, and Move actions.
Code editor
The right pane is a CodeMirror 5 instance configured for htmlmixed mode. That gives you HTML, CSS, and JavaScript syntax highlighting in one buffer with appropriate autocomplete in each context.
Ctrl+Spacetriggers autocomplete. Inside<style>you get CSS hints; inside<script>you get JavaScript hints; everywhere else you get HTML tag and attribute hints.Ctrl+Ssaves the current slide. AuraDeck rewrites the slide HTML file and updatesmanifest.json'smodifiedtimestamp.Ctrl+/toggles a line comment.
The editor saves to disk as plain files — there is no proprietary state. You can edit the same files from VS Code or any text editor and AuraDeck will pick up the changes the next time you open the deck.
Preview
A live preview of the current slide renders in an iframe at the deck's aspect ratio (controlled by manifest.json → aspect_ratio). The preview reloads automatically on save.
Inspecting the preview
The preview is a regular WebView. In a tauri dev build, right-click and choose Inspect to open developer tools — handy for debugging slide CSS or JavaScript.
Inserting images
Use the ribbon's Insert → Image action to copy a file into your deck's images/ directory and insert an <img src="./images/your-file.png"> reference at the cursor. Image paths in slide HTML always use the ./images/ prefix; AuraDeck inlines them as base64 data URIs at present time so the deck remains self-contained.
Save formats
The Save action writes back to whatever you opened — folder or .adsl. Use Save As .adsl to bundle a folder-format deck into a single archive for distribution.