Sometimes you just need a quick and dirty way to mock up a UI prototype! I built this out of frustration with existing that are either too complex, cost money or require being a guru in order to build a screen mock up. I wanted something that I could use sitting in front of a customer or prospect and build on the fly. I also wanted something that could easily be extended with your own custom widgets. tools design So here it is: _Edit description_s3.amazonaws.com Web Page Builder by @mikeptweet It looks like this: The instructions are simple: Right Click to Add/DeleteShift+Click To MoveCtrl+Click To ResizeAlt+Click To CloneDouble Click to Edit TextCtrl+S To Save Right clicking on the surface provides a drop down of widgets you can add to the page: You move things around by holding down the key while dragging the mouse. SHIFT You resize things by holding down the key while dragging the mouse. CTRL You copy or clone things by holding down the key while clicking the item and dragging it. ALT Like so: https://s3.amazonaws.com/mparsons/PageBuilder.gif You can edit text by double clicking on any text. You delete things by using the Delete option in the drop down. You can paste HTML content from the clipboard either in a DIV or SPAN or you can use the IFRAME element to paste more complex HTML. To edit the HTML directly, hit F12 to open the browser developer tools and do your edits there. When you are finished, press to save your page locally (make sure you select as the save option). Saving the web page this way also gives you the full editing environment inside your saved page so you can work offline or send the page to someone else for more editing. CTRL+S Web Page Complete Adding you own widget Simply save the page using the option and edit the file using your favourite text editor. You need to add an item to the options list as specified here: CTRL+S var options= {Add:"",Delete:"Delete",Button:"<button>Button</button>",Checkbox:"<input type=checkbox />",Date:"<input type=date />",Div:"<div>Div</div>",File:"<input type=file />",Iframe:"<table border=1><tr height='1%'><th>iframe</th></tr><tr><td valign=top><iframe frameBorder=0 height=100% width=100% srcdoc='<body contenteditable=true>paste stuff here'></iframe></td></table>",Image:"<img src=#/>",Label:"<label>Label</label>",Link:"<a onclick='return false' href=#>Link</a>",List:"<ul><li>Item 1</li><li>Item 2</li></ul>",NumList:"<ol><li>First</li><li>Second</li></ol>",Password:"<input type=password />",Radio:"<input type=radio />",Range:"<input type=range />",Section:"<fieldset><legend>Section</legend></fieldset>",Select:"<select><option>Dropdown</option></select>",Span:"<span>Span</span",Table:"<table border=1><tr height='1%'><th>Col1</th><th>Col2</th><th>Col3</td></tr><tr><td> </td><td> </td><td> </td></tr></table>",TextArea:"<textarea>TextArea</textarea>",TextBox:"<input/>",Title:"<h1>Header</h1>",Video:"<video style='border:1px solid grey' controls></video>"}; You can also edit any of the existing widgets by modifying the HTML. At this point you are simply editing an HTML page so you can also add your own CSS Styles and/or Scripts to the page. I hope to add more features to make this easier soon. This is an early prototype and I’d love to get your feedback on this or any of my other articles on Hacker Noon! _and optionally export it to the clipboard or Excel, JSON, HTML, Tab or Comma delimited file formats! In an earlier…_medium.com Mike Parsons - Medium Thanks and please recommend this article if you find it useful!
