⚡ USER GUIDE · v1.0 · 17 TOOLS
User Guide
Everything you need to get the most out of ZAP Suite — your all-in-one Chrome extension for image editing, design, and content creation. No installs. No subscriptions. No uploads.
Quick Start
ZAP Suite is a Chrome extension — it runs entirely in your browser. Nothing is installed on your PC, nothing is uploaded to any server. Your files stay on your machine at all times.
1
INSTALL
Add ZAP Suite from the Chrome Web Store. Click the puzzle piece icon in Chrome and pin ZAP Suite for easy access.
2
OPEN
Click the ZAP Suite icon in your Chrome toolbar. The hub opens in a new tab showing all 17 tools.
3
ZAP
Click any tool card to open it. Each tool opens as a tab in the hub. Drag tabs to reorder them.
TIP You can have multiple tools open at the same time as tabs — drag them to reorder.
The Interface
Every tool in ZAP Suite follows the same layout pattern so you always know where things are.
HEADER BAR
Tool name on the left. Action buttons on the right. 💾 SAVE PROJECT and 📂 LOAD PROJECT always appear first (where available), followed by tool-specific actions, then Export, then the theme toggle 🌙.
LEFT PANEL
Controls, settings, and inputs. 260px wide on all tools. Scroll if content exceeds the panel height.
CANVAS / PREVIEW
The working area in the center. Your image, canvas, or preview renders here in real time as you make changes.
RIGHT PANEL
Layer controls, properties, or output settings depending on the tool. 280px wide. Not all tools have a right panel.
Saving Your Work
Exporting finished output
Every tool has a ⚡ EXPORT or ⚡ ZAP button that saves your finished image or file to Downloads/ZapSuite/[toolname]/. You can also use 💾 SAVE (quick save) or 💾 SAVE AS (custom filename). The 📂 OPEN FOLDER button reveals the saved file in Windows Explorer.
Saving projects to continue later
Tools with a project system (CanvasZap, GifZap, ImageZap, ScreenshotZap, MindZap) have 💾 SAVE PROJECT and 📂 LOAD PROJECT buttons. These save your full working state — layers, settings, images — to a project file you can reload later and keep editing.
NOTE Project files are different from exported images. A project file saves your editable working state. An export is your final rendered output.
GifZap
GifZap
Build animated GIFs from images — transitions, text overlays, timing control
How to make a GIF
1
Add images — Click ＋ ADD IMAGES or drag and drop image files onto the drop zone. JPG, PNG, WebP supported. Images appear as slides in the slide list.
2
Set slide order — Drag slides in the list to reorder them. Click a slide to select it and preview it.
3
Set duration per slide — With a slide selected, adjust the Duration slider (in milliseconds). Or set a Default Duration that applies to all slides at once.
4
Pick a transition — Choose from Cut, Fade, Slide Left, Slide Right, or Zoom in the Transition dropdown.
5
Add text overlay (optional) — Enable the Text Overlay toggle. Type a title and subtitle, choose font, size, color and whether to show a dark background tint behind the text.
6
Set output size — Adjust Width and Height. Use the Fit Mode dropdown to control how images fill the frame (Cover, Contain, Stretch).
7
Preview — Click ▶ PLAY to preview the animation in real time. Use PREV / NEXT to step through frames.
8
Export — Click ⚡ ZAP TO GIF to render and download your GIF file.
TIP Save your project first with 💾 SAVE PROJECT so you can come back and tweak timing or text without starting over.
Up to unlimited slides
Per-slide duration control
5 transition types
Text overlay with font picker
26 Google Fonts available
Cover / Contain / Stretch fit modes
Real-time preview player
Save & load project files
ImageZap
ImageZap
Resize, convert, rotate, flip and adjust images — single or batch
How to edit an image
1
Load images — Click ＋ ADD IMAGE or drag files into the panel. Multiple images load as a batch list on the left.
2
Select an image — Click any image in the list to make it active. It appears in the preview canvas.
3
Resize — Enter new Width and Height values. Toggle the lock icon to maintain aspect ratio. Or use the Scale slider to resize by percentage.
4
Rotate and flip — Use the ↻ ROTATE buttons to rotate 90° at a time. Use ↔ FLIP H or ↕ FLIP V to mirror.
5
Adjust — Use the Brightness, Contrast, and Blur sliders to fine-tune the image.
6
Set output format — Choose JPEG, PNG, or WebP. Set quality for JPEG/WebP (1–100).
7
Export — Click ⚡ ZAP IMAGE to export the current image, or ⚡ ZAP ALL to batch export all loaded images with the same settings.
TIP PNG export preserves transparency. If you need a transparent background, choose PNG as the output format.
NOTE ZAP ALL applies the current resize/format settings to all images in the list — great for batch resizing product photos or social media images.
ScreenshotZap
ScreenshotZap
Capture any tab, annotate with markup tools, crop and export
Capturing and annotating a screenshot
1
Capture or upload — Click 📸 CAPTURE TAB to instantly screenshot the current tab, or 📁 UPLOAD to load an existing image file.
2
Select a markup tool — Choose from the right panel: Arrow, Box, Circle, Pen (freehand), Text, or Blur/Redact.
3
Set stroke style — Pick a color, adjust stroke size, and set opacity using the controls in the right panel.
4
Draw markup — Click and drag on the canvas to draw arrows, boxes, circles, or freehand lines. For text, click where you want to place it and type.
5
Blur/Redact sensitive areas — Select the Blur tool, then drag over any area to pixelate it. Use the Black Box option to completely cover it instead.
6
Crop — Click ✂️ CROP, drag to select your crop area (rule-of-thirds grid shows as guide), then click ✅ APPLY. Press ESC to cancel.
7
Undo / Redo — Use ↩ UNDO / ↪ REDO or Ctrl+Z / Ctrl+Y to step through your markup history.
8
Export — Click ⚡ EXPORT PNG or 💾 EXPORT JPG to save the annotated screenshot.
TIP Use 💾 SAVE PROJECT to save both the base screenshot and all your markup so you can come back and edit arrows or text later.
TIP The Text Font selector in the right panel lets you choose from 26 Google Fonts for your text annotations.
CanvasZap
CanvasZap
Layer-based compositor for memes, ads, social graphics and more
Building a composition
1
Set canvas size — Pick a preset from the right panel (Instagram 1080×1080, YouTube thumbnail, Facebook cover etc.) or enter custom dimensions and click APPLY SIZE.
2
Set background — Click 🎨 SET BG COLOR to choose a solid color, or 🖼 SET BG IMAGE to upload a background photo.
3
Add image layers — Click ＋ ADD IMAGE LAYER to upload an image. It appears centered on the canvas. Drag it to reposition.
4
Add text layers — Click ＋ ADD TEXT LAYER. Default text appears — select it and edit in the right panel. Change font (26 options), size, color, alignment.
5
Select and edit layers — Click a layer in the Layers panel (left) or click directly on the canvas. The right panel shows that layer's controls.
6
Move layers — Click and drag any layer on the canvas to reposition it.
7
Resize layers — Select a layer to see corner handles. Drag any of the 3 gold corners (NW, SW, SE) to resize.
8
Rotate layers — Select a layer, then drag the green ↻ handle at the top-right corner to rotate freely. Or use the Rotate slider in the right panel.
9
Layer order — Use the ↑ ↓ arrows in the Layers panel to move layers up or down in the stack.
10
Duplicate a layer — Select a layer, then click ⧉ DUPLICATE LAYER in the left panel. The copy appears offset by 20px.
11
Export — Click ⚡ EXPORT to download as PNG or JPG. Choose format with the PNG / JPG toggle buttons.
TIP For text, enable Stroke (outline) and Shadow toggles in the right panel for meme-style text that's readable over any background.
TIP Double-click Ctrl+Z to undo — canvas size changes, layer moves, rotations and resizes are all fully undoable.
NOTE Save your project with 💾 SAVE PROJECT to create a .canvaszap file. Load it back any time to continue editing — all layers, text and settings are preserved.
MockZap
MockZap
Drop a screenshot into a realistic device frame and export a polished mockup
Creating a device mockup
1
Choose a device — Select from Phone, Tablet, Browser, Desktop, Laptop, or Watch using the device grid on the left.
2
Upload your screenshot — Click 📁 UPLOAD SCREENSHOT or drag an image onto the drop zone. Your image appears inside the device frame immediately.
3
Position the image — Drag on the preview to pan the image inside the device screen. Scroll to zoom it in or out. Double-click to reset to the default fit.
4
Set background — Choose a gradient style (Purple, Blue, Sunset, Dark) or Solid Color from the Background dropdown.
5
Style the frame — Choose a frame color: Space Gray, Silver, Gold, Black, or White.
6
Adjust shadow and padding — Use the Shadow and Padding sliders to fine-tune the look.
7
Export — Click ⚡ EXPORT PNG to download your mockup.
TIP Use the Browser frame with a website screenshot for app store listings and product demos. The tab bar and URL make it look instantly professional.
TIP Transparent background exports cleanly — choose Transparent in the Background dropdown for mockups you plan to composite elsewhere.
WaterZap
WaterZap
Batch watermark images with custom text or logo overlay
Adding a watermark
1
Load images — Drag and drop one or more images onto the drop zone, or click to browse. All loaded images appear in the list.
2
Set watermark text — Type your watermark text in the Text field. This can be your name, company, website URL or copyright notice.
3
Style the watermark — Choose font size, color, and opacity. Lower opacity (30–50%) creates a subtle professional watermark.
4
Set position — Choose from 9 positions: corners, edges, or centered. Bottom-right is the most common convention.
5
Preview — The preview canvas updates in real time as you adjust settings.
6
Export — Click ⚡ EXPORT to save the watermarked image, or ⚡ ZAP ALL to batch process every image in the list.
TIP For a logo watermark, use a PNG with a transparent background and set opacity to 40–60% for a clean, non-intrusive result.
IconZap
IconZap
One image → every platform icon size you need
Generating icon sets
1
Upload your image — Click 📁 UPLOAD or drag an image onto the drop zone. Use a square image at 1024×1024 or larger for best results.
2
Choose platforms — Select which platform sets to generate: Favicon, iOS, Android, PWA, Windows, Mac, Chrome Extension.
3
Set corner radius — Toggle rounded corners on/off. iOS and Android icons typically use rounded corners; favicons and Windows tiles do not.
4
Set background — Choose transparent or a solid background color for icon sizes that don't support transparency.
5
Export — Click ⚡ EXPORT ALL to download a ZIP of every size, or click individual size buttons to download specific icons.
TIP Start with a 1024×1024 PNG with transparent background. IconZap will correctly apply solid backgrounds only where needed per platform.
NOTE Chrome Extension icons must be exactly 16, 32, 48, and 128px. IconZap generates all four in one click.
PaletteZap
PaletteZap
Extract color palettes from images + full CSS gradient builder
Extracting a palette from an image
1
Upload an image — Click 📁 UPLOAD or drag an image onto the drop zone. PaletteZap uses k-means clustering to extract the dominant colors.
2
Set palette size — Choose how many colors to extract (4, 6, 8, 10, or 12). More colors = more detail, fewer = cleaner palette.
3
Copy colors — Click any color swatch to copy its hex code. Click COPY CSS VARS to copy all colors as CSS custom properties. Click COPY JSON for a JSON array.
Building a CSS gradient
1
Switch to the Gradient tab — Click GRADIENTZAP at the top of PaletteZap.
2
Choose gradient type — Select Linear, Radial, or Conic from the Type selector.
3
Add and adjust color stops — Drag stops on the gradient bar to reposition. Click a stop to change its color. Click ＋ to add a stop, click a stop and press Delete to remove it.
4
Set angle or position — For linear gradients, adjust the angle. For radial, set the center position.
5
Use a preset — Choose from 10 built-in gradient presets to start quickly.
6
Copy output — Click COPY CSS to copy the gradient as a CSS background property. Click COPY SVG for an SVG gradient definition.
TIP Extract a palette from a brand image, then use those exact colors to build a matching gradient — perfect for consistent design systems.
ColorZap
ColorZap
Color picker, converter, harmony generator and saved palette manager
Using ColorZap
1
Pick a color — Use the color wheel or enter a value in any format: HEX, RGB, HSL, or HSB. All formats update simultaneously.
2
Generate harmonies — Click Complementary, Triadic, Analogous, Split-Complementary, or Tetradic to generate a matching color scheme.
3
Save colors — Click ＋ SAVE to add a color to your saved palette. Saved colors persist between sessions.
4
Copy values — Click any format field to copy that value to clipboard. One click — no selecting text.
5
Recent colors — The last 16 picked colors appear in the Recents strip for quick access.
TIP Use ColorZap alongside CanvasZap in separate tabs — copy a hex code from ColorZap and paste it directly into CanvasZap's color picker.
FontZap
FontZap
Preview and pair Google Fonts — copy CSS with one click
Finding and using fonts
1
Browse fonts — Scroll through the font list or use the search box to filter by name.
2
Preview text — Type your own text in the preview box to see how your actual words look in each font.
3
Set size and weight — Adjust the preview size and choose from available font weights.
4
Compare pairing — Select a heading font and a body font to preview them together as a pairing.
5
Copy CSS — Click COPY CSS to copy the Google Fonts @import link and font-family declaration ready to paste into your stylesheet.
TIP The fonts available in FontZap are the same fonts available in CanvasZap's text layer font picker — preview here, use there.
BadgeZap
BadgeZap
Generate shield-style SVG badges for READMEs, docs and websites
Creating a badge
1
Set left label — Enter the left side text (e.g. "build", "version", "license"). This is typically the category name.
2
Set right value — Enter the right side text (e.g. "passing", "1.0.0", "MIT"). This is typically the status or value.
3
Choose colors — Set left background (usually dark gray) and right background (green for passing, red for failing, blue for info etc.).
4
Choose style — Flat, Flat Square, or Plastic.
5
Copy or download — Click COPY SVG to copy the SVG code, COPY MARKDOWN for README use, or ⚡ EXPORT SVG to download the file.
TIP Use Markdown copy to paste directly into a GitHub README.md — the badge renders automatically.
CardZap
CardZap
Design and export card grid layouts for games, flashcards and print
Creating a card set
1
Set grid layout — Choose number of columns and rows for your card grid.
2
Set card size — Enter card width and height in pixels. Standard playing card is 63×88mm.
3
Add card content — Click a card in the grid to select it. Enter text, choose background color, text color and font size.
4
Style cards — Set border radius, border color, and background per card or apply a style to all cards at once.
5
Export — Click ⚡ EXPORT PNG to download the full card grid as a single image ready for printing or digital use.
ChartZap
ChartZap
Type data, get beautiful charts instantly — bar, line, pie and more
Creating a chart
1
Choose chart type — Select Bar, Line, Pie, Doughnut, Radar, or Polar from the type selector.
2
Enter your data — Type labels (comma separated) and values (comma separated) in the data fields. The chart updates in real time.
3
Add a title — Enter a chart title. It appears above the chart.
4
Style it — Choose a color scheme and toggle the legend on/off.
5
Export — Click ⚡ EXPORT PNG to download your chart as an image.
TIP ChartZap works great for social media stats graphics, presentation visuals, and blog post data illustrations.
LinkZap
LinkZap
Build a styled link-in-bio page and export as a standalone HTML file
Building your link page
1
Set your profile — Enter your name, handle, and a short bio. Choose an avatar emoji or upload a profile image.
2
Add links — Click ＋ ADD LINK for each link. Enter a label (e.g. "My Website") and a URL.
3
Reorder links — Drag links up and down in the list to reorder them.
4
Choose a theme — Pick from the available color themes to style your page.
5
Preview — The preview on the right shows exactly how your page will look.
6
Export — Click ⚡ EXPORT HTML to download a self-contained HTML file you can host on any website.
TIP The exported HTML file is completely self-contained — no external dependencies. Upload it to any web host or share it directly.
SocialZap
SocialZap
Export one image to every social media size in one click
Exporting for social media
1
Upload your image — Click 📁 UPLOAD or drag an image onto the drop zone.
2
Choose platforms — Select which platforms to export for: Instagram, Facebook, Twitter/X, LinkedIn, YouTube, Pinterest, TikTok.
3
Choose fit mode — Cover (fills frame, may crop), Contain (fits inside frame, may letterbox), or Stretch.
4
Export — Click ⚡ ZAP ALL to export a correctly sized image for every selected platform simultaneously.
TIP Use Cover mode for most social graphics — it fills the frame edge to edge which looks best on feeds.
NOTE Each platform has multiple size variants (feed post, story, cover, thumbnail). SocialZap exports all of them.
QRZap
QRZap
Generate QR codes for URLs, WiFi, email, phone, SMS and plain text
Generating a QR code
1
Choose type — Select URL, WiFi, Email, Phone, SMS, or Text from the type selector.
2
Enter content — Fill in the fields for your chosen type. For WiFi: network name, password, security type. For Email: address, subject, body.
3
Style the QR code — Choose foreground color, background color, and error correction level (Low, Medium, Quartile, High).
4
Set size — Adjust the output size in pixels. 300×300 is good for web; 1000×1000 for print.
5
Export — Click ⚡ EXPORT PNG or ⚡ EXPORT SVG to download.
TIP Higher error correction (H) lets your QR code still work even if up to 30% of it is obscured — useful if you plan to put a logo in the center.
MindZap
MindZap
Visual mind mapping on an infinite canvas — brainstorm, plan, organize
Building a mind map
1
Start fresh — Click NEW MAP to begin with a clean default map (central node + 4 branches). Confirm when prompted if you have unsaved work.
2
Edit a node label — Select a node (click it) then edit the Label field in the right panel. Or double-click directly on the node to edit inline.
3
Add a branch — Select a node and click ＋ BRANCH in the sidebar, or hover over a node and click the + button that appears on its right side. New branches are placed at a smart angle to avoid overlapping existing ones.
4
Add a root node — Click ＋ NODE in the header to add a disconnected root node anywhere on the canvas.
5
Move nodes — Click and drag any node to reposition it. Other nodes stay in place.
6
Style a node — Select a node and use the right sidebar to change its color (16 options) and shape (Rounded, Pill, Rect, Circle).
7
Add a note — Select a node and type in the Note field in the sidebar. Notes appear as tooltips when hovering over nodes.
8
Delete a node — Select it and click 🗑 DEL in the sidebar, press Delete, or right-click the node.
9
Navigate the canvas — Drag the background to pan. Scroll to zoom in and out (zoom toward cursor). Press F or click ⊡ FIT to fit all nodes on screen.
10
Auto layout — Click ⟳ LAYOUT to automatically arrange all nodes into a clean tree layout.
11
Save and export — Click 💾 SAVE PROJECT to save a .mindzap file. Click 🖼 PNG to export the current view as an image.
TIP Press Tab with a node selected to instantly add a child branch — fastest way to build out a map.
TIP Your map auto-saves as you work. If you close and reopen MindZap, your last map is restored automatically.
SpamZap — Companion Extension
SpamZap
Silent 24/7 Gmail spam extermination — sold separately
SpamZap is a separate Chrome extension that runs silently in the background and automatically deletes spam from your Gmail inbox based on rules you define. If you're a ZAP Suite user dealing with Gmail spam, SpamZap was built for you.
What SpamZap does
Runs silently 24/7 with no interaction needed
Wildcard pattern matching (e.g. *@spammydomain.com)
Match by sender email, domain, subject line, or keyword
Permanently deletes — no clogging the spam folder
Background sweep cleans up old spam on schedule
Live stats dashboard — see exactly what was killed
Time-period counters: today, this week, this month, all time
Bar charts showing spam activity over time
100% local — uses Gmail API, nothing leaves your machine
No forwarding, no reading your emails, no cloud storage
Separate filter lists: senders, subjects, patterns, domains
Import/export your filter rules as a backup
Safe mode — preview what would be deleted before enabling
Restricted search scope — only touches spam, never sent mail
Label verification safety layer prevents accidental deletions
Works with any Gmail account including Google Workspace
One-click pause — stop all deletion instantly
Handles real botnet attacks with thousands of messages
Notification badge shows spam count in Chrome toolbar
30-day free trial — ZAP Suite included free while subscribed
NOTE SpamZap is a separate product ($9.95/month after trial) and requires its own Chrome Web Store installation. ZAP Suite is included free with an active SpamZap subscription.
Keyboard Shortcuts
Global (all tools)
| KEY | ACTION |
|---|---|
| Ctrl+Z | Undo last action |
| Ctrl+Y | Redo |
| Ctrl+S | Save (where supported) |
CanvasZap
| KEY | ACTION |
|---|---|
| Ctrl+Z | Undo (layers, moves, rotations, canvas resize) |
| Ctrl+Y | Redo |
| Delete | Delete selected layer |
ScreenshotZap
| KEY | ACTION |
|---|---|
| Ctrl+Z | Undo markup |
| Ctrl+Y | Redo markup |
| Esc | Cancel crop mode |
MindZap
| KEY | ACTION |
|---|---|
| Tab | Add child branch to selected node |
| Delete | Delete selected node |
| F | Fit all nodes on screen |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| Scroll | Zoom in/out toward cursor |
| Drag canvas | Pan the view |
MockZap
| KEY / ACTION | RESULT |
|---|---|
| Drag preview area | Pan image inside device frame |
| Scroll on preview | Zoom image inside device frame |
| Double-click preview | Reset image position and zoom |
Frequently Asked Questions
Do my files get uploaded anywhere?
No. ZAP Suite runs entirely in your browser using local JavaScript and the HTML5 Canvas API. No file ever leaves your machine. There are no servers, no cloud storage, and no account required.
Does ZAP Suite work offline?
Yes, once installed the extension works offline. Google Fonts for text tools require an internet connection to load, but all other functionality works without one.
Where do exported files go?
All exports save to your Downloads/ZapSuite/[toolname]/ folder. The OPEN FOLDER button in each tool's header reveals the last saved file in Windows Explorer.
Is there a file size limit?
There's no hard limit imposed by ZAP Suite itself. Very large images (20MB+) may be slow to process depending on your machine's memory. For best performance keep source images under 10MB.
What's the difference between SAVE and SAVE PROJECT?
SAVE / SAVE AS exports your finished image to Downloads — this is your final output. SAVE PROJECT saves your editable working state (layers, settings, images) to a project file so you can reopen and continue editing later.
Can I use ZAP Suite on Mac?
Yes — ZAP Suite is a Chrome extension and runs on any platform where Chrome is available: Windows, Mac, Linux, and ChromeOS.
Do future tools cost extra?
No. Your $19.95 lifetime license includes all future tools added to ZAP Suite. Three more tools (BoxZap, PDFZap, PageZap) are currently in development and will be included automatically.
Can I have multiple tools open at the same time?
Yes — each tool opens as a tab in the ZAP Suite hub. You can have as many tools open simultaneously as you need and drag tabs to reorder them.
How do I get support?
Email [email protected] or visit localappz.com.