@usepatchly/vite-plugin

Vite plugin for Patchly — instruments your JSX with stable element IDs so non-technical clients can click-to-edit content while the source of truth stays in your Git repository.

Status: 0.0.1-alpha. Public API may change before 1.0.

Install

pnpm add -D @usepatchly/vite-plugin

Usage

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { patchly } from '@usepatchly/vite-plugin';

export default defineConfig({
  plugins: [react(), patchly()],
});

The plugin is inert in production builds. It only runs when you build with --mode patchly or set PATCHLY_EDIT_MODE=1. Your customer-facing build is byte-for-byte unchanged.

What it does

• Walks each .tsx/.jsx/.ts/.js file with Babel.
• Tags JSX elements with a stable data-patchly-id attribute.
• Emits dist/patchly-manifest.json mapping each ID back to (file, line, col) so the Patchly backend can deterministically AST-patch the source.

Security

• No network access at any point during the build.
• MIT licensed — audit the source freely.
• Production builds (any mode that is not patchly) are guaranteed untouched.

License

MIT