diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 021b61a7..7343c11e 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -73,6 +73,17 @@ jobs:
         run: |
           yarn lint
 
+      - name: Setup Toit
+        if: ${{ github.event.inputs.run-tests != 'false' }}
+        uses: toitlang/action-setup@v1
+        with:
+          toit-version: v2.0.0-alpha.189
+
+      - name: Generate test data
+        if: ${{ github.event.inputs.run-tests != 'false' }}
+        run: |
+          tests/generate_test_data.sh
+
       - name: Test
         if: ${{ github.event.inputs.run-tests != 'false' }}
         run: |
diff --git a/.gitignore b/.gitignore
index dd63e6e7..e471c392 100644
--- a/.gitignore
+++ b/.gitignore
@@ -145,3 +145,5 @@ sketch
 # End of https://www.toptal.com/developers/gitignore/api/yarn,node,react
 
 .packages/
+public/toitdoc*.json
+cypress_output*.txt
diff --git a/README.md b/README.md
index 41347f42..3c7f03ed 100644
--- a/README.md
+++ b/README.md
@@ -67,20 +67,20 @@ You can create new json files by running the following command:
 ### Core libraries
 
 ```bash
-toit doc build --sdk --out "$OUTFILE"
+toit doc build --sdk --output "$OUTFILE"
 ```
 
 ### Package
 
 ```bash
-toit doc build --package --out "$OUTFILE" $PATH_TO_PACKAGE
+toit doc build --package --output "$OUTFILE" $PATH_TO_PACKAGE
 ```
 
 You might want to exclude the sdk and/or packages from the generated documentation:
 
 ```bash
-toit doc build --package --exclude-sdk --out "$OUTFILE" $PATH_TO_PACKAGE
-toit doc build --package --exclude-pkgs --out "$OUTFILE" $PATH_TO_PACKAGE
+toit doc build --package --exclude-sdk --output "$OUTFILE" $PATH_TO_PACKAGE
+toit doc build --package --exclude-pkgs --output "$OUTFILE" $PATH_TO_PACKAGE
 ```
 
 ### Folder
@@ -88,7 +88,7 @@ toit doc build --package --exclude-pkgs --out "$OUTFILE" $PATH_TO_PACKAGE
 You can also just build the toitdoc of a folder:
 
 ```bash
-toit doc build --out "$OUTFILE" $PATH_TO_FOLDER
+toit doc build --output "$OUTFILE" $PATH_TO_FOLDER
 ```
 
 ## Cloudflare
