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:
It looks like this:
The instructions are simple:
Right Click to Add/Delete
Shift+Click To Move
Ctrl+Click To Resize
Alt+Click To Clone
Double Click to Edit Text
Ctrl+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!
Thanks and please recommend this article if you find it useful!
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
