Skip to content
Last updated

File Viewers

WebDesktopMobile

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)
  • A file in the current chat session (uploaded or AI-generated)

Supported Viewers

File TypeExtensionsViewerKey Features
PDFpdfPDF ViewerZoom, page navigation, fit-to-width
Spreadsheetxlsx, xls, csv, tsvSpreadsheet ViewerSheet tabs, column sorting, resizable columns
Presentationpptx, pptPresentation ViewerSlide thumbnails, keyboard navigation, speaker notes
Documentdocx, docDocument ViewerRendered HTML
Imagepng, jpg, jpeg, gif, svg, webp, bmp, icoImage ViewerScaled to fit
Codejs, jsx, ts, tsx, py, sql, sh, yaml, json, xml, css, rb, go, rs, java, c, cppCode ViewerSyntax highlighting, line numbers
Markdownmd, markdownMarkdown ViewerRendered markdown
HTMLhtml, htmHTML ViewerSandboxed iframe
Journey*.journey.yaml, *.journey.ymlJourney ViewerInteractive visualization
Mermaidmmd, mermaidMermaid ViewerRendered diagrams
Plain Texttxt, log, and any unrecognized extensionText ViewerMonospace, pre-formatted

PDF Viewer

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

Controls

ControlDescription
Zoom in / Zoom outIncrease or decrease zoom level in 25% steps
Zoom percentageDisplays current zoom level (range: 50% to 300%)
Fit to widthAutomatically scale the document to fit the viewer width
Page counterShows "Page X of Y" as you scroll through the document

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

FeatureDescription
Sheet tabsFor multi-sheet workbooks (XLSX/XLS), tabs appear at the bottom to switch between sheets
Column sortingClick a column header to sort ascending; click again for descending. Numeric values sort numerically, text sorts alphabetically
Resizable columnsDrag column borders to adjust width
ScrollingHorizontal 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 sectionSpeaker Notes (collapsible). Click to expand or collapse.
MethodAction
Click a thumbnailJump to that slide
Left/Right arrow keysPrevious/next slide
Up/Down arrow keysPrevious/next slide
HomeJump to first slide
EndJump 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 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:

ViewerError 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

FeatureTreasure Studio LabsTreasure AI Studio
PDF viewerBasic PDF processing via AIBuilt-in PDF viewer with zoom and page navigation
Code viewerMonaco 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

IssueSolution
"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 blankLarge 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 overlapResize columns by dragging the column header borders. For very wide spreadsheets, use horizontal scrolling

Next Steps