🎨 Simplix Editor

A modern, lightweight browser-based image editor built with pure Vanilla JavaScript and HTML Canvas.

No frameworks • No libraries • Just clean JS logic

---

👀 Watch Now:

simplix.mp4

---

✨ Features

✅ Upload images directly in the browser
✅ Real-time image editing using HTML Canvas
✅ Multiple adjustable filters with live preview
✅ Ready-made presets & advanced Pro Presets
✅ Reset image edits instantly
✅ Download edited image as PNG
✅ Clean UI with smooth interactions

---

🧠 Filters Available

Each filter is dynamically generated using JavaScript:

Filter	Range
Brightness	0 – 200 %
Contrast	0 – 200 %
Saturation	0 – 200 %
Hue Rotation	0 – 360 deg
Blur	0 – 20 px
Grayscale	0 – 100 %
Sepia	0 – 100 %
Opacity	0 – 100 %
Invert	0 – 100 %

All filters are applied using the canvasCtx.filter pipeline for real-time rendering.

---

🎛 Presets (One-Click Effects)

🌈 Standard Presets

• Normal
• Vivid
• Cinematic
• Warm
• Cool
• Black & White
• Sepia Classic
• Faded
• Dramatic
• Vintage

These presets adjust multiple filter values together to create consistent looks.

---

🚀 Pro Presets (Advanced Looks)

Designed for cinematic & modern visuals:

🔥 Drama
🎬 Cinematic Dark
🤖 Cyberpunk
💡 Neon Glow
🧠 Sci-Fi
📸 Ultra 4K
🌈 HDR Pop
🕶 Dark Noir
🌌 Blade Runner
📲 Reels Boost

These presets simulate high-contrast, neon, cinematic, and HDR-style visuals.

---

⚙️ JavaScript Workflow (How It Works)

1️⃣ Image Upload

• User selects an image
• Image is drawn on <canvas>
• Canvas size auto-adjusts to image dimensions

2️⃣ Dynamic Filters

• Filters are defined as objects
• Sliders are generated dynamically
• On slider change → applyFilters() runs

3️⃣ Canvas Rendering

canvasCtx.filter = `
  brightness(...)
  contrast(...)
  saturate(...)
  hue-rotate(...)
  blur(...)
  grayscale(...)
  sepia(...)
  opacity(...)
  invert(...)
`;
canvasCtx.drawImage(image, 0, 0);