Some Deeply Technical Details (for those who like them)

No JavaScript framework has been used in the development of PageLayer. But this choice was made in order to specialize the code and focus on the web editing functionalities while staying light and fast: the PageLayer core JavaScript file weighs about 100KB when obfuscated and runs well on machines with limited performances.

PageLayer is using a light, home-made core library with basic interface components (windows, buttons, drop-down menu) and a collection of functional behaviors, dedicated to the HTML editing job (sortable Drag & Drop, inline Rich-text Editor, Image Editor, block resizing). The user interface is extended with hight level components like the Tool bar, Color Picker or File Explorer.

The editing behaviors of elements on the page are triggered by giving them a dedicated HTML attribute (block, img). This is why it is very easy to add PageLayer to a simple and static HTML website. These attributes can also be placed in a way to restrict which parts of the page are editable.

How it's Built

PageLayer is a JavaScript application heavily relying on DOM manipulation and Ajax requests. Though the largest part of the application actually runs in the browser, some PHP is currently handling the (limited) server side job.

When a user log into PageLayer from its website, the application is loaded over the HTML page and all elements that were given a "behavior" attribute become active and editable. All the editing work takes place in the browser until the application needs to communicate with the server.

For every action that needs to be saved (page save, picture upload or modification) an asynchronous query is sent to the server and will be dealt with by a very simple script: the server-side is basically a disk read/write interface.

Data is stored as flat HTML files so no database is needed and the resulting files are still human readable and editable. PageLayer can be added or removed from a website with little changes made to the HTML pages.

Because it is really simple, the server-side part of PageLayer is highly portable and will soon be released for other server scripting technologies.

The Image Editor

PageLayer's Image Editor has been made to handle the most basic web design needs when manipulating images: resize and crop to make it fits properly in the layout.

PageLayer's Image Editor works directly in the text flow and gives instant feedback on whether or not the image fits well, without relying on extra software.

Because the original image is preserved on the server, every new change is computed from the original resolution and quality is never lost. Once manipulated, the resized/cropped image is saved as an optimized copy that will be used on the page.

Just try it in the demo and see how easy it can be.