# File Viewers

Preview everything without leaving Studio. Built-in viewers render PDFs, spreadsheets, presentations, code, and more — so you can inspect AI-generated reports and uploaded documents instantly, without switching to an external application.

Note
File viewers render content client-side from server-stored files. The AI does not re-process a file when you open it in a viewer — it's a direct render of the file's contents.

## Objective

Open and interact with files generated by the AI or uploaded by you, using the appropriate built-in viewer for each file type.

## Prerequisites

- Signed in to Treasure AI Studio ([Getting Started](/products/ai-studio/getting-started))
- A file in the current chat session (uploaded or AI-generated)


## Supported Viewers

| File Type | Extensions | Viewer | Key Features |
|  --- | --- | --- | --- |
| **PDF** | pdf | PDF Viewer | Zoom, page navigation, fit-to-width |
| **Spreadsheet** | xlsx, xls, csv, tsv | Spreadsheet Viewer | Sheet tabs, column sorting, resizable columns |
| **Presentation** | pptx, ppt | Presentation Viewer | Slide thumbnails, keyboard navigation, speaker notes |
| **Document** | docx, doc | Document Viewer | Rendered HTML |
| **Image** | png, jpg, jpeg, gif, svg, webp, bmp, ico | Image Viewer | Scaled to fit |
| **Code** | js, jsx, ts, tsx, py, sql, sh, yaml, json, xml, css, rb, go, rs, java, c, cpp | Code Viewer | Syntax highlighting, line numbers |
| **Markdown** | md, markdown | Markdown Viewer | Rendered markdown |
| **HTML** | html, htm | HTML Viewer | Sandboxed iframe |
| **Journey** | *.journey.yaml, *.journey.yml | Journey Viewer | Interactive visualization |
| **Mermaid** | mmd, mermaid | Mermaid Viewer | Rendered diagrams |
| **Plain Text** | txt, log, and any unrecognized extension | Text Viewer | Monospace, pre-formatted |


## PDF Viewer

The PDF viewer renders documents page by page with zoom controls and page navigation.

### Controls

| Control | Description |
|  --- | --- |
| **Zoom in** / **Zoom out** | Increase or decrease zoom level in 25% steps |
| **Zoom percentage** | Displays current zoom level (range: 50% to 300%) |
| **Fit to width** | Automatically scale the document to fit the viewer width |
| **Page counter** | Shows **"Page X of Y"** as you scroll through the document |


### Navigation

Scroll vertically through the document. The page counter updates automatically as you scroll, tracking the most visible page.

### Tips for PDFs

- **Text-based PDFs** (natively digital) render most reliably. Scanned documents may work but with reduced quality.
- **Password-protected PDFs** cannot be rendered. Remove protection before uploading. If a PDF fails to load, you see: **"Failed to load PDF. The file may be corrupted or password-protected."**
- **Large PDFs** consume significant context when the AI processes them. For documents over 50 pages, consider uploading only the relevant section.


Technical Note
The PDF viewer uses `react-pdf` with a locally bundled PDF.js worker. Pages render on-canvas with an IntersectionObserver tracking the most visible page for the page counter. Zoom range is 0.5x to 3.0x in 0.25x increments.

## Spreadsheet Viewer

The spreadsheet viewer displays tabular data with sorting, resizable columns, and multi-sheet support.

### Features

| Feature | Description |
|  --- | --- |
| **Sheet tabs** | For multi-sheet workbooks (XLSX/XLS), tabs appear at the bottom to switch between sheets |
| **Column sorting** | Click a column header to sort ascending; click again for descending. Numeric values sort numerically, text sorts alphabetically |
| **Resizable columns** | Drag column borders to adjust width |
| **Scrolling** | Horizontal and vertical scroll for large datasets |


For CSV and TSV files, the viewer renders a scrollable table with auto-computed column widths based on content. Sheet tabs are not shown for single-sheet formats.

If a sheet has no data, the viewer shows: **"Empty sheet"**.

## Presentation Viewer

The presentation viewer renders PPTX/PPT files with a slide thumbnail panel, full-size slide view, and optional speaker notes.

Presentation viewer showing slide thumbnails and active slide
### Layout

- **Left panel** — Slide thumbnails for quick navigation. The active slide is highlighted with a border.
- **Center area** — The selected slide rendered at full size, maintaining the original aspect ratio.
- **Bottom section** — **Speaker Notes** (collapsible). Click to expand or collapse.


### Navigation

| Method | Action |
|  --- | --- |
| **Click a thumbnail** | Jump to that slide |
| **Left/Right arrow keys** | Previous/next slide |
| **Up/Down arrow keys** | Previous/next slide |
| **Home** | Jump to first slide |
| **End** | Jump to last slide |


A slide counter (e.g., "3 / 12") appears in the viewer to show your position.

If a presentation has no slides, the viewer shows: **"No slides found in this presentation"**.

## Document Viewer

The document viewer renders DOCX and DOC files as formatted HTML, preserving headings, paragraphs, lists, tables, and basic styling from the original document.

Loading state shows: **"Loading document..."**

## Image Viewer

