Mid-Core / System Creative Tool

Zen Image Editor

Web Application

01 — Project Overview

Zen Image Editor is a pure frontend application designed for quick, aesthetic adjustments to photos without heavy software overhead.

Full-Stack Developer

Stack

AstroTypeScriptCSSHTML

Goal

To create a lightweight, instant-load image editing tool that focuses purely on visual tuning.

User Issue

Standard image editors are often bloated with features, slow to load, and overwhelming for simple photo adjustments.

Astro Framework

Chosen for zero-JS by default, ensuring the fastest possible initial load time.

CSS Filters

Leveraged native browser CSS capabilities (blur, brightness, contrast) for high-performance rendering without WebGL.

Key Challenge

Synchronizing interactive range sliders with live CSS filter updates while maintaining smooth 60fps performance on high-resolution images.

snippet

document.documentElement.style.setProperty("--filter-blur", `${blurValue}px`);

Implemented a highly optimized reactive state layer that directly manipulates CSS Custom Properties, bypassing heavy DOM reflows entirely.

Impact

Achieved sub-100ms load times and seamless real-time image manipulation across both mobile and desktop devices.

Learnings

Native CSS filters are incredibly powerful and often underutilized for standard image tuning tasks.

What I'd do differently

Would explore WebAssembly for more complex masking and layer support.