Pixlux | HTML5 Client-Side Image Editing Library - 1

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

Extract the ZIP archive to your web root or any local directory
Open index.html in any modern browser — all 22 tools are immediately functional
To activate ads, open config/ads.js and replace the placeholder blocks with your ad network code
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