When checked: dimensions include material thickness
When unchecked: dimensions are inner cavity size. More.
Box joints on all 6 sides so panels interlock without glue.
0 = material thickness
0 = automatic
Extra width for finger slots
Uncheck a side to keep that panel's edges plain (no finger joints).
Selected Component
Please add or select an existing component
Command to Execute
Copy and paste this command to use with MIDILLI tools:
Settings
Generated JSON
📖 MIDILLI Visual Box Designer - User Guide
🎯 Getting Started
MIDILLI Visual Box Designer is a free online tool for designing custom boxes, cabinets, and furniture panels with precise component placement. Design your project visually and export as JSON for use with our production-ready tools.
💡 What Can You Do With The Exported JSON?
The JSON file generated by this designer serves as input for three powerful free MIDILLI tools, each optimized for different manufacturing methods:
⚙️ MIDILLI G-Code Generator for CNC Routers
Generate custom G-Code files for CNC routers to engrave, recess, and cut with precision. Full control over tool paths, depths, and speeds.
🖨️ MIDILLI STL Generator for 3D Printers
Design and export STL files for 3D printing with flexible settings for box-shaped parts. Create prototypes or final products layer by layer.
All three tools are free to download and available on our website.
🛠️ Workflow:
Set your project dimensions and material thickness
Select which sides to include (uncheck to leave sides open)
Choose a side from Current Side dropdown
Add Rectangle or Rounded components (drill holes, cutouts, etc.)
Click components to select, drag or use arrow keys to move, edit properties on the right panel
Preview your design in 3D (optional but recommended)
Click Export JSON when ready
Use the JSON file with MIDILLI tools: --json-file YourProject.json, including the command under Command to Execute on the right.
📏 Project Setup
Project Name: Name your project (used for export filename)
Width/Length/Height: Box dimensions in centimeters
Material Thickness: Panel material thickness in millimeters
Outer Sizing:
✅ Checked: Dimensions include material thickness (outer measurements)
❌ Unchecked: Dimensions are inner cavity size
🔗 Finger Joints
Finger joints (box joints) create interlocking tabs and slots on panel edges so the box can be assembled without glue.
Enable: Check Finger Joints to activate on all 6 sides by default.
Per-side control: Uncheck any side under Finger Sides to keep that panel's edges plain.
Finger Size: Width of each tab/slot in mm. 0 = uses material thickness.
Finger Count: Number of fingers per edge. 0 = automatic based on panel size.
Finger Clearance: Extra width for slots to ensure smooth assembly.
🔲 Panel Sides
Enable/disable which sides of the box to design:
Front, Back, Top, Bottom, Left, Right
Uncheck unused sides to exclude from design
Side changes apply automatically. Note: unchecking a side also removes the components on that side.
➕ Adding Components
Select a side from Current Side dropdown
Click + ⬜ or Shift + R to add rectangle or + ⚪ or Shift + C to add rounded component
Component appears at center of 2D canvas
Drag or use arrow keys to reposition (snaps to 0.5cm grid by default). Grid snapping can be disabled in settings. Grid size can be adjusted in the same settings menu.
✏️ Editing Components
Click any component to select and edit:
Text: Text to show above components (rotates with rotation)
Visible Diameter/Width/Length: Visual outline size (dashed line). Text position is also affected by this setting. In MIDILLI tools, these elements are also used to create recesses (if enabled).
Rotation: Angle in degrees (clockwise). Alternatively, use R key on keyboard.
Click Apply or press Enter to save changes or Delete or press Delete to remove the selected component.
🎨 2D Canvas View
Grid: 0.5cm squares (bold lines every 5th line. Grid sizes can be changed in the settings on the right)
Dashed outline: Visible component boundary
Colored shape: Actual drill/cut area
Drag & Drop: Click and drag components to reposition
Navigating 2D Canvas: Use middle or right mouse button to pan the view. Scroll to zoom in/out. Double-click to reset zoom and pan.
🔮 3D Preview
Mouse:Left-click drag to rotate view
Right-click (or Shift + Left-click): Pan camera
Scroll: Zoom in/out
Helper cube (top-right): Shows orientation, clicking on a side will face the camera towards that side
Toggle: Show/hide 3D view with switch at bottom-right
Resize: Drag horizontal bar between 2D and 3D views
⌨️ Keyboard Shortcuts
Ctrl + O - Open existing JSON file
Ctrl + S - Save current JSON to computer
Ctrl + Z - Undo last action
Ctrl + Shift + Z or Ctrl + Y - Redo last undone action
Shift + R - Add rectangle component
Shift + C - Add circle/rounded component
R - Rotate selected component by 45° (when component is selected)
Ctrl + D - Duplicate selected component (when component is selected)
Delete - Delete selected component (when component is selected)
Escape - Deselect component
Enter - Apply component property changes
🎨 Theme & Display Options
Dark Theme: Toggle between dark and light interface themes
Show 2D Designer: Toggle 2D canvas view on/off
Show 3D Preview: Toggle 3D preview on/off
Show Grids: Display grid lines on 2D canvas for easier alignment
Snap to Grid: Components automatically snap to grid intersections when moved
Use Inches: Switch between centimeters and inches for all measurements. Note that this is only for displaying purposes. All MIDILLI tools use centimeters internally.
Grid Size: Customize grid spacing (default: 0.5cm x 0.5cm)
Show JSON - Preview generated data structure to review
Export JSON - Download .json file for MIDILLI tools to generate your SVG file for laser engravers, G Code for CNC machines, or STL file for 3D printing. Shortcut: Ctrl + S
Important: Do not forget to use the command under Command to Execute in the tools.
⚠️ Tips & Notes
Components snap to 0.5cm grid for precision
You can switch between dark and light themes using the toggle in the settings menu.
Drill diameter or width and length must be at least 0.01cm
Side colors in 3D: ■ Front (Red), ■ Back (Green), ■ Top (Blue), ■ Bottom (Yellow), ■ Left (Magenta), ■ Right (Cyan)
