Skip to content

moayaan1911/img0

Repository files navigation

👨‍💻 About the Developer

Mohammad Ayaan Siddiqui

Assalamualaikum guys! 🙌 This is Mohammad Ayaan Siddiqui (♦moayaan.eth♦). I’m a Full Stack Blockchain Developer , Crypto Investor and MBA in Blockchain Management with 2 years of experience rocking the Web3 world! 🚀 I’ve worn many hats:

  • Research Intern at a Hong Kong-based firm 🇭🇰
  • Founding Engineer at a Netherlands-based firm 🇳🇱
  • Full Stack Intern at a Singapore-based crypto hardware wallet firm 🇸🇬
  • Blockchain Developer at a US-based Bitcoin DeFi project 🇺🇸
  • PG Diploma in Blockchain Management from Cambridge International Qualifications (CIQ) 🇬🇧
  • MBA in Blockchain Management from University of Studies Guglielmo Marconi, Italy 🇮🇹

Let’s connect and build something epic! Find me at moayaan.com 🌐

If you liked this project, please donate to Gaza 🇵🇸 UNRWA Donation Link

Happy coding, fam! 😎✨


img0.xyz

Minimalist Image Studio in your browser.

Next.js TypeScript Client-side No Signup Open Source

img0.xyz is a privacy-first image toolkit focused on fast, clean, browser-based workflows. It is non-profit, open-source, and community-driven.

Quick Links

Table of Contents

What Is Live Right Now

Landing Experience

  • Minimal landing with grouped tool cards
  • Tool search bar in navbar (filters cards instantly)
  • Light/Dark mode toggle (persists via next-themes)
  • External quick links: website, donate, GitHub

Implemented Tools

1) Crop Image (/tools/crop-image)
  • Upload via click or drag/drop
  • Free crop + aspect presets: 1:1, 4:3, 16:9, 9:16
  • Preset crop box can be moved around image before exporting
  • Export formats: PNG, JPG, WebP
  • Quality slider for lossy outputs
  • Output preview + downloadable file
2) Format Converter (/tools/format-converter)
  • Upload via click or drag/drop
  • Convert to: PNG, JPG, WebP, ICO (favicon)
  • ICO size options: 16, 32, 48, 64, 128, 256
  • Quality control for lossy output formats
  • Output preview + downloadable file
3) Image Compressor (/tools/image-compressor)
  • Upload via click or drag/drop
  • Output formats: JPG, WebP, PNG
  • Quality slider for lossy formats
  • Resolution scale slider (10% to 100%)
  • Compression result with saved-size stats
4) Rotate & Flip (/tools/rotate-flip)
  • Upload via click or drag/drop
  • Rotation presets: , 90°, 180°, 270°
  • Flip options: Horizontal, Vertical
  • Live preview before export
  • Export formats: PNG, JPG, WebP
5) QR Code Generator (/tools/qr-code-generator)
  • Input text or URL
  • Size + margin sliders
  • Foreground/background color controls
  • Transparent background option
  • Error correction levels: L, M, Q, H
  • Download formats: PNG, JPG
6) Remove Background (/tools/remove-background)
  • Upload image and run AI-based background removal
  • Runs fully in browser (no backend uploads)
  • Transparent result preview with checkerboard
  • Download transparent output as PNG
7) Change Background Color (/tools/change-background-color)
  • Pick any solid background color
  • No AI or background-removal step in this tool
  • Two-stage preview: original and color-applied
  • Download final image in PNG, JPG, or WebP
8) Blur Background (/tools/blur-background)
  • Keeps subject sharp while blurring background
  • Adjustable blur strength slider
  • Preview includes original, cutout, and final output
  • Export in JPG, PNG, or WebP
9) Image to PDF (/tools/image-to-pdf)
  • Upload one or multiple images
  • Reorder pages before export
  • Auto fit inside page (no crop)
  • Fixed A4 output
  • Right-side PDF preview + download
10) PDF to Image (/tools/pdf-to-image)
  • Upload PDF and extract all pages
  • Output formats: PNG, JPG, WebP
  • Quality slider for lossy formats
  • Render scale control for resolution
  • Per-page download + download all
11) Circular Crop (/tools/circular-crop)
  • Upload via click or drag/drop
  • Adjustable circle radius
  • Horizontal and vertical position sliders
  • Export in PNG, JPG, and WebP
  • Transparent output support in PNG and WebP
12) Rounded Corners (/tools/rounded-corners)
  • Upload via click or drag/drop
  • Adjustable corner roundness slider
  • Live radius preview before export
  • Export in PNG, JPG, and WebP
  • Transparent corner support in PNG and WebP
13) Add Text Overlay (/tools/add-text-overlay)
  • Multi-line text input with auto-wrap support
  • Font family, weight, size, and line-height controls
  • Text color, opacity, and full shadow controls
  • Horizontal + vertical alignment with X/Y offset sliders
  • Export in PNG, JPG, and WebP
14) Add Watermark (/tools/add-watermark)
  • Add watermark as text or logo image
  • Position presets with margin and X/Y offset
  • Opacity and rotation controls
  • Text styling: font family, weight, size, color, shadow
  • Export in PNG, JPG, and WebP
15) Meme Generator (/tools/meme-generator)
  • Top and bottom meme caption inputs
  • Classic meme text styling with stroke + shadow
  • Font family, size, weight, line-height, and margin controls
  • Independent top/bottom Y offset sliders
  • Export in PNG, JPG, and WebP
16) Remove Watermark (/tools/remove-watermark)
  • Drag-select target area on image
  • Fine control for area X/Y/width/height
  • Patch source direction: auto, above, below, left, right
  • Feather blur and multi-pass blending
  • Export in PNG, JPG, and WebP
