Neplex Vectorizer Playground

A local, in-browser workbench for tuning @neplex/vectorizer — a WebAssembly raster-to-SVG tracer with an oxvg-based optimizer. Everything runs client-side; no image ever leaves the browser.

Features

• Drag-and-drop or file-picker image import, with live source preview
• Full tracer parameter set (trace mode, geometry, color handling) and oxvg optimizer controls (preset, multipass, plugin/omit lists)
• Instant SVG preview with a raw/optimized toggle
• Download or copy the generated SVG
• Processing time, raw size, optimized size, and size reduction at a glance

Getting started

pnpm install
pnpm dev

Open the printed local URL in a browser that supports WebAssembly and SharedArrayBuffer (the dev/preview server sets the required Cross-Origin-Opener-Policy / Cross-Origin-Embedder-Policy headers).

Scripts

Command	Description
pnpm dev	Start the Vite dev server
pnpm build	Type-check and build for production
pnpm preview	Preview the production build locally
pnpm lint	Run ESLint

Project structure

src/
  App.tsx                       Top-level layout and state wiring
  components/
    playground/
      top-bar.tsx                Title, import action, generate/stop
      source-panel.tsx           Source image preview + drag & drop
      output-workspace.tsx       SVG preview, raw/optimized toggle, export toolbar
      parameters-inspector.tsx   Collapsible parameter sections (Trace, Geometry, Color, Optimization)
      section.tsx                Reusable collapsible section shell
      control-fields.tsx         Compact select/slider/switch/textarea form fields
    ui/                          Base design-system components (shadcn-based)
  hooks/
    use-vectorizer.ts            Worker lifecycle, progress, and result state
    use-object-url.ts            Object URL creation/cleanup for blobs
  lib/
    vectorizer-worker.ts         Web Worker running the WASM vectorizer + optimizer
    vectorizer-config.ts         Default parameter values
    vectorizer-types.ts          Shared types for config, worker messages, and results
    format.ts                   Formatting/download helpers

Tech stack

• Vite + React 19 + TypeScript
• Tailwind CSS v4 with a neutral, monochromatic design system (shadcn/ui + Base UI primitives)
• @neplex/vectorizer (WASM) running inside a Web Worker so the UI stays responsive during tracing/optimization