Pixlux – HTML5 Client-Side Image Editing Library

A complete, self-contained browser-based image processing suite with 22 tools. No server, no backend, no dependencies. All processing runs entirely in the user’s browser using the native Canvas 2D API.

Key Facts

• 22 image processing tools in a single package
• Zero server required — static HTML, CSS, and JavaScript only
• No PHP, no database, no backend of any kind
• No build tools — no npm, no bundler, no configuration
• Ad-ready — two pre-wired monetization slots in one config file
• Fully responsive — four CSS breakpoints, works on desktop, tablet, and mobile
• Zero external JavaScript dependencies — vanilla JS throughout
• Privacy first — images never leave the browser, nothing is uploaded or transmitted

Technical Requirements

• Server: None required. Deploy to any static host (Netlify, Vercel, GitHub Pages, shared hosting, CDN) or open index.html directly from the file system.
• PHP: Not required. This is a pure HTML/CSS/JavaScript application.
• Database: Not required.
• JavaScript: Must be enabled in the browser.
• Canvas 2D API: Required — supported by all modern browsers.
• Internet connection: Required only for Google Fonts to render in their intended style. The app is fully functional without it using the system font fallback.

Browser Compatibility

• Google Chrome 80 and above
• Mozilla Firefox 78 and above
• Apple Safari 13 and above
• Microsoft Edge 80 and above

No browser plugins or extensions required. JavaScript must be enabled.

Features

Core Processing Tools

• Format Converter — Convert images between PNG, JPG, and WEBP with adjustable quality control
• Image Compressor — Reduce file size up to 90% with a live quality slider and real-time file size preview
• Image Resizer — Resize to exact pixel dimensions with optional aspect ratio lock
• Image Cropper — Freeform crop and fixed aspect-ratio crop modes
• Rotator and Flipper — Rotate by any angle; flip horizontally or vertically

Enhancement and Editing Tools

• Image Filters — Brightness, contrast, saturation, sepia, hue rotation, and invert with live preview
• Blur Tool — Gaussian blur with adjustable pixel radius via the Canvas filter API
• Sharpen Tool — Unsharp mask via a convolution kernel for edge detail enhancement
• Watermark Tool — Text and image watermarks with position, opacity, and tiling controls
• Border and Radius — Add custom borders, rounded corners, and background fill colors
• Color Overlay — Apply solid or gradient overlays with 9 blend modes including multiply, screen, and overlay
• Background Remover — Color-key background removal with an adjustable tolerance slider

Analysis and Utility Tools

• Metadata Viewer — Display file properties, pixel dimensions, and EXIF data
• Color Picker — Pixel-level color extraction returning values in HEX, RGB, and HSL formats
• Palette Generator — Dominant color extraction using the median-cut algorithm
• Format Preview — Side-by-side PNG, JPG, and WEBP quality comparison with file size display
• Image to Base64 — Encode any image to a Base64 data URI for HTML or CSS embedding
• Base64 to Image — Decode a Base64 string back to a downloadable image file
• Image Merge — Combine multiple images horizontally, vertically, or in a grid layout
• Bulk Processor — Batch convert, compress, or resize multiple images in a single operation
• Screenshot Tool — Clipboard image paste and canvas test-image generator

Studio

• Image Designer — Full-featured canvas paint studio with layers, shapes, text tools, fill tools, undo/redo history up to 40 steps, and export to PNG, JPG, or WEBP

Monetization and Ad Integration

Pixlux ships with two pre-wired ad slots. All ad code is contained in a single file — config/ads.js — so buyers can activate monetization by editing one location only. No JavaScript knowledge is required.

Ad Slots

• Banner Ad (728×90 leaderboard) — Appears at the top of every tool page and in three positions across the homepage
• Sidebar Ad (300×250 medium rectangle) — Appears at the bottom of the left navigation sidebar on every tool page. Also supports 160×600 wide skyscraper format

Compatible Ad Networks

• Google AdSense
• Media.net
• Ezoic
• Mediavine / Raptive
• Any provider that supplies a standard script and tag snippet

Responsive Design

All pages adapt to the user’s screen size through a CSS-only responsive system. No JavaScript is involved in layout adaptation.

• 1100px and below — Sidebar collapses; single-column content area activates
• 960px and below — Tool grid switches to a two-column layout; navigation simplifies
• 760px and below — Full mobile layout; hamburger navigation menu activates
• 480px and below — Single-column tool grid; compact card sizes; touch-friendly tap targets

Fonts

Google Fonts are loaded via CDN — not bundled locally. Each page loads Bricolage Grotesque, DM Sans, and DM Mono from fonts.googleapis.com. An active internet connection is required for the fonts to render in their intended style. The toolkit falls back to the system sans-serif stack automatically when the CDN is unavailable. To use fonts offline, download the .woff2 files from Google Fonts, place them in assets/fonts/, remove the CDN link tags, and add @font-face declarations to assets/css/style.css.

Customization

All shared components — header, footer, sidebar, and ad slots — are defined in the config/ directory. Edit one file and the change propagates to every page automatically.

• config/header.js — Brand name, logo, navigation links, and call-to-action button
• config/footer.js — Full site footer
• config/tool-page-footer.js — Compact footer bar on every tool page
• config/ads.js — Both ad slot variables with visible placeholders — the only file needed to activate ads

All colors, typography, and spacing are CSS custom properties in assets/css/style.css under :root. Update a token once and every page reflects the change.

Getting Started

1. Extract the ZIP archive to your web root or any local directory
2. Open index.html in any modern browser — all 22 tools are immediately functional
3. To activate ads, open config/ads.js and replace the placeholder blocks with your ad network code
4. To rebrand, edit config/header.js and config/footer.js with your brand name and links

Contact & Support

For technical questions, pre-sale inquiries, or custom development: saadielab@gmail.com