Using the Editor
Learn how to use the Wirekitty editor to create wireframes.
Getting Started
The Wirekitty editor is designed to be simple and intuitive. Here are the key features:
Intuitive Interface
Drag-and-drop components onto the canvas to build your wireframe.
Rich Components
Tables, charts, modals, and 20+ more components ready to use.
MCP Integration
Built-in MCP server when you're ready to share your wireframes with AI
Local First
Your data stays on your machine. Privacy by default.
Editor Basics
1. Adding Elements
Drag elements onto the canvas from the elements catalog. Components are organized by category for easy access.
2. Selecting and Moving
Click on any element to select it. You'll see handles appear around the element that you can use to resize it. Drag the element to move it around the canvas.
3. Editing Properties
When an element is selected, its properties appear in the right sidebar. Here you can customize text content, colors, sizes, and component-specific settings.
4. Saving Your Work
Your wireframes are automatically saved to your browser's local storage. You can also export them as JSON or PNG files.
Available Tools
The toolbar at the bottom of the editor provides quick access to creation tools:
Cursor (V)
Select, move, and resize elements. Use Escape to quickly switch back to this tool.
Rectangle (R)
Create rectangular shapes for containers, buttons, or backgrounds.
Text (T)
Add freeform text. Double-click any element to edit its text properties.
Line (L)
Create simple dividers or connections between components.
Section (S)
Create logical groups. Moving a section moves all elements contained within it.
Canvas Operations
Common operations you can perform on the canvas:
Layers & Z-Index
Manage the visual stacking order of your elements using the project sidebar on the left:
Project Sidebar
The sidebar displays a tree-view of all elements on your canvas. Elements at the top of the list appear "in front" of elements below them.
Reordering Stack
Simply drag and drop elements within the sidebar list to change their stacking order (z-index). This is useful for moving backgrounds behind components or bringing specific elements to the front.
Alignment & Snapping
Precision is key when building wireframes. Wirekitty includes smart alignment and snapping tools to help you create clean layouts:
Smart Snapping
Elements automatically snap to the edges and centers of nearby components. Hold Alt to temporarily disable snapping while moving or resizing.
Visual Guides
Dynamic alignment guides (dashed lines) appear automatically to show you exactly how elements are aligned with each other.
Axis Locking
Hold Shift while dragging an element to lock its movement to either the horizontal or vertical axis.
Precise Resizing
Snapping also works while resizing elements, making it easy to match the height or width of adjacent components.
Working with Sections
Sections are a powerful way to organize your wireframes into logical groups or screens:
Containment
Any elements placed inside a section's boundaries are automatically "contained" by it. Moving or resizing the section will proportionally move or resize the elements inside.
Organization
Use sections to represent different app screens, user flows, or component variations. Each section can have its own title for easy identification.
Canvas Management
Wirekitty allows you to manage multiple canvases and projects through the Canvas Manager:
Project Grid
View all your canvases in one place. Accessed via the folder icon or Cmd/Ctrl + O.
Duplicate & Rename
Quickly iterate on designs by duplicating existing canvases or organizing them with clear names.
AI History
View and manage canvases generated by AI agents through the MCP integration.
Quick Delete
Keep your workspace clean by removing old or unused experimental wireframes.