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 is saved on your machine. No accounts or internet required.
Editor Basics
1. Adding Elements
Drag elements onto the canvas from the elements catalog, or drag to create using the toolbar at the bottom of the screen.
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.
Nested Selection Quick Tips
- Cmd/Ctrl + click always picks the exact element under your cursor, even inside groups.
- Keep clicking a selected grouped element to drill down level-by-level.
- Settings -> Drag select lets you choose Include partial intersections or Only fully contained shapes; hold Alt/Option while dragging to temporarily flip that mode.
- Shift + drag or Cmd/Ctrl + drag forces individual hits, so you can target specific nested elements.
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. Use the canvas manager to organize, duplicate, or delete your canvases as needed.
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, backgrounds, or anything.
Line (L)
Create simple dividers or connections between components.
Section (S)
Create multple logical screen divisions on one canvas.
Text (T)
Add freeform text by clicking once, or drag to create a bounded text box. Double-click any element to edit its text properties.
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.
Group Management
In the sidebar tree view, drag elements into groups to nest them, or drag them out to unnest and place them at the root level. This makes it easy to refine hierarchy while keeping layers organized.
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.