Setup

Getting Started

Helloo there! Glad you could make it. This page walks you through getting your computer ready, one small step at a time. You don't need any coding experience - just follow along, and if something looks unfamiliar, that's totally normal.

Set aside about 15-20 minutes. You'll install two free programs and download the project. Take it slow - there's no rush, and you can't break anything.

Pro Tip: If you get stuck, ChatGPT is your friend - LLMs are surprisingly decent at explaining these kinds of things. Just copy the error message into ChatGPT and ask it to explain what it means and how to fix it.

First, which computer are you using?

1. Install Node.js

Node.js is the engine that runs the project behind the scenes. Installing it is just like installing any other program.

  1. Go to nodejs.org/en/download.
  2. Scroll down until you see the heading “Or get a prebuilt Node.js®”. This is the part you want - it has a couple of dropdowns and two green download buttons.
  3. Make sure the first dropdown says macOS, then set the architecture dropdown to match your Mac (see the box below if you're not sure):
    • arm64: for Apple Silicon Macs (M1, M2, M3, M4)
    • x64: for older Intel Macs
  4. Click the green “macOS Installer (.pkg)” button to download.
  5. Open the downloaded .pkg file and click Continue → Agree → Install.
  6. When it says it's finished, you're done. 🎉

Not sure which Mac you have?

Click the menu (top-left of your screen) → About This Mac. Look at the Chip (or Processor) line:

  • If it mentions Apple (e.g. “Apple M2”), choose arm64.
  • If it mentions Intel, choose x64.

Most Macs sold since late 2020 are Apple Silicon (arm64).

How to check it worked

You don't have to, but if you're curious: open the Terminal app (press ⌘ + Space, type “Terminal”, hit Enter) and type:

node -v

If you see a version number like v22.11.0, everything is working.

Common hiccup

If node -v says “command not found” or “not recognized”, the most common fix is simply to close that window and open a new one (or restart your computer). New installs only show up in freshly-opened terminals.

2. Install VS Code

VS Code (Visual Studio Code) is a free text editor made for writing code. It's where you'll open the project and make changes.

  1. Go to code.visualstudio.com/download. You'll see download options grouped by platform.
  2. Under macOS, click the “.dmg” download. If there are three choices, pick “Universal” - it works on every Mac.
  3. Once it finishes, double-click the .dmg in your Downloads folder.
  4. A window opens showing the Visual Studio Code icon next to an Applications folder. Drag the icon onto the Applications folder. (This step is easy to miss - if you skip it, the app lives in the wrong place.)
  5. Open Visual Studio Code from your Applications or Launchpad. The first time, macOS may warn that it was “downloaded from the internet” - click Open to confirm it's safe.

3. Download the project

This is the folder full of files you'll be working with.

  1. Click here to download it as a ZIP: Download the project (.zip)
  2. (That link comes from the project's GitHub page - if you ever lose it, click the green “Code” button there and choose “Download ZIP”.)
  3. Find the downloaded ZIP in Downloads and double-click it. macOS unzips it into a folder automatically.
  4. Move the unzipped folder somewhere easy to find, like your Desktop or Documents. Remember where you put it!

That's the install done!

You now have everything on your computer! The next section gets the project up and running so you can see it in your browser.

Next

Run the project

Two short commands and the project will be live on your own machine. You'll type them into a terminal - a place to give your computer text instructions. The good news: VS Code has one built in.

4. Open the project in VS Code

  1. Open VS Code.
  2. Go to File → Open Folder… (and not "Open File…") and select the project folder you unzipped (the one that contains a file called package.json).
  3. If VS Code asks “Do you trust the authors of the files in this folder?”, click Yes, I trust the authors.
  4. Open the built-in terminal: Terminal → New Terminal from the top menu. A panel opens at the bottom - that's where you'll type the next two commands.

Open the folder, not a single file

Make sure you open the whole folder (the one with package.json in it), not just one file inside it. If you accidentally opened the folder that contains the project, open the project folder itself instead.

Optional, but helpful

VS Code may pop up a little notification suggesting the Svelte for VS Code extension. If it does, go ahead and click Install - it adds colour highlighting and helpful hints for the project's .svelte files. It's completely optional, so if you don't see the prompt, don't worry - everything still works without it.

5. Install the project's dependencies

Projects rely on building blocks made by other people. This command downloads them all into the folder. You only need to do it once.

In the terminal panel, type this and press Enter:

npm install

You'll see lots of text scroll by, and it may take a minute or two. When it stops and you get a fresh line to type on, it's done.

If you see “npm is not recognized / command not found”

That means Node.js isn't available in this terminal yet. Close VS Code completely, reopen it, and try again. If it still happens, double-check Step 1 finished successfully.

6. Start it up

Now type this and press Enter:

npm run dev

After a moment you'll see a message with a web address, something like:

  ➜  Local:   http://localhost:5173/

Hold ⌘ and click that link (or copy it into your browser). The project should open. You're up and running! 🎉

Keep it running

Leave that terminal open while you work - it's what keeps the site live. As you edit files and save, the page updates on its own. When you're finished for the day, click in the terminal and press ⌃ + C to stop it, and run npm run dev again next time.

You're all set 🚀

Head over to the chapters and start drawing with data.