TFMKIT Logo
Code to Image

Snippet

Code Image

Create Beautiful Shots

Transform your code into stunning images for social media, documentation, and presentations. Customize themes, backgrounds, and export in multiple formats.

3

Export Formats

10

Backgrounds

Back to Home
Counter.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Loading editor...

import { useState } from 'react';

interface Props {
  initialCount?: number;
}

export default function Counter({ initialCount = 0 }: Props) {
  const [count, setCount] = useState(initialCount);

  return (
    <div className="counter">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}
100%
16px
10px 24px
Ctrl + E PNG
Ctrl + ⇧ + E SVG
Ctrl + ⇧ + C Copy

Create Stunning Code Shots

Perfect for sharing code on social media, documentation, presentations, or anywhere you need beautiful code visuals.

Free to Use
High Quality
Instant Export