中文 | English

TraceMark

Trace the source · Mark the truth

A clean and efficient desktop image watermark tool supporting three layout modes: tiled, centered, and corner. Real-time preview with one-click export.

AI-generated chat records and social media screenshots are becoming increasingly realistic. It recently occurred to me that adding a watermark before sharing AI images could help prevent negative impacts, so I built this AI watermark tool. Of course, you can use other watermark content as well.

Features

• Three Watermark Layouts — Tiled / Centered / Corner for different use cases
• Real-time Preview — All parameter changes are reflected instantly
• Drag to Reposition — Freely adjust watermark position with mouse dragging
• Fine-grained Controls — Opacity, rotation, font size, font weight, color, and tiling spacing
• High-quality Export — Lossless PNG export at original image resolution
• Fully Local — No image uploads, your privacy is protected

Screenshot

Tech Stack

Technology	Purpose
React 19	UI Framework
Vite 8	Build Tool
Tailwind CSS 4	Styling
Lucide React	Icons
Neutralino.js	Desktop Runtime

Quick Start

Prerequisites

• Node.js 18+
• The project uses Neutralino.js 6.7.0 runtime. Platform-specific binaries are automatically downloaded on the first build.

Installation

npm install

Development

npm run dev

Starts the Vite dev server. You can debug the frontend in a browser (desktop-native features excluded).

To run inside a Neutralino desktop window, open a second terminal:

npx neu run

Build & Package

# Step 1: Build frontend assets
npm run build

# Step 2: Package desktop app
npx neu build

Build output is in the dist/ directory:

dist/
├── index.html
├── assets/
│   ├── index-xxx.js
│   └── index-xxx.css
└── TraceMark/
    ├── TraceMark-win_x64.exe
    └── resources.neu

Usage

1. Click the upload area or drag an image into the window
2. Enter watermark text in the right panel
3. Choose a layout mode: Tiled / Centered / Corner
4. Adjust opacity, angle, font, and other parameters
5. Drag on the canvas to fine-tune watermark position
6. Click "Download Image" to export the watermarked PNG

Project Structure

TraceMark/
├── src/
│   ├── main.jsx          # App entry
│   ├── App.jsx           # Main component (watermark logic)
│   └── index.css         # Global styles
├── resources/
│   ├── icon.png          # App icon
│   └── icon_256.png      # Hi-res icon
├── bin/                   # Neutralino runtime (auto-downloaded on build)
├── vite.config.js
├── neutralino.config.json
└── package.json

AI-Assisted · By a first-year Computer Science undergraduate

License

MIT