DocuNext — A Sleek, Minimal Documentation Platform Built with Next.js & MDX 🚀

Maher Gallaoui — Sat, 06 Dec 2025 11:06:55 +0000

If you’ve ever wanted a documentation system that is fast, flexible, and easy to maintain, let me introduce you to DocuNext — an open-source documentation framework I built using Next.js, MDX, and Tailwind CSS.

It combines the simplicity of Markdown with the power of React, giving you a docs solution that is both lightweight and fully customizable.

✨ What is DocuNext?

DocuNext is a modern documentation platform that includes:

MDX support — write Markdown and embed React components anytime
Nested sidebar navigation — ideal for scaling large documentation
Automatic Table of Contents — makes long pages easy to navigate
Previous / Next page navigation — improves reading flow
Client-side full-text search (FlexSearch) — instant results without backend
Dark / Light mode — with theme tokens and full customization
Static export support — deploy anywhere (GitHub Pages, Netlify, Vercel, etc.)

You can explore the repository here:

👉 https://github.com/gallaouim/Docunext

🎯 Why I Built DocuNext

I needed a documentation system that was:

Simple
MDX-powered
Lightweight
Themeable
Easy to deploy anywhere
Not as heavy or locked-in as existing documentation frameworks

Everything out there was either too complex, too tied to a specific ecosystem, or not flexible enough.

So I built DocuNext, focused on:

Clean architecture
Easy writing experience
Great performance
React-powered extensibility
Zero server requirements (static export only)

Remove Image Backgrounds in the Browser - No Backend Needed 🚀

Maher Gallaoui — Fri, 28 Nov 2025 21:16:47 +0000

Introduction

Removing backgrounds from images is a common need. but many solutions require uploading your image to a server. What if you could run it fully in the browser, with no backend, no API keys, and full privacy? That’s exactly what this project does.

Using Transformers.js, I built a background removal web app that runs client-side. The model runs locally in your browser, and the processed image never leaves your device.

In this post, I walk you through it step by step, from project setup to UI, and finally to background-removal logic.

💻 You can access the full source code on GitHub and try it yourself: bg-remover Repository

Prerequisites

Node.js (v16+ recommended)
npm or yarn
A modern browser (for WASM or WebGPU — depending on your config)

Initialise the project with Vite

To get started quickly, I used Vite to scaffold a minimal web project:

npm create vite@latest bg-remover -- --template vanilla
cd bg-remover
npm install

I’ll assume vanilla JS, HTML and CSS for simplicity.

After installing the dependencies, you can now start the server with

npm run dev

2. Install Transformers.js

Transformers.js brings the power of Hugging Face,running segmentation, classification directly in the browser using ONNX runtime under the hood. So you have to add the NPM module with

npm install @huggingface/transformers

3. Build the HTML & UI

We want get into the details Here as it's actually a very simple UI that you can see here , you will find below the links to the html and style files

HTML : index.html
Style: Style.css

4. Main Logic: Load model, process image, remove background

Step 1: Import Transformers.js modules

AutoProcessor → handles preprocessing of your input image to the format the model expects.
AutoModel → loads the actual model that will perform the task (background removal / segmentation). Basically, the processor prepares the image, the model predicts the foreground mask.

Step 2: Initialize the Model and Processor

In this step, we load the pretrained background-removal model and its processor. Both are configurable, which means you can tweak preprocessing settings, input size, normalization, etc.

model_type: "custom" → allows you to load models that don’t include a standard config.json.
do_normalize / image_mean / image_std → normalize pixel values for better model accuracy.
do_resize / size → resize input images to the model’s expected dimensions.
do_rescale / rescale_factor → scale pixel values from 0–255 to 0–1.
resample → resizing algorithm

Key idea: By changing these config values, you can adapt the preprocessing to different models or custom training data without changing the model code itself

Step 3: Listen for image uploads

We attach a listener to the file input element (<input type="file">)that triggers when the user selects an image. An Image object is created from the file, using URL.createObjectURL(file) to generate a temporary local URL without uploading anything. Once the image is loaded (img.onload), we call predict() with the image to perform background removal.

Step 4: Remove the background

Once the user uploads an image, we can preprocess it, run the model, and apply the background mask:

Preprocessing: Converts the uploaded image into the format expected by the model.
Prediction: The model outputs a mask indicating the foreground.
Post-processing: The mask is resized to the original image size and applied as an alpha channel to remove the background.
Display: The final image is drawn on a <canvas>for the user to see.

5. Try It Yourself

Clone the repository and run it locally:

git clone https://github.com/gallaouim/bg-remover.git
cd bg-remover
npm install
npm run dev

Upload an image and watch the background disappear directly in your browser!

✅ Summary

You’ve learned how to build a fully client-side background removal app using Transformers.js. The key steps are: load a model, preprocess the image, predict a mask, and render the final image on a canvas

DEV Community: Maher Gallaoui