PixEdit

Turn screenshots and product images into editable, export-ready visuals in the browser.

PixEdit is a focused image editing workspace for people who need to adjust picture content quickly without opening a heavy design suite. Upload an image, reshape the crop area, switch tools, compare the result, keep local upload history, and export a clean PNG draft from a single editor-first interface.

Why It Stands Out

• Editor first, no detours: the app opens directly into the workspace instead of a dashboard or account flow.
• Local upload history: recent images are stored in the browser, can be reopened instantly, and can be cleared when you want a clean slate.
• Real canvas export: PNG output is generated with browser canvas rendering rather than a DOM screenshot.
• Shape-aware image framing: crop images into original, square, circle, rounded rectangle, hexagon, and heart-style frames.
• Light and dark workspace: theme, language, and layout preferences are wired through the app shell.
• Built for AI editing later: the interface already has clear seams for OCR, text replacement, font analysis, and background restoration services.

Current Capabilities

• Upload JPG, PNG, JPEG, and WEBP images.
• Drag, scale, rotate, and crop the uploaded image on a Fabric-powered canvas.
• Choose crop ratios and crop shapes from the inspector panel.
• Keep upload records in localStorage under pixedit.uploadHistory.
• Reopen previous uploads from the upload history dialog.
• Clear upload history and immediately return to the upload modal.
• Export the current crop as a PNG.
• Switch between English and Simplified Chinese.
• Switch light, dark, and system color modes.

Product Direction

PixEdit is inspired by the idea behind tools like TuGaiGai: make image text and layout edits feel direct instead of technical. The current version is the browser editor foundation. The next layer is service-backed intelligence:

• OCR text region detection.
• Click-to-edit text objects.
• Font style analysis.
• Background inpainting after text removal.
• Layer-aware final composition.

Those features are planned around the existing editor workflow, not as a separate product surface.

Tech Stack

• React 19 and TypeScript for the app layer.
• Vite 8 for development and production builds.
• Fabric 7 for uploaded-image canvas interaction.
• TanStack Router for file-based routing.
• TanStack Query for future service integration.
• Tailwind CSS 4 for styling.
• i18next and react-i18next for localization.
• Biome for linting and formatting.
• Vitest browser mode for tests.

Quick Start

pnpm install
pnpm dev

AI object removal is handled by the Nest backend. Configure the backend with:

AILAB_API_KEY=your_ailabtools_api_key

Open the local development server:

http://localhost:5173

Build and preview production output:

pnpm build
pnpm preview

Useful Scripts

pnpm dev            # Start Vite
pnpm build          # Type-check and build
pnpm preview        # Preview production build
pnpm type-check     # Run TypeScript checks
pnpm lint           # Run Biome checks
pnpm format         # Format files
pnpm test           # Run browser-mode tests
pnpm check          # Lint, type-check, and build

Project Structure

.
├─ public/                 Static assets
├─ screenshot/             README and demo screenshots
├─ src/
│  ├─ assets/              Local icons and visual assets
│  ├─ components/          Shared UI and layout components
│  ├─ context/             Theme, locale, font, direction providers
│  ├─ features/
│  │  └─ editor/           PixEdit workspace, canvas, upload, export
│  ├─ hooks/               Reusable hooks
│  ├─ i18n/                Localization setup and messages
│  ├─ lib/                 Shared utilities
│  ├─ routes/              TanStack Router file routes
│  └─ styles/              Global styles and theme tokens
├─ PROJECT_ARCHITECTURE.md Detailed architecture notes
├─ biome.json              Biome configuration
├─ vite.config.ts          Vite configuration
└─ package.json

Editor Entry Points

The main editor is here:

src/features/editor/index.tsx

The current app route points directly to it:

src/routes/_authenticated/index.tsx

The _authenticated directory name is historical. PixEdit currently opens without a login gate.

Implementation Notes

• Upload history is local-only and stored in the browser.
• Export uses an offscreen canvas to redraw the uploaded image with the current crop state.
• The editor state is intentionally kept in React so OCR, AI repair, and text object editing can be added without replacing the workspace.
• PROJECT_ARCHITECTURE.md contains a deeper walkthrough of the runtime flow and module boundaries.

License

Licensed under the MIT License.