Fork me on GitHub


When checked, information about your box will be included in the left bottom corner of the PDF document for your reference.

Internal Box Dimensions

Please note that dimensions are internal, and define the space inside the box.

I.E Thickness of the material that's being cut

If you specify a value in this field, it will be used as a guideline, not an exact value [?]

Optional Settings

Note, that selecting anything except "auto" page size may split your design into multiple pages, but probably not the way you want it :)
<div aria-hidden='true' aria-labelledby='myModalLabel' class='advanced-info-modal modal fade' role='dialog' tabindex='-1'> <div class='modal-dialog modal-md'> <div class='modal-content'> <div class='modal-header'> <button class='btn-lg close' data-dismiss='modal' type='button btn-lg'> <span aria-hidden='true'>&#215;</span> <span class='sr-only'>Close</span> </button> <h1 class='modal-title' id='myModalLabel'>Advanced Options</h1> </div> <div class='modal-body'> <dl class='dl-horizontal'> <dt>Approximate Tab Width</dt> <dd> <p> If you specify a value in this field, it will be used as a <em>guideline,</em> not an exact value. The layout of the tabs on each side of the box contributes to the overall aesthetics of the final product. </p> <p> One of the key differences of MakeABox and other tools, is that MakeABox goes out of its way to create a symmetric tab layout. To accomplish this, we always choose an odd number of outward tabs per side, ie. 3, 5, 7, etc. The value you provide in this field helps the algorithm determine how many tabs per side to generate. </p> </dd> <dt>Kerf</dt> <dd> Kerf is defined as the cut width: the amount of material that laser removes while cutting. By adding a non-zero kerf you can compensate for the material removed, and make your box fit very snug. But be careful: too much kerf and the sides will not fit together. Default value is conservative at 0.007in. </dd> <dt>Margin</dt> <dd>is the spacing around the entire box layout</dd> <dt>Padding</dt> <dd>is the spacing between sides of the box as they are laid out.</dd> <dt>Stroke</dt> <dd class='last'> is the thickness of the line. <br> <br> For example, <strong>Epilog</strong> laser cutter requires stroke width of 0.001 inches in order to make a cut. </dd> </dl> </div> <div class='modal-footer'> <button class='btn btn-main' data-dismiss='modal' type='button'>Close</button> </div> </div> </div> </div> <!-- Modal --> <div aria-hidden='true' aria-labelledby='myModalLabel' class='modal fade' id='introduction-modal' role='dialog' tabindex='-1'> <div class='modal-dialog modal-md'> <div class='modal-content'> <div class='modal-header'> <button class='btn-lg close' data-dismiss='modal' type='button'> <span aria-hidden='true'>&#215;</span> <span class='sr-only'>Close</span> </button> <h1 class='modal-title' id='myModalLabel'>Welcome to Make-A-Box!</h1> </div> <div class='modal-footer'> <button class='btn btn-secondary' data-dismiss='modal' type='button'>Close</button> <button class='dont-show-notice btn btn-warning' data-dismiss='modal' type='button'>Close &amp; Don't Show Again</button> </div> <div class='modal-body'> <p class='lead'>Are you ready to make some boxes?! Let's go!</p> <p> Thanks for using MakeABox! After a long lull in development, and a week-long downtime (whoops!) this site is back online with a vengeance. It's running in a new cloud, with automated deployment, yada yada, and it's ready to make you some boxes. </p> <p> This super-duper awesome (ZOMG!) online box making thingy can generate a design for your custom sized box in a blink of an eye! You can then feed the PDF to a laser-cutter and cut sides for your box out of acrylic, wood, or even glass. The generated design includes notches that make the sides of the box snap into each other perfectly. Not only that, but the notches are symmetric, making it super easy to assemble the box. </p> <p> If you are interested in the back-story of this project, please check out the <strong> <a href=''> blog post announcing its release. </a> </strong> </p> <p> The PDF you generate will be downloaded straight to your computer. Typically you would want to import it into a graphics software (such as Adobe Illustrator&#8482;) for further customization, hole cutting, etc. </p> <div class='spacer-50'></div> <div class='text-center'> <img class="photo" src="/assets/notched-boxes-897be546dfc610dc5d481f222916eeba00645f6728c7ff14eaf4a4187573c040.jpg" alt="Notched boxes" /> </div> </div> </div> </div> </div> <!-- Modal --> <div aria-hidden='true' aria-labelledby='myModalLabel' class='thickness-info-modal modal fade' role='dialog' tabindex='-1'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button class='close' data-dismiss='modal' type='button'> <span aria-hidden='true' style='font-size: 30pt; float: right;'>&#215;</span> <span class='sr-only'>Close</span> </button> <h1 class='modal-title' id='myModalLabel'>Typical Acrylic Thickness Values</h1> </div> <div class='modal-body thickness-table'> <strong> <span class='inches'>Inches</span> <span class='mm'>Millimeters</span> </strong> <div class='spacer-20'></div> <br> <br> <span class='inches'>0.060</span> <span class='mm'>1.5</span> <br> <span class='inches'>0.080</span> <span class='mm'>2.0</span> <br> <span class='inches'>0.098</span> <span class='mm'>2.5</span> <br> <span class='inches'>0.100</span> <span class='mm'>2.5</span> <br> <span class='inches'>0.118</span> <span class='mm'>3.0</span> <br> <span class='inches'>0.125</span> <span class='mm'>3.2</span> <br> <span class='inches'>0.150</span> <span class='mm'>3.8</span> <br> <span class='inches'>0.177</span> <span class='mm'>4.3</span> <br> <span class='inches'>0.177</span> <span class='mm'>4.5</span> <br> <span class='inches'>0.187</span> <span class='mm'>4.7</span> <br> <span class='inches'>0.197</span> <span class='mm'>5.0</span> <br> <span class='inches'>0.220</span> <span class='mm'>5.6</span> <br> <span class='inches'>0.236</span> <span class='mm'>6.0</span> <br> <span class='inches'>0.250</span> <span class='mm'>6.4</span> <br> <span class='inches'>0.295</span> <span class='mm'>7.5</span> <br> <span class='inches'>0.312</span> <span class='mm'>7.9</span> <br> <span class='inches'>0.354</span> <span class='mm'>9.0</span> <br> <span class='inches'>0.375</span> <span class='mm'>9.5</span> <br> <span class='inches'>0.472</span> <span class='mm'>12.0</span> <br> <span class='inches'>0.500</span> <span class='mm'>12.7</span> <br> <span class='inches'>0.591</span> <span class='mm'>15.0</span> <br> <span class='inches'>0.625</span> <span class='mm'>15.9</span> <br> <span class='inches'>0.708</span> <span class='mm'>18.0</span> <br> <span class='inches'>0.750</span> <span class='mm'>19.1</span> <br> <span class='inches'>0.944</span> <span class='mm'>24.0</span> <br> <span class='inches'>1.000</span> <span class='mm'>25.4</span> <br> <span class='inches'>1.125</span> <span class='mm'>28.6</span> <br> <span class='inches'>1.500</span> <span class='mm'>38.1</span> <br> <span class='inches'>1.750</span> <span class='mm'>44.5</span> <br> <span class='inches'>2.000</span> <span class='mm'>50.8</span> <br> <br> </div> <div class='modal-footer clear'> <button class='btn btn-lg btn-main' data-dismiss='modal' type='btn-lg btn-main'>Close</button> </div> </div> </div> </div> <div class='row'> <div class='col-sm-1'></div> <div class='col-sm-10'> </div> <div class='col-sm-1'></div> </div> <div class='row'> <div class='col-sm-0 col-md-0 col-lg-1 col-xl-1'></div> <div class='col-sm-12 col-md-12 col-lg-10 col-xl-10'> <div class='panel donate'> <div class='panel-body'> <div class='paypal-logo'> <form action='' method='post' target='_blank'> <input name='cmd' type='hidden' value='_s-xclick'> <input name='hosted_button_id' type='hidden' value='Y4XR246KD644W'> <input alt='Donate' border='0' name='submit' src='' style='margin: 0 auto;' title='PayPal - The safer, easier way to pay online!' type='image' width='200'> <img alt='' border='0' height='1' src='' width='1'> </form> </div> <div class='small'> Hi! I am thrilled that you, and many others are using this tool to generate laser cutter outlines. To keep this site up and maintain the software consumes time and energy, especially as new features are requested and bugs are reported. If you like MakeABox, then — please consider donating literally AMY AMOUNT is much appreciated. </div> </div> </div> </div> <div class='col-sm-0 col-md-0 col-lg-1 col-xl-1'></div> </div> <div class='row'> <div class='col-sm-0 col-md-0 col-lg-0 col-xl-1'></div> <div class='col-sm-12 col-md-6 col-lg-4 col-xl-3'> <div class='panel units'> <div class='panel-heading'> <i class='pull-right fa fa-question-circle fa-lg' id='introduction'></i> <h1 class='panel-title'>Units</h1> </div> <div class='panel-body measurements'> <input type="hidden" name="commit" id="commit" value="false" /> <input type="hidden" name="units" id="units" value="in" /> <div class='mkbx-radio'> <input type="radio" name="config[units]" id="config_units_in" value="in" checked="checked" /> </div> <label for="config_units_in">Inches</label> <div class='mkbx-radio'> <input type="radio" name="config[units]" id="config_units_mm" value="mm" /> </div> <label for="config_units_mm">Millimeters</label> </div> <div class='clear'></div> <div class='panel-body measurements'> <div class='mkbx-radio'> <input type="radio" name="config[page_layout]" id="config_page_layout_portrait" value="portrait" checked="checked" /> </div> <label for="page_layout_landscape">Landscape</label> <div class='mkbx-radio'> <input type="radio" name="config[page_layout]" id="config_page_layout_landscape" value="landscape" /> </div> <label for="page_layout_portrait">Portrait</label> </div> <div class='clear'></div> <div class='panel-body measurements'> <div class='mkbx-radio'> <input type="checkbox" name="metadata" id="metadata" value="1" class="mkbx-checkbox" /> </div> <label for="metadata">Print Info?</label> <div class='clear'></div> <small> When checked, information about your box will be included in the left bottom corner of the PDF document for your reference. </small> <div class='clear'></div> </div> </div> </div> <div class='col-sm-12 col-md-6 col-lg-4 col-xl-4'> <div class='panel box-dimensions'> <div class='panel-heading'> <i class='pull-right fa fa-info-circle fa-lg' id='thickness-info'></i> <h1 class='panel-title'>Internal Box Dimensions</h1> </div> <div class='panel-body'> <p class='small'>Please note that dimensions are <strong>internal</strong>, and define the space inside the box.</p> <p class="form-label-and-element"><label for="config_width">Width</label><input type="number" name="config[width]" id="config_width" min="0.0" step="0.01" class="numeric" tabindex="1" /></p><p class="form-label-and-element"><label for="config_height">Height</label><input type="number" name="config[height]" id="config_height" min="0.0" step="0.01" class="numeric" tabindex="1" /></p><p class="form-label-and-element"><label for="config_depth">Depth</label><input type="number" name="config[depth]" id="config_depth" min="0.0" step="0.01" class="numeric" tabindex="1" /></p> <hr> <p class="form-label-and-element"><label for="config_thickness">Thickness</label><input type="number" name="config[thickness]" id="config_thickness" min="0.0" step="0.01" class="numeric" tabindex="4" /></p> <p class='small'> I.E Thickness of the material that's being cut </p> <hr> <p class='form-label-and-element'> <label for='config_notch'> Tab Width <a class='notch-help' href='#'> [?] </a> </label> <input class='numeric' id='config_notch' min='0.0' name='config[notch]' step='0.01' type='number'> </p> <p class='small'> If you specify a value in this field, it will be used as a <em>guideline,</em> not an exact value <a class='notch-help' href='#'> [?] </a> </p> </div> </div> </div> <div class='col-sm-12 col-md-12 col-lg-4 col-xl-3'> <div class='panel'> <div class='panel-heading'> <i class='advanced-info pull-right fa fa-info-circle fa-lg'></i> <h1 class='panel-title'>Optional Settings</h1> </div> <div class='panel-body'> <p class="form-label-and-element"><label for="config_kerf">Kerf</label><input type="number" name="config[kerf]" id="config_kerf" value="0.0024" min="0.0" step="0.01" class="numeric" /></p><p class="form-label-and-element"><label for="config_margin">Margin</label><input type="number" name="config[margin]" id="config_margin" value="0.125" min="0.0" step="0.01" class="numeric" /></p><p class="form-label-and-element"><label for="config_padding">Padding</label><input type="number" name="config[padding]" id="config_padding" value="0.1" min="0.0" step="0.01" class="numeric" /></p><p class="form-label-and-element"><label for="config_stroke">Stroke</label><input type="number" name="config[stroke]" id="config_stroke" value="0.001" min="0.0" step="0.01" class="numeric" /></p> <div class='form-label-and-select'> <label for="page_size">Optional PDF Page Size</label> <small> Note, that selecting anything except "auto" <strong>page size</strong> may split your design into multiple pages, but probably not the way you want it :) </small> <select name="config[page_size]" id="config_page_size"><option selected="selected" value="">Auto Fit the Box</option> <option value="2A0">2A0 46.8 x 66.2</option> <option value="4A0">4A0 66.2 x 93.6</option> <option value="A0">A0 33.1 x 46.8</option> <option value="A1">A1 23.4 x 33.1</option> <option value="A10">A10 1.0 x 1.5</option> <option value="A2">A2 16.5 x 23.4</option> <option value="A3">A3 11.7 x 16.5</option> <option value="A4">A4 8.3 x 11.7</option> <option value="A5">A5 5.8 x 8.3</option> <option value="A6">A6 4.1 x 5.8</option> <option value="A7">A7 2.9 x 4.1</option> <option value="A8">A8 2.0 x 2.9</option> <option value="A9">A9 1.5 x 2.0</option> <option value="B0">B0 39.4 x 55.7</option> <option value="B1">B1 27.8 x 39.4</option> <option value="B10">B10 1.2 x 1.7</option> <option value="B2">B2 19.7 x 27.8</option> <option value="B3">B3 13.9 x 19.7</option> <option value="B4">B4 9.8 x 13.9</option> <option value="B5">B5 6.9 x 9.8</option> <option value="B6">B6 4.9 x 6.9</option> <option value="B7">B7 3.5 x 4.9</option> <option value="B8">B8 2.4 x 3.5</option> <option value="B9">B9 1.7 x 2.4</option> <option value="C0">C0 36.1 x 51.1</option> <option value="C1">C1 25.5 x 36.1</option> <option value="C10">C10 1.1 x 1.6</option> <option value="C2">C2 18.0 x 25.5</option> <option value="C3">C3 12.8 x 18.0</option> <option value="C4">C4 9.0 x 12.8</option> <option value="C5">C5 6.4 x 9.0</option> <option value="C6">C6 4.5 x 6.4</option> <option value="C7">C7 3.2 x 4.5</option> <option value="C8">C8 2.2 x 3.2</option> <option value="C9">C9 1.6 x 2.2</option> <option value="EXECUTIVE">EXECUTIVE 7.2 x 10.5</option> <option value="FOLIO">FOLIO 8.5 x 13.0</option> <option value="LEGAL">LEGAL 8.5 x 14.0</option> <option value="LETTER">LETTER 8.5 x 11.0</option> <option value="RA0">RA0 33.9 x 48.0</option> <option value="RA1">RA1 24.0 x 33.9</option> <option value="RA2">RA2 16.9 x 24.0</option> <option value="RA3">RA3 12.0 x 16.9</option> <option value="RA4">RA4 8.5 x 12.0</option> <option value="SRA0">SRA0 35.4 x 50.4</option> <option value="SRA1">SRA1 25.2 x 35.4</option> <option value="SRA2">SRA2 17.7 x 25.2</option> <option value="SRA3">SRA3 12.6 x 17.7</option> <option value="SRA4">SRA4 8.9 x 12.6</option> <option value="TABLOID">TABLOID 11.0 x 17.0</option></select> </div> </div> </div> </div> <div class='col-sm-0 col-md-0 col-lg-0 col-xl-1'></div> </div> <div class='row'> <div class='col-sm-0 col-md-1 col-lg-2 col-xl-3'></div> <div class='col-sm-12 col-md-10 col-lg-8 col-xl-6'> <div class='panel panel-actions'> <div class='panel-body'> <div class='pull-right'> <button class='btn-success text-center btn-lg' id='make-pdf' tabindex='5' type='submit'> Generate PDF </button> </div> <div class='pull-left'> <div aria-label='Action Group' class='btn-group' role='group'> <div aria-labelledby='save-settings-group' class='dropdown-menu'> <a class='dropdown-item' href='#' id='save'>Save Current Settings</a> <a class='dropdown-item' href='#' id='restore'>Recall Previously Saved Settings</a> <a class='dropdown-item' href='#' id='clear'>Reset Form to Defaults</a> </div> <button aria-haspopup='true' class='btn-lg btn-info dropdown-toggle' data-toggle='dropdown' id='save-settings-group' type='button'> Settings </button> </div> </div> <div class='clear'></div> </div> </div> </div> <div class='col-sm-0 col-md-1 col-lg-2 col-xl-3'></div> </div> <div class='row'> <div class='col-sm-0 col-md-1 col-lg-2 col-xl-2'></div> <div class='col-sm-12 col-md-10 col-lg-8 col-xl-8'> <div id='disqus_thread'></div> <script> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'makeabox'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function () { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + ''; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript> Please enable JavaScript to view the <a href=''>comments powered by Disqus.</a> </noscript> </div> <div class='col-sm-0 col-md-1 col-lg-2 col-xl-2'></div> </div>