# Pixxy — Full Documentation

> Pixxy is a free web-based screenshot capture and editor application at pixxyapp.com. It combines screenshot capture, code-to-image rendering, tweet capture, and a full canvas editor with annotation tools. The site also hosts free utility tools for QR codes, image optimization, and document conversion. No signup required.

## Overview

Pixxy lets users create professional screenshot mockups without design skills. It supports three capture modes: website screenshots by URL, code snippet rendering with syntax highlighting, and tweet capture by URL. The result loads into a Fabric.js canvas editor where users can add annotations, device frames, backgrounds, 3D perspective transforms, and export the final image.

## Core Tools

### Screenshot Editor
URL: https://pixxyapp.com/screenshot-editor

A Fabric.js canvas editor for annotating and styling screenshots. Features:
- Annotation tools: text, freehand drawing, rectangles, circles, arrows
- Device frames: iPhone 15/16/17 Pro, Galaxy S24, Pixel 9, iPad Pro/Air, MacBook Pro/Air, browser windows (macOS, Safari, Windows, Minimal)
- Backgrounds: solid colors, linear/radial/mesh gradients, patterns, images (via Unsplash), noise overlay
- Screenshot styling: padding, border radius, shadow, reflection, inset, rotation, 3D perspective tilt
- Export as PNG, JPG, WebP, or SVG at 1x or 2x resolution, or copy to clipboard
- Undo/redo history, blur and pixelate privacy tools
- Templates: save and reuse editor configurations

### Website Screenshot
URL: https://pixxyapp.com/website-screenshot

Captures full-page screenshots of any public website via Puppeteer.
- Viewport presets: Desktop (1920x1080), Tablet (768x1024), Mobile (375x812), or custom dimensions
- Full-page capture with automatic scrolling
- Stealth mode to bypass basic bot detection
- Output: high-resolution PNG

### Code to Image
URL: https://pixxyapp.com/code-to-image

Converts code snippets into syntax-highlighted images.
- 100+ programming languages via Shiki syntax highlighter
- Multiple themes: Dracula, One Dark Pro, GitHub Dark, and more
- Styles: default, twitter-card, slide-deck, terminal
- Customizable font size, padding, background, and window chrome

### Tweet Screenshot
URL: https://pixxyapp.com/fake-tweet-maker

Captures tweet screenshots from any tweet URL.
- Extracts just the tweet content (no browser chrome)
- Clean, focused image ready for sharing or editing

## Free Utility Tools

### QR Code Generator
URL: https://pixxyapp.com/qr-code-generator
Generate QR codes for any URL or text. Client-side generation, no data sent to servers.

### HTML to PDF
URL: https://pixxyapp.com/html-to-pdf
Convert any public webpage to a downloadable PDF. Paste a URL and get an A4-formatted PDF with full CSS support.

### Webpage to Markdown
URL: https://pixxyapp.com/webpage-to-markdown
Extract any webpage's content as clean Markdown. Extracts article/main content automatically.

### HTML to Markdown
URL: https://pixxyapp.com/html-to-markdown
Convert HTML code to Markdown directly in the browser. Client-side conversion using Turndown.

### Image Resizer
URL: https://pixxyapp.com/resize-image
Resize images to any dimension or social media preset sizes.

### Image Compressor
URL: https://pixxyapp.com/compress-image
Reduce image file size with adjustable quality settings.

### Image Converter
URL: https://pixxyapp.com/convert-image
Convert between PNG, JPEG, and WebP image formats.

### SVG to PNG
URL: https://pixxyapp.com/svg-to-png
Convert SVG files or SVG code to high-resolution PNG images.

### Color Palette Extractor
URL: https://pixxyapp.com/color-palette-extractor
Extract dominant colors from any uploaded image.

### JSON Formatter
URL: https://pixxyapp.com/json-formatter
Format, validate, and minify JSON instantly in the browser. Supports configurable indentation (2 spaces, 4 spaces, tabs), key sorting, and minification. Client-side only.

### JSON Beautifier
URL: https://pixxyapp.com/json-beautifier
Beautify JSON with syntax highlighting and an interactive tree view. Color-coded keys, strings, numbers, and booleans. Collapsible nodes for exploring large JSON structures. Client-side only.

## API Endpoints

### POST /api/screenshot
Captures a full-page screenshot of a URL.
- Input: `{ url, viewport?: { width, height } }`
- Output: `{ imageUrl }` (S3 presigned URL) or `{ dataUri }` (base64 fallback)
- Rate limit: 5 requests per minute

### POST /api/code-to-image
Renders a code snippet as an image.
- Input: `{ code, language?, theme? }`
- Output: `{ imageUrl }` or `{ dataUri }`
- Rate limit: 15 requests per minute

### POST /api/tweet-to-image
Captures a tweet as an image.
- Input: `{ url }` (tweet URL)
- Output: `{ imageUrl }` or `{ dataUri }`
- Rate limit: 10 requests per 5 minutes

### POST /api/html-to-pdf
Converts a webpage to PDF.
- Input: `{ url }`
- Output: PDF file (application/pdf)
- Rate limit: 5 requests per minute

### POST /api/webpage-to-markdown
Extracts webpage content as Markdown.
- Input: `{ url }`
- Output: `{ markdown }`
- Rate limit: 5 requests per minute

## Blog

URL: https://pixxyapp.com/blog

Tips, tutorials, and guides on screenshots, code sharing, and visual content creation. Topics include code-to-image workflows, annotated bug reports, tweet screenshot creation, developer social media strategies, and screenshot tool comparisons.

## Authentication

- Optional Google OAuth via Supabase
- Core features work without login
- No signup required for any tool

## Tech Stack

- Next.js (App Router), React, TypeScript
- Fabric.js 7 for canvas editing
- Puppeteer for screenshot/PDF capture
- Shiki for syntax highlighting
- Three.js for 3D perspective transforms
- Supabase for optional authentication
- S3-compatible storage for screenshot hosting

## Links

- Website: https://pixxyapp.com
- Summary: https://pixxyapp.com/llms.txt
- Blog: https://pixxyapp.com/blog