Bounding Boxes
Overview
Bounding boxes are the core interaction model of Reverse Engineering. After uploading an image, you draw rectangular boxes around individual UI elements to isolate them. Each bounding box becomes a selectable region that can be assigned behaviors, converted to code, or exported as a wireframe component.
Screen Flow & Groups
The Screen Flow canvas lets you organize your reverse engineering work into groups. Each group can contain multiple screen images and can be typed as either a Screen (main pages, sections, or views) or a Modal (overlays, dialogs, popups, drawers). Double-click a group to open it and work with its images.
Manual Boxing
Select the Box Tool
Choose the bounding box drawing tool from the toolbar above the image canvas.
Draw a Box
Click and drag on the image to draw a rectangular box around a UI element — a button, a card, a navigation bar, a hero section, or any component.
Resize & Adjust
Drag the edges or corners of any box to fine-tune its position and size. Make sure it tightly wraps the target element.
Assign Behavior
Select a box and define what the element should do — for example, "opens a modal," "navigates to /about," or "toggles a dropdown menu."
AI Auto-Boxing
Instead of drawing every box manually, use AI auto-boxing to have Kaiju Hub AI automatically detect and outline UI elements in your image. The AI analyzes the visual layout and creates bounding boxes around detected components like headers, buttons, cards, inputs, images, and navigation items.
One-Click Detection
Click the auto-box button and AI scans the entire image, creating bounding boxes around every detected UI element.
Edit After Detection
Auto-detected boxes are fully editable. Move, resize, delete, or add new boxes to refine the results.
Selective Re-Detection
Run auto-detection on a specific region of the image if you only need boxes for part of the layout.
Directing Behavior
The power of bounding boxes is in directing what each element does. After boxing an element, you can assign it interactive behaviors that will be reflected in the generated code or wireframe:
Opens Modal
Clicking the element opens a modal/dialog. Specify what content the modal should display.
Navigates to Section
The element acts as a link or button that navigates to another page or section of the app.
Toggles Content
The element shows or hides related content — dropdowns, accordions, expandable panels.
Form Submission
The element triggers form validation and submission logic.
Custom Action
Define any custom behavior description and AI will generate the appropriate event handlers and logic.