wirekitty
Documentation
Editor

Manage wireframes, import and export

Organize canvases, import wireframes from JSON or AI outputs, and export files that are ready for collaboration and AI workflows.

Canvas Management

Use the Canvas Manager to keep projects organized and move quickly between drafts.

Project Grid

Open the manager with the folder icon or Cmd/Ctrl + O.

Duplicate & Rename

Create variants fast and keep them named by feature, flow, or version.

AI History

Review AI-imported canvases in a dedicated tab and clean them up in bulk.

Delete & Cleanup

Remove one or many obsolete canvases to keep local storage light.

Saving & Storage

Wirekitty is local-first. Canvases are stored in your browser profile using IndexedDB (database name: CanvasDatabase).

With auto-save enabled, edits are stored continuously. If auto-save is disabled, use Save canvas from the menu.

If you need to clear local canvas storage:

  • Delete canvases directly in the Canvas Manager (including AI-generated canvases).
  • In browser devtools, open Application/Storage → IndexedDB, select CanvasDatabase, then clear the canvases store or the full database.

Storage is scoped by browser profile and site origin, so data in one profile/browser does not affect another.

Import Wireframes

Open the top-left menu and choose Import canvas. You can import from a JSON file or from clipboard text.

File import supports drag-and-drop and click-to-select for .json files. Clipboard import supports both raw JSON and fenced JSON code blocks.

Accepted Formats

  • Wirekitty save-state JSON: { konvaState, items }.
  • Legacy stage JSON: direct Konva stage object with className: "Stage".
  • Shorthand JSON: converted to a Wirekitty canvas automatically.
  • MCP create_wireframe payloads: schema can be read from schema, shorthand, arguments.schema, input.schema, params.schema, or params.arguments.schema.

Import Modes

  • Merge with existing: adds imported elements to the current canvas.
  • Replace all: clears the canvas first, then loads only imported content.

AI Session Imports

If imported JSON contains isAiGenerated, callback, and wireframeId, Wirekitty opens the approval flow in-app so you can review edits and return an approved result to the AI agent.

Export Wireframes

Open the top-left menu and choose Export canvas. Available formats are PNG, JPEG, WebP, and JSON.

Image Export (PNG/JPEG/WebP)

  • Exports only visible canvas content (cropped to the content bounds).
  • Includes padding around content for better framing.
  • Uses high-resolution export for clearer results.

Optional Metadata Sidecar

Enable Include JSON metadata file to export a second JSON file alongside the image. Metadata includes element names, shape types, bounding boxes, group/section relationships, and extracted text where available.

For AI workflows, treat the image as the primary source and metadata as structured supporting context.

JSON Save-State Export

Choosing JSON downloads a full Wirekitty save-state payload: { konvaState, items }. Use this for round-trip edits and reliable re-import.