Images display scaled to fit within the viewer area while maintaining their original aspect ratio. Supported formats include PNG, JPG, JPEG, GIF (including animated), SVG, WebP, BMP, and ICO.

## Code Viewer

The code viewer provides syntax-highlighted, read-only display of source code files with line numbers.

### Supported Languages

Python, JavaScript, TypeScript (including JSX/TSX), SQL, Shell scripts, YAML, JSON, XML, CSS, Ruby, Go, Rust, Java, C, C++, HTML, and more.

The viewer automatically detects the language from the file extension and applies appropriate syntax highlighting. Both light and dark themes are supported, matching your Studio appearance setting.

## Markdown Viewer

Markdown files (`.md`, `.markdown`) render as formatted content with headings, lists, code blocks, links, tables, and other standard markdown elements — the same renderer used for AI responses in chat.

## HTML Viewer

HTML files render in a **sandboxed iframe** within the viewer. The sandbox allows scripts to run but restricts same-origin access, navigation, and other potentially unsafe operations.

This is useful for previewing AI-generated HTML reports, dashboards, or visualizations directly in Studio.

## Journey Viewer

Journey YAML files (`.journey.yaml`, `.journey.yml`) render as an interactive journey visualization. You can click on stages, steps, and criteria to view details in a side panel.

See [Journey Canvas Visualization](/products/ai-studio/visualization/journey-canvas) for details on the journey visualization.

If the file cannot be parsed, the viewer shows: **"Unable to parse journey file."**

## Mermaid Viewer

Mermaid diagram files (`.mmd`, `.mermaid`) render as visual diagrams — flowcharts, sequence diagrams, class diagrams, and other Mermaid-supported diagram types.

The viewer automatically adapts to your current theme (light or dark).

## Plain Text Viewer

Files with `.txt`, `.log`, or unrecognized extensions display as pre-formatted monospace text. This serves as the fallback viewer when no specialized viewer matches the file type.

## Viewer Errors

If a file's content cannot be loaded, the viewer shows: **"Unable to load file content."**

For specific viewer errors:

| Viewer | Error Message |
|  --- | --- |
| **PDF** | "Failed to load PDF. The file may be corrupted or password-protected." |
| **Presentation** | "No slides found in this presentation" (if empty) |
| **Spreadsheet** | "Empty sheet" (if sheet has no data) |
| **Journey** | "Unable to parse journey file." |


## Mobile Viewers

On iOS, file previews render inline with the following considerations:

- **Code, CSV, Markdown, HTML, and plain text** render directly in the chat or preview screen
- **Large files** are truncated for performance, with a notice: "Preview truncated. Download to view full file."
- **HTML files** render in a sandboxed iframe with restricted permissions
- **Images** display inline, scaled to fit the screen width


Technical Note
Mobile previews truncate file content at 100,000 characters to prevent layout performance issues with the Hermes JavaScript engine. The full file is always available for download.

## Fullscreen Mode

### Web & Desktop

Click the **Fullscreen** button (expand icon) in the viewer toolbar to expand the viewer to fill the entire screen. Click **Exit fullscreen** (collapse icon) or press **Escape** to return to the normal layout.

## Differences from Treasure Studio Labs

| Feature | Treasure Studio Labs | Treasure AI Studio |
|  --- | --- | --- |
| **PDF viewer** | Basic PDF processing via AI | Built-in PDF viewer with zoom and page navigation |
| **Code viewer** | Monaco Editor (full IDE) | Syntax-highlighted read-only viewer |
| **Spreadsheet viewer** | *(not available)* | Built-in with sorting and multi-sheet support |
| **Presentation viewer** | *(not available)* | Built-in with thumbnails, keyboard nav, speaker notes |
| **HTML viewer** | *(not available)* | Sandboxed iframe viewer |
| **Journey viewer** | *(not available)* | Interactive journey visualization |
| **Fullscreen** | *(not available)* | Fullscreen toggle for all viewers |


Note
Treasure Studio Labs used a Monaco Editor (VS Code-style editor) for code files. Treasure AI Studio replaces this with a read-only syntax-highlighted viewer, since code editing happens through AI chat interactions rather than direct file editing.

## Verification

- [ ] Click a file in the Files panel and see it render in the appropriate viewer
- [ ] Zoom in/out on a PDF and see the page counter update
- [ ] Sort a spreadsheet column and see rows reorder


## Troubleshooting

| Issue | Solution |
|  --- | --- |
| "Unable to load file content" | The file may still be uploading or the server may be temporarily unavailable. Click the **Reload** button in the Files panel header and try again |
| PDF pages render blank | Large PDFs may take time to process. Wait for the loading indicator to complete. If blank pages persist, download the file and open in an external viewer |
| Spreadsheet columns overlap | Resize columns by dragging the column header borders. For very wide spreadsheets, use horizontal scrolling |


## Next Steps

- [File Upload & Download](/products/ai-studio/files/file-upload-download) — Upload files and download AI-generated outputs
- [Artifact Output](/products/ai-studio/files/artifacts) — AI-generated output files (PPTX, DOCX, PDF, XLSX)
- [AI Chat Interface](/products/ai-studio/chat/chat) — Working with file context in conversations