WDPT - Web Designer's Productivity Tool - website layout editor



WDPT (Web Designer's Productivity Tool) is a website layout editor (WYSIWYG) for browsers (no installation, no plugins). It is intended to be used during tableless website slicing process.


Welcome to "Web Designer's Productivity Tool"!
How do you use this? To "execute" it, open it in a browser locally (save the page first). To show images inserted into another directory, edit the image directory field in "menu".
The primary peripheral used to control this software is the keyboard.
T - Show text representation of layout (this is probably why you use this tool... ). If you want to copy/paste HTML, copy/paste it with the comment that is following the markup. You may modify generated content as you wish, but don't edit and don't remove that comment!
M - Show menu. Enter text editing mode to change things in menu.
` (the key on the left side from key 1 on some keyboards) - Enter text editing mode (this means you can change some things like image src, image directory or width of centred layout). To edit image alt text, edit the normal text of the non image and then switch the component to image.
BN - Make next or "before" structure the current one.
IO - Insert structure before or add after current structure.
ASDW - Position of current structure (use Q mode for pixel precision).
UHJK - Change size of current structure (use Q mode for pixel precision).
FG - Change background (default is 0), if background is -1, the structure becomes image, if background is -2, the structure gets background image, control image using menu.
ZX - Change positioning style of structure (what you've done is shown in the menu).

To make your website more correct, try finding and using a validator and follow their instructions.

Click on structure to "select" it. WDPT (Web Designer's Productivity Tool) has a simple drag and drop.
There's also a save in the JSON feature, "save as" in your browser (not in all browsers).
If you want to create fixed-width centred layout, set it up in menu.


Use a good web browser!

This is a free online JavaScript website layout editor, no installation, no plugins - enjoy it in any good browser. The software uses MOOPH module (Module for Object Oriented Pseudomultithreaded Hypertext).

It is recommended to use this software on a device with a keyboard (without a keyboard this software doesn't make sense)!

WDPT (Web Designer's Productivity Tool) history

WDPT (Web Designer's Productivity Tool - website layout editor) was originally published as part of the pseudomultithreading research project. Now it's on its own domain. I used to call it "Instead of a webdesigner tool", but later I found out that even if you use this tool there are still some webdesigners skills needed (during tableless website slicing you need to know HTML and CSS). I've created this software because I have a good experience with floating layouts (they work the same in all browsers). It's a single person project / one man show. Making tableless websites is not easy, so it can not be much easier to use this editor.


Every social activity (like, share, tweet, plus, ...) and donation is welcome. If you have an idea for improvement, feel free to contact me via email below. Also please send me the email with a link to the website you've created with WDPT.


I've created Czech localization of the project. You may find it here. Czech help for print is here.


Versioning starting 3.00 here.

Enjoy this website layout editor and create beautiful tableless websites as effectively as possible! Do the website slicing quickly.

© 2012-2016 Cenek Svoboda, svobo.c@gmail.com

PayPal Pixel
Get version with tree structure:

Bitcoin: 1KG1CABoioqunp6t9TFPi4BawCAVZ4Kfbd

Facebook page, Google Plus author page, Google Plus page, Twitter account