diff --git a/cypress.json b/cypress.json
index 0967ef42..17ef242e 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1 +1,3 @@
-{}
+{
+  "baseUrl": "http://localhost:3000"
+}
diff --git a/cypress/integration/docs.spec.ts b/cypress/integration/docs.spec.ts
new file mode 100644
index 00000000..959a2521
--- /dev/null
+++ b/cypress/integration/docs.spec.ts
@@ -0,0 +1,117 @@
+/// <reference types="cypress" />
+
+describe("Documentation Viewer", () => {
+  beforeEach(() => {
+    // Increase default timeout for all tests as loading/rendering might be slow, especially for SDK
+    Cypress.config("defaultCommandTimeout", 30000);
+  });
+
+  const checkSidebarGroup = (label: string) => {
+    // The sidebar might use different structures. This is a generic check.
+    cy.contains(label).should("be.visible");
+  };
+
+  describe("Package Mode", () => {
+    beforeEach(() => {
+      // Load the package-specific json
+      cy.readFile("public/toitdoc_pkg.json").then((json) => {
+        json.mode = "package";
+        cy.intercept("GET", "/toitdoc.json", json).as("getDocs");
+      });
+      cy.visit("/");
+      cy.wait("@getDocs");
+    });
+
+    it("loads the package view", () => {
+      cy.get("body").should("contain.text", "pkg");
+      // Enhanced assertions
+      // Sidebar "Libraries" header
+      cy.contains("h5", "Libraries").should("be.visible");
+      // Sidebar "pkg" item
+      cy.contains("pkg").should("be.visible");
+      cy.contains("h3", "Functions").should("be.visible");
+      // Check function signatures
+      cy.contains("foo str/string").should("be.visible");
+      cy.contains(" -> string").should("be.visible");
+      cy.contains("bar a/A").should("be.visible");
+      cy.contains(" -> A").should("be.visible");
+    });
+
+    it("navigates to class A", () => {
+      cy.contains("pkg").click();
+      cy.contains("foo").should("be.visible");
+      cy.contains("bar").should("be.visible");
+
+      // Click on 'A' explicitly within the Classes section.
+      cy.contains("h3", "Classes")
+        .parent()
+        .parent()
+        .within(() => {
+          cy.contains("a", /^A$/).click();
+        });
+      cy.contains("Class A").should("be.visible");
+
+      // Enhanced assertions for Class A
+      cy.contains("extends Object").should("be.visible");
+      cy.contains("h3", "Methods").should("be.visible");
+      cy.contains("operator == other/any").should("be.visible");
+      cy.contains(" -> bool").should("be.visible");
+      cy.contains("stringify").should("be.visible");
+      cy.contains(" -> string").should("be.visible");
+    });
+  });
+
+  describe("Folder/SDK Mode", () => {
+    beforeEach(() => {
+      // Load the folder/sdk-like json
+      cy.readFile("public/toitdoc_folder.json").then((json) => {
+        delete json.mode; // mode undefined means Folder view in doc.ts
+        cy.intercept("GET", "/toitdoc.json", json).as("getDocs");
+      });
+      Cypress.config("defaultCommandTimeout", 30000);
+      cy.visit("/");
+      cy.wait("@getDocs");
+      cy.get(".MuiCircularProgress-root").should("not.exist");
+    });
+
+    it("loads the folder view", () => {
+      cy.get("body").should("contain.text", "pkg");
+      // Enhanced assertions
+      cy.contains("Toitdoc Viewer").should("be.visible");
+      cy.contains("Welcome to the Toitdoc viewer").should("be.visible");
+      cy.contains("Libraries").should("be.visible");
+      cy.contains("other").should("be.visible");
+      cy.contains("pkg").should("be.visible");
+    });
+  });
+
+  describe("SDK Mode", () => {
+    beforeEach(() => {
+      // Load the sdk json
+      cy.readFile("public/toitdoc_sdk.json").then((json) => {
+        json.mode = "sdk";
+        cy.intercept("GET", "/toitdoc.json", json).as("getDocs");
+      });
+      cy.visit("/");
+      cy.wait("@getDocs");
+    });
+
+    it("loads the sdk view and shows Core library", () => {
+      cy.get("body").should("contain.text", "core");
+      // Navigate to 'core'
+      cy.contains("core").click();
+
+      // Enhanced assertions for SDK Core
+      cy.contains("Library core").should("be.visible");
+      cy.contains("h3", "Exported classes").should("be.visible");
+      cy.contains("h3", "Exported functions").should("be.visible");
+
+      // Check for common core classes/functions
+      cy.contains("bool").should("be.visible");
+      cy.contains("int").should("be.visible");
+      cy.contains("string").should("be.visible");
+      cy.contains("List").should("be.visible");
+      cy.contains("print message/any").should("be.visible");
+    });
+  });
+});
diff --git a/tests/generate_test_data.sh b/tests/generate_test_data.sh
new file mode 100755
index 00000000..812695e8
--- /dev/null
+++ b/tests/generate_test_data.sh
@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Exit on error
+set -e
+
+# Go to the project root
+cd "$(dirname "$0")/.."
+
+# Install dependencies for the test package
+echo "Installing dependencies for test-pkg..."
+toit pkg install --project-root=tests/test-pkg
+
+# Generate the toitdoc.json for the package (default for now)
+echo "Generating public/toitdoc.json from test-pkg..."
+toit doc build --package --output public/toitdoc.json tests/test-pkg
+
+# Generate a separate package json for specific tests
+echo "Generating public/toitdoc_pkg.json..."
+toit doc build --package --output public/toitdoc_pkg.json tests/test-pkg
+
+# Generate SDK documentation
+echo "Generating public/toitdoc_sdk.json..."
+toit doc build --sdk --output public/toitdoc_sdk.json
+
+# Generate basic folder documentation
+echo "Generating public/toitdoc_folder.json..."
+toit doc build --output public/toitdoc_folder.json tests/test-pkg/src
+
+echo "Done."