Renderers

A renderer turns a file into an interactive view. CanvasMesh ships 9 built-in renderers and picks one per canvas based on the file extension.

Built-in renderers

Renderer	Extensions	What it does
html	html, htm	Sandboxed HTML with strict CSP
markdown	md, markdown	GitHub-style Markdown
react	jsx, tsx	In-browser Babel transform for React components
svg	svg	Inline SVG
json	json	Collapsible JSON tree
text	txt, log, js, ts, css, py, go, rs, java, sh, yaml, yml, toml	Syntax-highlighted code
image	png, jpg, jpeg, gif, webp, bmp, ico	Image viewer with zoom/pan
notebook	ipynb	Jupyter notebook renderer
none	(all others)	Download-only, no preview

See Renderer types reference for a complete mapping.

Override the renderer

You might want to render a .txt file as Markdown, or a .json file as plain text. Pass render on create or update:

await client.create({
  title: 'README',
  ext: 'txt',
  content: '# Hello',
  render: 'markdown',
});

Valid values: none, html, markdown, react, svg, json, text, image, notebook.

Sandbox

Every rendered canvas runs inside an iframe on an isolated subdomain (render-<slug>-<hash>.canvasmesh.dev) with:

• Content-Security-Policy restricting network, script, and frame sources.
• No access to cookies from the main canvasmesh.app domain.
• Cross-Origin-Opener-Policy: same-origin.

This means canvases can execute JS (e.g. React, HTML) safely — even untrusted user content cannot access your account.

Unknown types

If the extension doesn’t match any renderer, the canvas is created with the none renderer — users see a download button but no preview.

See also

• Renderer types reference
• Create canvases