Example & starter extensions
An example pack that adds six seasonal starter templates to the editor, shipped to show the `registerTemplatePack` API.
Holiday Templates (starter pack) Extension 7 items #
An example pack that adds six seasonal starter templates to the editor, shipped to show the registerTemplatePack API.
Holiday Templates is a small demo extension. It registers one template pack (registerTemplatePack, needs editor API 2.1 or newer) whose six ready-made designs join the built-in Starter Templates. They show up in the template tray, in the Asset Library dialog (grouped under the pack label Holiday Templates), and in global search.
The designs themselves live in a templates.json file inside the package and are fetched only when needed, so a big pack never bloats the extension script. Pick one to start a new document, then swap the text and images for your own.
The template labels are in German because this pack ships as a real-world sample; the sizes and purpose are noted on each entry below.
Holiday Templates
#The pack itself. Its six templates appear alongside the built-in starters in the template tray, the Asset Library dialog, and search, all grouped under this label.
Tip. The designs load from templates.json inside the package, so they never bloat the script file.
Weihnachtsgruß - Elegant
#An elegant square Christmas greeting card with a frame, a star, a headline, a rule line, a wish line, and a From field. Use it for a festive social post or e-card.
Geschenkgutschein
#A square gift-voucher design with a card panel, ribbon and bow, a title, a value field, For and From lines, a footer, and a logo slot. Use it to hand out or sell a gift certificate.
Winter-Sale - Story
#A tall vertical winter-sale layout sized for a phone story, with a night snow scene, a headline, a discount figure, a What line, a call to action, and a validity time. Use it for an Instagram or Facebook story promotion.
Weihnachtsmarkt - Einladung
#A square Christmas-market invitation with a sky, a garland of lights, a title, a Where line, a small map, and times. Use it to invite people to an event.
Neujahrsgruß - Modern
#A modern square New Year greeting built around a large year number with an overlay, plus a greeting, a thank-you line, a rule line, and a logo. Use it as a year-turn post or client thank-you.
Feiertags-Öffnungszeiten
#A square holiday opening-hours notice decorated with fir branches, for posting which days and times your business is open over the holidays.
Layer Namer (AI) ExtensionAILocal AI 5 items #
An example AI tool that auto-names your image layers by reading their content with a small local vision model, shown to demonstrate registerAiTool and the ML bridge.
Layer Namer (AI) registers an AI tool (registerAiTool, needs editor API 2.12 or newer). Its button sits under AI Studio, in Local tools. Run it and every image layer is captioned by the editor's own local caption model through window.WPIE.bridge.ml.captionImage(). The whole run stays in the browser; nothing leaves your site.
The caption model must be installed once, under Settings, then Local AI Models ("Alt text / captions"). If it is missing, the tool shows an error and stops. The generated caption is cleaned up (leading "a", "an", "the" removed, title-cased, trimmed to 48 characters) and written as the layer name.
Name Layers
#The AI tool button. It reads each image layer and writes a short descriptive name based on what the picture shows, so a stack of raw "Image", "Image 2" layers becomes readable. Fully local, no API key needed.
Tip. Install the caption model first under Settings, then Local AI Models ("Alt text / captions").
Name Layers (AI)
#The settings dialog that opens when you run the tool. It tells you how many image layers will be captioned locally and offers one option before you start. Click outside the card or press Cancel to close it without doing anything.
Also rename layers that already have a custom name
#A checkbox in the dialog. Off by default, so only layers with a default name (like Image, Image 2, Layer 3, or Raster) get renamed and your own names are kept. Turn it on to re-caption every image layer, including ones you named yourself.
Tip. With it off, layers you already named are left untouched.
Name layers
#The primary button in the dialog. It closes the dialog and starts captioning: the model loads on first use (a toast says so), then each matching layer is renamed and a summary toast reports how many were named.
Cancel
#Closes the dialog and does nothing. Clicking the dark backdrop outside the card does the same.
Paper Doodles (asset pack) Extension 13 items #
An example asset pack that adds a shelf of simple doodle shapes to the Asset Library, shown to demonstrate registerLibrarySection.
Paper Doodles registers one Asset Library section (registerLibrarySection, needs editor API 2.0 or newer). It adds a Doodles chip to the Asset Library tray holding twelve hand-drawn vector shapes. Click a shape to drop it on the canvas, or drag and drop it, no extra code needed.
Each item is a user-element (an editable vector shape) built from a path inside a 100 x 100 box, so it scales and recolors cleanly like any other shape layer. The pack has no PHP, no build step, and no framework: previews are inline SVG data URLs generated on the fly.
Doodles
#The Asset Library section this pack adds. Open the Asset Library and pick the Doodles chip to see the twelve shapes; click or drag any of them onto the canvas.
Heart
#A rounded heart shape. Insert it as an editable vector layer that you can resize and recolor.
Star
#A classic five-point star. Insert it as an editable vector layer.
Sparkle
#A four-point sparkle or twinkle. Insert it as an editable vector layer, handy as an accent.
Speech Bubble
#A rounded speech balloon with a tail. Insert it and add your own text on top.
Cloud
#A puffy cloud outline. Insert it as an editable vector layer.
Lightning
#A lightning bolt. Insert it as an editable vector layer for an energetic accent.
Arrow
#A right-pointing block arrow. Insert it to point at something on your design.
Crown
#A simple crown. Insert it as an editable vector layer, useful as a premium or winner accent.
Flower
#A four-petal flower shape. Insert it as an editable vector layer.
Check
#A checkmark or tick. Insert it to mark something as done or correct.
Sun
#A sun with a ring of rays. Insert it as an editable vector layer.
Swoosh
#A curved brush-stroke swoosh. Insert it as an underline or motion accent.
Example Extension (reference) Extension 5 items #
A minimal reference extension that registers one effect, one Filter-menu item, and one panel, meant to be copied as a starting point for your own add-on.
Example Extension is the bare-bones sample to copy when building your own extension. It is plain vanilla JavaScript with no build step. In one file it shows the three most common editor-side registrations: a pixel effect, a Filter-menu item, and a right-dock panel.
The accompanying PHP file also shows the optional server-side hooks (adding data to window.WPIE, registering a custom stock provider, and reacting to saves), left as commented examples. Use this pack to learn the Extension API, not as a finished tool.
Scanlines (Example)
#A demo pixel effect that darkens every few rows to fake CRT scanlines. It appears in the Filter menu, in the Adjust panel, and as a Smart Filter, and because it is a registered effect the on-canvas preview matches the exported result exactly.
Tip. Registered effects give identical preview and export.
gap
#The Scanlines parameter that sets how many pixel rows sit between each dark line. A smaller gap means denser lines; a larger gap spreads them out.
strength
#The Scanlines parameter that sets how dark each line is. At 0 the effect is invisible; higher values darken the affected rows more (up to 80 percent darker at 100).
Example
#A demo right-dock panel built with plain DOM (no framework). It displays the current document width and height and the layer count, showing how a panel renders from editor state.