PicPoints, a new free plugin from a developer building in public on r/WordPress, brings a canvas-based editor to WordPress image maps — with Shadow DOM isolation and no jQuery dependency on the frontend. Interactive image maps — clickable regions overlaid on a photo or diagram — have long been a pain point in WordPress, with most available tools relying on outdated jQuery-based interfaces or clunky admin forms that haven’t changed in years. PicPoints, developed over the past six months, takes a different approach with a canvas-based editor modeled after design tools like Figma.
The plugin is available now on the official WordPress plugin directory. It supports markers, shapes, and polygons placed directly on an image, with real-time dragging and resizing built into the editor.
Two technical decisions define how the plugin handles the notoriously messy WordPress frontend environment. The editor layer is built with React and TypeScript — a typed programming language that compiles to JavaScript. The developer says this helped manage precise coordinate calculations for responsive hotspots. The viewer component also uses Shadow DOM isolation, a browser technology that encapsulates styles so they can’t be overridden by external CSS — a direct response to the common problem of third-party themes breaking plugin interfaces.
“WP environments are messy for modern frontend apps because other plugins and themes often break your global styles.”
On the output side, the plugin avoids loading jQuery entirely. It produces vanilla JavaScript and optimized markup, which matters for sites where PageSpeed scores are a client deliverable — smaller page weight and no jQuery version conflicts compared to older image map plugins that bundle large dependencies.
The plugin is still under active development. At this stage it’s a free listing with no premium tier.
