The Magic Moment: Render Quarto

Why do we “Render”?

In the old days, you would run code, copy a graph, save it as a JPG, and paste it into Word. If the data changed, you had to redo every step manually.

The Better Way: Think of your code (.qmd file) as a Recipe and the final report (HTML/PDF) as the Meal. * Editing: You don’t change the meal; you change the recipe. * Rendering: This is the “cooking” process. When you click Render, the computer follows your instructions from scratch to create a fresh meal.

This is the secret to reproducibility: if you give your recipe to a friend, they can cook the exact same meal.

Step 1 — Open the file

Go to the Explorer pane (Left side).
Locate and click on the file:

practice_report.qmd

This will open the “Source Code” in the center Editor window. You will see a mix of normal text and code chunks.

Step 2 — Edit name (The YAML Header)

Look at the very top of the file. You will see a block of text sandwiched between three dashes (---). This is called the YAML Header. It controls the document’s metadata.

Find the line that says author:

author: "Your Name"

Task: Delete “Your Name” and type your actual name inside the quotes. Do not remove the quotes!

Step 3 — Run a code chunk

Before you render the whole report, you can try one chunk at a time. A Run Cell link sits above each grey R code chunk.

Click Run Cell above the first chunk. The first time, R starts in the terminal at the bottom, prints [sess] Connected to VS Code, and then runs your code.

The first **Run Cell**: R starts, connects, and shows the first rows of the data

Click Run Cell above the chart chunk. The plot opens in an R Plot tab next to your file.

A plot from **Run Cell** in the **R Plot** tab

Step 4 — Render

How to render: the course default

Save the .qmd file you want to render, then open the Command Palette (View → Command Palette, or press Ctrl+Shift+P on Windows/Linux / Cmd+Shift+P on Mac) and run Quarto: Render Document. When a menu asks which format, choose Render HTML (or Render PDF (Typst) for a PDF).
Always-works fallback (terminal): type the render command with the file’s path as shown in the Explorer, for example:
```
quarto render practice_report.qmd
```
Always name the file — a bare quarto render rebuilds the whole project and takes much longer.
The Preview button at the top-right of the editor renders too, in the format the file asks for, without the menu.

Where did the output go? Watch the render log for the Output created: line — it names the exact file created. By default the file appears next to your .qmd; in projects that set an output directory (like this book’s docs/ folder), it appears there instead.

To look at it, click the file in the Explorer: an .html or .pdf opens in a tab inside VS Code. After you render again, close that tab and click the file again. To open it in your own browser instead (for example, slides to present full screen, or a page to print), right-click it and choose Download.

Run **Quarto: Render Document** from the Command Palette

After you start the render, observe the Terminal (Bottom): you will see text scrolling quickly. This is your code chunks executing. When it prints Output created: practice_report.html, your report is ready.

The render finishes with “Output created: practice_report.html”

Step 5 — Look at your report

The rendered file, practice_report.html, is saved right next to the .qmd file in the Explorer panel. Click it: it opens in a tab inside VS Code, showing a beautiful, formatted report with your name on it.

Click `practice_report.html`: it opens in a tab

After you render again

The tab does not update by itself. Close it and click practice_report.html again to see your changes. To open the report in your own browser instead, right-click the file and choose Download.

Congratulations! You just performed “Knowledge Translation”—turning raw code into a human-readable document.

Want a PDF? (optional)

Run Quarto: Render Document again and choose Render PDF (Typst). Typst comes with Quarto, is fast, and keeps characters such as Greek letters and emoji that the LaTeX option can silently drop.

Typst finishes with “Output created: practice_report.pdf”

Click practice_report.pdf in the Explorer. It opens in a PDF tab.

Click the `.pdf` file: it opens in a PDF tab

If it fails (Troubleshooting)

Rendering involves many moving parts, so it sometimes gets stuck.

These are not errors

“Problems 1” and a yellow file name while your .html is open: VS Code is checking the page styling that Quarto wrote. Your report is fine, and the note goes away when you close the tab.

A styling note in Problems: safe to ignore
Notifications under the bell in the bottom-right corner: a suggested extension, a question about “git fetch”, or a note asking you to support the PDF viewer’s makers. You do not need any of them, and you never need to pay anything. Close each one with its ×.

Notifications you can close

The “Wait” Rule: If nothing happens for 20 seconds, the background process might be initializing. Give it a moment.
The “Retry” Rule: Sometimes the connection hiccups. Run Quarto: Render Document one more time.
The “No Button” Rule: The Render button sometimes does not appear in a fresh or stale Codespace. You do not need it — the Command Palette and terminal methods above always work.
The “PDF” Rule: For a PDF, choose Render PDF (Typst). Everything a PDF needs is already installed, so do not install anything.
The “Red Text” Rule: Look at the Terminal tab at the bottom. If you see red text, it is an error message. Read it—it usually tells you exactly what went wrong (e.g., “File not found” or “Syntax error”).

Still stuck after trying these rules? See Troubleshooting: Rebuild Container for the step-by-step fix with screenshots.