Synkronyx Image

Synkronyx Image (synkronyx.synkronyx-image) is a local image studio from Synkronyx. It provides a full image editor directly inside VS Code: crop, resize, transform, convert, and compress, without leaving the editor.

For the complete documentation, see docs/ and the live site at vscode-image.synkronyx.com.

Install

Install Synkronyx Image from the Visual Studio Marketplace, or run:

code --install-extension synkronyx.synkronyx-image

One package runs on Windows, macOS, and Linux.

Marketplace listing highlights

• Local-first image editing inside VS Code.
• No uploads and no remote processing of source images.
• Command palette and context-menu tools for crop, resize, convert, compress, and pixel effects.

VSIX manifest visibility

The repository carries a tracked VSIX manifest snapshot at artifacts/vsix/extension.vsixmanifest, so the manifest is visible in source control and not only inside CI/CD package output.

Refresh the snapshot locally:

npm run package:vsix
npm run manifest:vsix

Shared image platform model

The repository runs a single shared image platform model:

• Domain identity: sknx-image
• Core engine and codecs in packages/image-core and packages/image-codecs
• Host contract package in packages/image-platform
• Host surfaces:
  • VS Code extension host in src/
  • Web and PWA host in apps/web/
  • Shopify host contract target through the same platform package

This keeps VS Code and web features aligned and enables a NeilCommerce-owned Shopify image service and app to use the same platform contracts rather than a third-party app.

The capability boundary model for local, web, and remote execution is defined in docs/capability-boundary-contract.md.

Current image engine status

The VS Code extension processes images locally through WebAssembly codecs, the same codecs the web app uses. One package runs on Windows, macOS, and Linux with no native binaries.

Decoding, editing, and encoding run on a worker thread (dist/codecWorker.js), never on the extension host thread, so a large image does not make VS Code report the extension host as unresponsive. Each codec compiles from dist/wasm the first time it is used, so opening a JPEG never pays for the AVIF encoder. The worker stops when the extension deactivates.

Privacy

All processing runs 100% locally inside VS Code. No files are uploaded, no network requests are made, and no image data leaves the device or container.

Visual Identity

The Synkronyx visual system combines a faceted S, an angular technical shell, discrete integration traces, and a blue-led palette. The reusable source assets and palette are documented in docs/brand.md.

Licence and trademarks

This work is licensed under the Apache License 2.0. The full copyright and identifier notice is in NOTICE.

The Synkronyx and Synkronyx Image names, related logos, product identifiers, and visual identity are reserved by Synkronyx. The licence does not grant permission to use them beyond the reasonable and customary descriptive use allowed by section 6. Do not use them to state or imply affiliation with, sponsorship by, endorsement by, or origin from Synkronyx.

Usage

1. Select a supported image in Explorer, or make an image the active editor tab.
2. Press Ctrl+Shift+P and search for Synkronyx Image, or press Ctrl+Shift+I to open the tools panel directly.
3. Use the shared native VS Code-styled Webview to compare the live Before and After previews.
4. Configure the edit and choose Save As.... The source image is never overwritten.

All listed image-editing commands open the same Webview against the selected image. The focused control changes to match the invoked command.

The same commands are available from the Synkronyx Image submenu in Explorer and editor context menus for supported images.

The editor supports:

• Resize by percentage or pixels, with optional aspect-ratio preservation.
• Crop by pixel coordinates and dimensions.
• Brightness, contrast, grayscale by luminance, average, or desaturation, invert, sepia, and Gaussian blur.
• PNG, JPEG, WebP, AVIF, and GIF output with compression quality controls and an optional KB or MB output-size limit.
• Local solid-colour placeholders through Generate Image Placeholder....

Format Support

Supported inputs are PNG, JPEG, WebP, AVIF, BMP, and GIF. Output can be saved as PNG, JPEG, WebP, AVIF, or GIF; BMP is input-only.

Animated GIFs are deliberately processed as the first frame and saved as a static result. This keeps resize, crop, and pixel effects predictable; full animated-GIF editing is not supported.

PNG is lossless at quality 100. Lower PNG quality values allow palette compression. JPEG, WebP, and AVIF use lossy quality compression. GIF quality controls its output colour palette. When an output-size limit is set, the extension lowers quality until it reaches the limit or reports that the limit cannot be reached.

Generate Placeholders

Run Synkronyx Image: Generate Image Placeholder... from the Command Palette. Choose width x height, a hexadecimal background colour, an output format, quality, and a Save As location. Placeholder generation runs locally on your device.

Theme selection

Run Synkronyx Image: Select Brand Theme to choose the extension brand theme and persist it in VS Code settings. The current release includes one publish-ready theme (shades-of-blue) and keeps the selector contract ready for additional themes.

Theme sync automation

This repository can synchronize theme definitions from the separate brand repository:

npm run brand:themes:sync -- --theme shades-of-blue

CI workflow sync-brand-themes.yml also supports repository dispatch events and scheduled sync runs.

Development

Install repository git hooks once per clone to enforce local guardrails before commit and push:

npm run hooks:install

npm ci --no-audit --no-fund --loglevel=error
npm run brand:themes:sync -- --theme shades-of-blue
npm run compile
npm test

Press F5 in VS Code to open an Extension Development Host.

Developer quick start for manual testing

Use this flow when you want a quick local smoke test without publishing:

1. Open this repository in VS Code.

2. Install dependencies and compile:

   npm ci --no-audit --no-fund --loglevel=error
   npm run compile
   

3. Press F5 to launch the Extension Development Host.

4. In the Extension Development Host window, open the sample image Peter-Neil-Library.jpg.

5. Run Synkronyx Image: Open Tools Panel from the Command Palette.

6. Validate these core paths:

   • resize the image and save as PNG
   • crop a region and save as JPEG
   • convert to WebP with quality change
   • generate placeholder image

7. Confirm every operation writes to a new file and leaves the source image unchanged.

Enjoy!