← Back to Tools

🖼️ TSX Thumbnail Renderer

Paste a Remotion composition (.tsx) and render it to PNG or JPG — right in your browser. No Node.js, no install.

Upload .tsx file Choose file No file chosen

Or paste TSX code

Output dimensions

Auto-detected from compositionConfig if present.

Preview —

Render to see the preview

How it works

• Babel transpiles the TSX (TypeScript + JSX) in your browser

• Remotion's AbsoluteFill, Sequence, and hooks are polyfilled

• React renders the component at exact pixel dimensions

• html2canvas captures and exports as PNG or JPG

Nothing is sent to our servers — all processing is local.

0 thumbnails rendered so far

How to use this tool

1 Paste your TSX or React component code into the editor.

2 Click Render to generate a PNG thumbnail of the component.

3 Adjust styles and re-render until you are happy with the result.

4 Download the thumbnail for use in documentation, social media, or presentations.

Frequently asked questions

What is TSX?

TSX is TypeScript with JSX syntax, the file format used for React components with TypeScript type checking. It lets you write HTML-like syntax directly in TypeScript files.

What libraries are available in the sandbox?

The renderer includes React and Tailwind CSS. Custom libraries or imports from node_modules are not available in the isolated sandbox.

What size is the output thumbnail?

The default canvas is optimized for Open Graph images at 1200x630 pixels, which is the recommended size for social media sharing.

Can I use this to preview components without setting up a project?

Yes. Paste a self-contained component and see an instant visual preview without installing Node.js, npm, or any build tools.