17) Adjust Brightness (/tools/adjust-brightness)
  • Brightness slider from -100 to +100
  • Real-time output generation on apply
  • Export in PNG, JPG, and WebP
18) Adjust Contrast (/tools/adjust-contrast)
  • Contrast slider from -100 to +100
  • Original vs filtered preview
  • Export in PNG, JPG, and WebP
19) Adjust Saturation (/tools/adjust-saturation)
  • Saturation slider from -100 to +100
  • Quickly mute or boost image colors
  • Export in PNG, JPG, and WebP
20) Hue Shifter (/tools/hue-shifter)
  • Hue rotation slider from -180° to +180°
  • Fast global color-tone shift
  • Export in PNG, JPG, and WebP
21) Grayscale Converter (/tools/grayscale-converter)
  • One-click black-and-white conversion
  • Clean side-by-side preview
  • Export in PNG, JPG, and WebP
22) Sepia Filter (/tools/sepia-filter)
  • Instant warm vintage sepia effect
  • Side-by-side preview
  • Export in PNG, JPG, and WebP
23) Invert Colors (/tools/invert-colors)
  • One-click color inversion
  • Negative-style visual output
  • Export in PNG, JPG, and WebP
24) Color Replacement (/tools/color-replacement)
  • Pick source color and destination color
  • Tolerance + softness controls
  • Export in PNG, JPG, and WebP
25) Auto Enhance (/tools/auto-enhance)
  • One-click enhancement pipeline
  • Adjustable enhance strength slider
  • Balanced brightness/contrast/saturation boost
26) Replace Background (/tools/replace-background)
  • Upload source image and new background image
  • Keeps subject in front using in-browser cutout
  • Background fit modes: cover, contain, stretch
  • Background scale and X/Y position controls
  • Export in JPG, PNG, or WebP

Tool Status Tracker

Below is the current roadmap used on the landing page.

Core Image Manipulation (5/5 live)
  • Crop Image
  • Resize Image
  • Rotate & Flip
  • Image Compressor
  • Format Converter
Background Tools (4/4 live)
  • Remove Background
  • Change Background Color
  • Blur Background
  • Replace Background
Color & Filters (9/9 live)
  • Adjust Brightness
  • Adjust Contrast
  • Adjust Saturation
  • Hue Shifter
  • Grayscale Converter
  • Sepia Filter
  • Invert Colors
  • Color Replacement
  • Auto Enhance
Shapes & Overlays (6/6 live)
  • Circular Crop
  • Rounded Corners
  • Add Text Overlay
  • Remove Watermark
  • Add Watermark
  • Meme Generator
Advanced Tools (3/6 live)
  • Image to PDF
  • PDF to Image
  • QR Code Generator
  • Barcode Reader
  • Histogram View
  • Noise Reduction

Tech Stack

  • Next.js (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • next-themes
  • @imgly/background-removal
  • qrcode
  • jspdf
  • pdfjs-dist
  • Pure browser-side image processing (Canvas APIs)

Project Structure

app/
  layout.tsx
  page.tsx
  globals.css
  robots.ts
  sitemap.ts
  tools/
    adjust-brightness/page.tsx
    adjust-contrast/page.tsx
    adjust-saturation/page.tsx
    auto-enhance/page.tsx
    color-replacement/page.tsx
    grayscale-converter/page.tsx
    hue-shifter/page.tsx
    invert-colors/page.tsx
    sepia-filter/page.tsx
    add-watermark/page.tsx
    add-text-overlay/page.tsx
    circular-crop/page.tsx
    meme-generator/page.tsx
    remove-watermark/page.tsx
    rounded-corners/page.tsx
    crop-image/page.tsx
    format-converter/page.tsx
    blur-background/page.tsx
    replace-background/page.tsx
    change-background-color/page.tsx
    image-compressor/page.tsx
    image-to-pdf/page.tsx
    pdf-to-image/page.tsx
    qr-code-generator/page.tsx
    remove-background/page.tsx
    rotate-flip/page.tsx

components/
  layout/
    LandingHeader.tsx
    LandingFooter.tsx
    LandingPageClient.tsx
    ThemeProvider.tsx
    ThemeToggle.tsx
  tools/
    ColorFilterTool.tsx
    AddWatermarkTool.tsx
    AddTextOverlayTool.tsx
    CircularCropTool.tsx
    MemeGeneratorTool.tsx
    RemoveWatermarkTool.tsx
    RoundedCornersTool.tsx
    CropImageTool.tsx
    FormatConverterTool.tsx
    BlurBackgroundTool.tsx
    ReplaceBackgroundTool.tsx
    ChangeBackgroundColorTool.tsx
    ImageCompressorTool.tsx
    ImageToPdfTool.tsx
    PdfToImageTool.tsx
    QRCodeGeneratorTool.tsx
    RemoveBackgroundTool.tsx
    RotateFlipTool.tsx

Local Setup

npm install
npm run lint
npm run build
npm run dev

Open: http://localhost:3000

NPM Scripts

  • npm run dev - start development server
  • npm run lint - run ESLint
  • npm run build - create production build
  • npm run start - run production server

Product Constraints

  • No login/signup
  • No paid API lock-in
  • Client-side processing first
  • No third-party image upload requirement
  • Keep UI minimal and fast

SEO and Discovery

  • Central metadata + JSON-LD in app/layout.tsx
  • Dynamic sitemap in app/sitemap.ts
  • Robots configuration in app/robots.ts

Contributing

Contributions are welcome. Start with:

  1. Read CONTRIBUTION.md
  2. Pick an unshipped tool from the tracker above
  3. Ship small, testable increments

License

No license file is committed yet. Add a license before wide redistribution.

About

Minimalist Image Studio right in your browser

Topics

Resources

Stars

Watchers

Forks

Contributors