SnapStyle

A sleek, ad-free screenshot editor with features like direct clipboard pasting, seamless background changes, and high-quality exports, all within a user-friendly dark UI. Perfect for quick, quality image enhancements.

Tech Stack

• Framework: Next.js
• Styling: Tailwind CSS
• UI Framework: shadcn/ui

Features

• Frame: Adjust the frame around the screenshot, including frame dimenstions and color.

• Corner Radius: Adjust the roundness of the corners for the frame and sreenshot with the radius value.

• Stroke: Add and customize the border around the screenshot and frame, including stroke width and color.

• Background: Customize the background behind the screenshot with the following options:

  • Transparent background
  • Solid color background with a color picker
  • Gradient background with a gradient editor
  • Image background with an image uploader

• Pattern Overlays: Apply pattern overlays on the background, including options to select pattern type and adjust pattern opacity.

• Transformations: Transform the screenshot with various effects, including:

  • XY Coordinates: Move the screenshot along the X and Y axes.
  • XY Perspective: Apply perspective transformations.
  • Scale: Resize the screenshot proportionally.

• Alignment: Align the screenshot within the frame with options to align left, center, right, top, middle, or bottom.

• Crop Window: Crop the screenshot to a specific area with options to drag and select the area or use predefined aspect ratios.

• Typography: Add and customize text over the screenshot, including options for:

  • Font family selection
  • Font size adjustment
  • Font color picker
  • Text alignment (left, center, right)

Installation

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.