Kaiju is a drag and drop editor for designing quick UI prototypes.
Kaiju helps bridge the gap between designers and developers by providing a standard UI toolkit. In other words, what you see is what you get. The designs made in Kaiju will be visually identical to the designs produced by developers by providing both the UI view and code necessary to generate it.
Kaiju also provides a sandbox for testing and experimenting with components.
Components are the UI building blocks available to drag and drop into the workspace.
The workspace is the canvas for assembling components into a design. Components can be dragged into the workspace and dropped into position.
When a component is selected within the workspace the editor provides an interactable UI for customizing the selected components values.
The action bar provides a set of common actions for each workspace.
Layers provide a tree view representation of the workspace. Items within layers can be duplicated, deleted, and rearranged.
By default a workspace can only be edited by the original author. An author can add users as collaborators with edit privileges by sending an invitation. An invitation link can be generated by clicking share within the action bar under each workspace. Any user who navigates to the invitation link will be granted edit privileges to that workspace.
Invitation links expire after 24 hours.
To send a read-only view of a workspace share the url from the browser.
| Action | Windows | Mac |
|---|---|---|
| Undo | ctrl-z | ⌘-z |
| Redo | ctrl-shift-z | ⌘-shift-z |
| Copy | ctrl-c | ⌘-c |
| Paste | ctrl-v | ⌘-v |
| Duplicate | ctrl-d | ⌘-d |
| Select parent | ctrl-click | ⌘-click |
| Deselect | esc | esc |
Keep up to date by following the what's new announcements. What's new can be viewed by clicking the gift icon in the upper-right corner of Kaiju.
Double clicking a workspace tab or project name will launch a dialog to rename it.
Workspaces can be duplicated for making quick workflow designs. The duplicate action can be found in the action bar under each workspace.
Components can be dragged and dropped interchangeably between the workspace and layers.
Pressing control or command while clicking a selected component will select the parent of the selected component. This makes selecting container components easier.
(Pressing ctrl/cmd and clicking)
