--- title: Code description: Walk through source code in an editor of reel's own: no app to install, no window, no permissions. url: https://docs-v3-preview.elastic.dev/reel/demos/code --- # Code ``` Screen code Output walkthrough.mp4 Set Viewport 1100x620 Set FontSize 20 Code Sources/SpeechClock.swift Say "This is how reel keeps one line from talking over the next." Go "func say" Focus lines 9-20 Mark "max(now, speechEnd)" 1 Callout "max(now, speechEnd)" "when it's reached, or after the line before" Say "A line starts when the reel reaches it, or when the one before it ends." Callout off Mark off Focus off Code Sources/SpeechClock.java at "public double[] say" Key end Key return Zoom cursor 1.5x Type "// typed at your pace" ``` `Screen code` records an editor of reel's own instead of an app or a page. It's [Monaco](https://microsoft.github.io/monaco-editor/), the editor in VS Code, in a page nobody sees, shipped with reel: nothing to install, no window on your screen, and no Screen Recording or Accessibility. Code is coloured as your editor colours it, in dozens of languages (Swift, TypeScript, JavaScript, Python, Rust, Go, Java, C#, Kotlin, shell, HTML, CSS, JSON, YAML, Markdown and more), picked from the file's extension. A `.reel` script is coloured too, so a reel can show a reel. `Set Viewport` is the screen's size in points (1280x800 unless set), and `Set FontSize` its text (18 unless set). ## Files and places | Command | | |------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------| | `Code ` | Shows the file, with its name, its folder from the git root and its language in a header. The next file fades up in its place. | | `Code lines -` | Only those lines, numbered as in the file. | | `Code at line `, `Code at ""` | Opens with the cursor at a line or the first match of the text, scrolled into view. | | `Go line `, `Go ""` | Moves the cursor there; the view eases to it when it's out of sight. Line numbers are the file's. | A place that isn't in the file stops the take at its line: `"func pause" is not in SpeechClock.swift`. ## Between files ``` Code Synthesizer.swift Code@slide-left Voicebox.swift at "struct Voicebox" Code@crossfade Synthesizer.swift Split Voicebox.swift at "struct Voicebox" Link "protocol Synthesizer" -> "struct Voicebox: Synthesizer" "conforms to" Link "func speak" -> "func speak" "implements" Pane right Peek "profileID()" Voicebox.swift at "func profileID" ``` | Command | | |-----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `Code@ ` | The file before moves out as this one comes in: `crossfade`, `fade`, `slide-left` and the other slides, `zoom`, the wipes, or `cut`, with an easing and a duration, as an [intro](https://docs-v3-preview.elastic.dev/reel/demos/intro-and-outro) takes them. Without one, the new file fades up. | | `Split [lines -] [at …]` | Opens the file in a second pane, sliding in from the right to take half the screen. Steps then act on it. | | `Pane left`, `Pane right` | Which pane `Code`, `Go`, `Type`, `Focus`, `Mark`, `Callout` and `Peek` act on, and where the caret shows. | | `Split off` | Back to the left pane, full width. | | `Peek "" [lines -] [at …]` | Opens the file in a box under the line with the text, as an editor peeks a definition: up to 8 lines, scrolled to its place, that line highlighted. `Peek off` closes it. | | `Link "" -> "" ["-] [at …]` turns the file shown into this one: every word they share moves from where it was to where it is now, what's gone fades out and what's new fades in. Lines that read the same move as one, even when they've moved past others; the words of an edited line find their places within it. `Morph@,` says how it moves, 900ms and `ease-in-out` unless given. It works on what's on screen, so it reads best when both versions fit, or when `at` puts the part that changed in view. Relations are declared in the reel: reel colours code but doesn't understand it, so it can't find what implements what on its own. The texts are anchors, matched exactly, as `Mark` matches them. ## Pointing things out | Command | | |------------------------------|---------------------------------------------------------------------------------------------------------------------------------| | `Focus lines -` | Dims every other line, until `Focus off`. | | `Mark "" [n]` | A box around the first match of the text, numbered `n` when given. Marks add up until `Mark off`. | | `Callout "" "