Page Fabricator ( Version 0.5.6 ) [ New Blank Document ]
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Element HTML

Node Manipulation:

Insert New Code at Selection:
New Code:

Welcome to the Page Fabricator

This site aims to make web-page design faster and more enjoyable. Common actions such as moving or duplicating a page element, or applying html code changes then viewing the results, are reduced to a single keystroke or mouse click. When you finish using the tools here you can copy the html to use in your own site.

Click a page element, such as this paragraph, to select it. Use the buttons (or keyboard shortcuts) shown on the left to edit, move, copy / paste, duplicate, delete or add elements. For example, pressing "U" or "D" moves the selected item up or down in its container, pressing "C" or "S" selects an item's container or sub-item. Pressing "H" lets you edit the html of the selected item, etc. See the side bar for more shortcuts.


Try this quick tutorial to get an idea of what the program does.
  1. Click the "Welcome to the Page Fabricator" title if it's not already selected (outlined in red).
  2. Press N to select the next element (the first paragraph)
  3. Press D to move the selected element down (it will be placed after the second paragraph)
  4. Press I to move the selected element into the following element
  5. Press C to select the container of the selected element
  6. Press T to cut the current selection (and put it in the program's clipboard)
  7. Press L to paste the cut element inside the now-selected element (as its last sub-element)
  8. Press 4 then type <button>test</button> then press enter to insert a new button as the last element inside the current selection
  9. Press H to edit the html of the new element then tab to apply the changes
  10. Press W to select the main container.
  11. Look for underlined letters to find more shortcuts

Please send requests, comments, etc to admin at pagefabricator (no spam please) dot com