TSX code to image

Create an image of a typed React component straight from your TSX. Prop interfaces, JSX, and hooks each get distinct highlighting, so a typed component reads as cleanly in the picture as it does in your IDE. The image is built on the page itself, so nothing about your component is sent anywhere.

What you can do with a TSX snippet

Document a typed component with its props in view
Share a well-typed hook for a code review or PR description
Illustrate a pattern in a TypeScript-flavored React talk

A TSX example

Here it is in the Ocean theme — one of dozens. Open it in the editor to try others, tweak the background, and export, or paste your own TSX in its place.

Button.tsx

1interface Props {
2  label: string;
3  onClick: () => void;
4}
5 
6const Button = ({label, onClick}: Props) => (
7  <button onClick={onClick}>{label}</button>
8);

Your code stays on your device

gilika is built to render your TSX into an image right in your browser, so the snippet never has to be uploaded to a server. See exactly how.

Open the editor with TSX