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 the 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 centered layout). To edit image alt text, edit the normal text of the nonimage and then switch the component to the 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 the size of the current structure (use Q mode for pixel precision).
FG - Change background (default is 0), if the background is -1, the structure becomes an image, if the background is -2, the structure gets the 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 the 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 centered layout, set it up in the 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 web designer tool", but later I found out that even if you use this tool there are still some web designers 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 are 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

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