> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codebanana.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Project Viewer

> Navigate and edit project files in the CodeBanana Project Viewer, manage tabs, preview Markdown, HTML, JSON, and apps, open live services, add line comments, reference content in chat, inspect diff view, track changes, and share files with external links.

## **File Navigation and Tabs**

When working within a project, opened files are organized into tabs for easy switching:

* Multiple files can be opened simultaneously
* Tabs appear at the top of the viewer
* Right-click on tabs to:
  * Close current
  * Close others
  * Close all

This allows you to manage context efficiently while working across different parts of the project.

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/viewertab.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=98bc20b49505b78a5ef41c85b40ec9a8" alt="Viewertab" width="2294" height="1264" data-path="images/viewertab.png" />
</Frame>

## **File View and Preview**

The viewer supports both **code and preview modes**, depending on file type:

**Markdown (md)**

* Switch between **Code** and **Preview**
* Edit directly in preview mode
* Use / to trigger formatting options
* Select a line and **right-click for formatting and editing actions**

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/mdedit.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=e8bfe6ce1c179eff8c788f4defb26a3a" alt="Mdedit" width="2294" height="1264" data-path="images/mdedit.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/markdownpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=d5abec851b2773dcdc108e220538f917" alt="Markdownpreview" width="2294" height="1264" data-path="images/markdownpreview.png" />
</Frame>

**HTML / JSON / static files**

* Code view and preview mode available
* Option to open in a new tab

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/htmlpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=81a9ccbb62c0dabc56eb1a5970e4d3fd" alt="Htmlpreview" width="2294" height="1264" data-path="images/htmlpreview.png" />
</Frame>

**App projects**

* Preview across multiple environments:
  * Web
  * iOS
  * Android
  * My Device (via external preview tools)
* Refresh available for real-time updates

## **Project Preview**

When a service is running, the Project Viewer enables **live preview**:

* Automatically detects active ports
* Allows instant access to running applications
* Can also be accessed via the **Service panel**

This creates a “what you see is what you build” experience, similar to real-time document editing—but for applications.

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/projectpreview.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=96a6ebba2cd79c601733c62c29cec953" alt="Projectpreview" width="2294" height="1264" data-path="images/projectpreview.png" />
</Frame>

## **Editing and Interaction**

The Project Viewer supports direct interaction with project content:

* Select content to:
  * Add comments
  * Reference in chat
  * Copy content
* Comments are tied to specific lines and remain visible in context
* A floating comment panel allows quick navigation across all comments

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/comment.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=d944455484671bfa0da052518fa4d3e3" alt="Comment" width="2294" height="1264" data-path="images/comment.png" />
</Frame>

## **Diff and Change Tracking**

When files are modified, additional views are available:

* **Preview** — current state of the file
* **Diff View** — compare changes against previous versions

This helps teams understand exactly what has changed before committing or sharing updates.

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/OJCghbN_0wXF2BB2/images/diff.png?fit=max&auto=format&n=OJCghbN_0wXF2BB2&q=85&s=2a8726894cf243c8c59b0db7c7a65b4d" alt="Diff" width="2294" height="1264" data-path="images/diff.png" />
</Frame>

## **Sharing**

Certain file types (e.g. HTML, Markdown, JSON) support **shareable links**, allowing others to view content externally without accessing the full project.

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/Few9LVDTbxUXcu0o/images/share.png?fit=max&auto=format&n=Few9LVDTbxUXcu0o&q=85&s=6e900e36e01c58fa1f14ed422fc0d060" alt="Share" width="2294" height="1264" data-path="images/share.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/gen-d40df51d/Few9LVDTbxUXcu0o/images/shareexam.png?fit=max&auto=format&n=Few9LVDTbxUXcu0o&q=85&s=413acccd4b5b92320baea148700cb831" alt="Shareexam" width="2294" height="1264" data-path="images/shareexam.png" />
</Frame>