Viewable File Formats in ChatGPT · Digital Roadmap AI Academy

Holger Morlok

9d • AI Hacks/ Tools

Viewable File Formats in ChatGPT

Most people have no idea what can be displayed in ChatGPT and what can't.

Since this isn't mention anywhere, I'll put it in here:

-> Chat = inline message pane, Canvas = side panel:

📃Plain text & Markdown

Chat: renders normally

Canvas: renders normally (type: document)

🎨Images (PNG/JPG/GIF)

Chat: displayed inline

Canvas: inline in document or via img tag in code/html or code/react.

📐SVG (as file/image)

Chat: shown as image

Canvas: image or inline via in code/html or code/react.

📐Raw SVG markup

Chat: shown as code only;

Canvas: rendered when embedded in code/html or code/react.

📰HTML — Chat: shown as code only

Canvas: rendered with live preview in code/html.

💻CSS + JavaScript

Chat: not executed

Canvas: executed in code/html preview.

React components

Chat: code only

Canvas: interactive preview in code/react (default export required).

Libraries (Tailwind, shadcn/ui, lucide-react, recharts, Framer Motion)

Chat: n/a; Canvas: supported in code/react.

🧜Mermaid diagrams

Chat: may not render

Canvas: reliable via code/html or code/react by loading Mermaid.

➕Math / LaTeX — Chat

basic inline math sometimes

Canvas: use KaTeX/MathJax in code/html or code/react.

🎥🔉Audio/Video

Chat: usually links only (Youtube LInks can also be embedded as live play, though)

Canvas: HTML5 / in code/html or code/react.

🌐WebGL / Canvas 2D

Chat: no interactive support

Canvas: supported via code/html or code/react (e.g., three.js).

📕PDFs

Chat: link only

Canvas: no native viewer—link or render pages as images/HTML.

📃Long docs / code files

Chat: awkward to scroll

Canvas: ideal for long, printable docs and iterative code editing.

Bonus tips:

So, if you want to display more "complicated" or things that are normally unsupported, tell it to create html code and embed it there, etc.

P.S.: If you want to export any doc easily as PDF, Markdown or DOCX, just tell ChatGPT to open a canvas and put it there. Or, alternatively, tell it to open a canvas and write "Hello" or whatever. Then you can copy the text yourself and paste there. 😀

7 comments