UtilHub

Code to Image

Transform any code snippet into a gorgeous shareable image with syntax highlighting, multiple themes, custom backgrounds, and window chrome. Perfect for social media and documentation.

typescript
"color:#c792ea">async "color:#c792ea">function fetchUser(id: string) {
  "color:#c792ea">const response = "color:#c792ea">await fetch(`/api/users/${id}`);

  "color:#c792ea">if (!response.ok) {
    "color:#c792ea">throw "color:#c792ea">new Error(`HTTP ${response.status}`);
  }

  "color:#c792ea">const user = "color:#c792ea">await response.json();
  "color:#c792ea">return user;
}

Frequently Asked Questions

How do I export as an image?

Click 'Download PNG' to save the rendered code as a high-resolution PNG image (2x scale). All rendering happens in your browser via the Canvas API — no external service needed.

Can I share the image on social media?

Yes — code screenshots are great for Twitter/X, LinkedIn, and developer communities. Use a 16:9 aspect ratio background for best social card display. Turn off the gradient background for a cleaner transparent-background style.