791 reads

Simple Wire Framer / Web Page Builder in 2k gzipped.

by Mike ParsonsFebruary 7th, 2017

Too Long; Didn't Read

Sometimes you just need a quick and dirty way to mock up a UI prototype!

People Mentioned

featured image - Simple Wire Framer / Web Page Builder in 2k gzipped.

Sometimes you just need a quick and dirty way to mock up a UI prototype!

I built this out of frustration with existing tools that are either too complex, cost money or require being a design 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.

So here it is:

Web Page Builder by @mikeptweet_Edit description_s3.amazonaws.com

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 SHIFT key while dragging the mouse.

You resize things by holding down the CTRL key while dragging the mouse.

You copy or clone things by holding down the ALT key while clicking the item and dragging it.

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 CTRL+S to save your page locally (make sure you select Web Page Complete 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.

Adding you own widget

Simply save the page using the CTRL+S option and edit the file using your favourite text editor. You need to add an item to the options list as specified here:

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!

Mike Parsons - Medium_and optionally export it to the clipboard or Excel, JSON, HTML, Tab or Comma delimited file formats! In an earlier…_medium.com

Thanks and please recommend this article if you find it useful!