Create Code Snippet
Customize your code snippet with various options and export it as an image.
Saved Backgrounds
No backgrounds saved yet. Add a background to see it here.
Custom Background
Solid
Gradient
RGB
HSL
HSV
CMYK
Saturation
Lightness
Brightness
Color Guide
Analogous
Monochromatic
Triad
Tetrad
HEX
R
G
B
A
Code Settings
Image Settings
Padding around the main image (10)
Show container background color
Border radius of the main image (14)
Frame
Select a frame style for your code snippet:
Frame
MacOS Window
Frame
Glassmorphism
Frame
Modern Minimal
Frame
Overlapping Boxes
Frame
Neumorphism
Frame
Gradient Border
Brand Information
index.tsx
Description
const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
return (
<div>
<h2>{item.name}</h2>
<p>Price: {item.price}</p>
<p>Quantity: {item.quantity}</p>
</div>
);
}

snipshots.app