HTMLDecor Download

Full separation of essential content from site presentation

What ... is it?

HTMLDecor is a Javascript page template engine which runs in the browser.

With CSS you can change the styling of a whole site with one shared stylesheet.

With HTMLDecor you can change everything with one shared decor document - banner, navbars, ads, page-layout and stylesheets. Not only is it simple to setup and maintain, you'll cut the download time of every page, plus "pushState assisted navigation" comes for free.

How ... can I add it to my site?

In the simplest scenario

create a decor document (page-template) which is a regular HTML file
mark the content insertion points with @id
in your content pages mark the essential content containers with matching @id (and make these containers immediate children of <body>)
then add the following lines to your content pages:

<link rel="meeko-decor" type="text/html" href="/your/decor.html" /> <script type="text/javascript" src="/path/to/HTMLDecor/boot.js"></script>

HTMLDecor will run automatically to retrieve the decor document and merge it with the current document. After merging, the page will have the appearance of the decor document but with the real content from the current document inserted in positions designated by matching @id.

For specific details see the project page.

Why ... should I use it?

Do you have a mobile site separate from your main site?
Do your pages have tens or hundreds of KB of shared markup?
Does updating your site decor mean regenerating all the pages on your site even though they have no real changes?
Would you like a simpler build-chain for pages?

HTMLDecor addresses all these issues and more...

alternate page templates can be specified and the most appropriate one selected in the browser rather than on the server. This allows mobile and desktop sites to be be trivially unified.
site bandwidth is reduced as shared page content is no longer part of every page download
site decor can be updated without regenerating pages
pages need only contain essential content, leaving style definitions and behavior scripting in the decor document.
pushState-assisted-navigation is supported by the default configuration.

HTMLDecor provides the potential to easily improve the user-experience and reduce site maintenance whilst retaining usability for older and noscript browsers.

Where ... can I see it in action?

The best demonstration of HTMLDecor is with meeko-panner, a javascript bookmarklet that enables HTMLDecor to run on a growing list of sites.

I'm also using HTMLDecor for my blog.

Who ... can I ask for more help?

Contact the author via web or twitter.

See the project page and issues on github.

Other FAQs

Why is it called HTML Decor?

HTML: The page template must be a HTML file, the real page content must be a HTML file, and the merging involves moving HTML DOM elements.
Decor: While the page template components - banner, navigation, page-layout, stylesheets - are important to the site, they are secondary to the essential page content. Modifications typically don't change the essence of the page. From the perspective of the page they are just "site decor".

HTML is the power-lifter of putting content on the screen. HTMLDecor enables a site to maximize the power of HTML whilst leaving primary content untouched and useful to search-engines and older and noscript browsers.

Is this available from CDN

Yes, HTMLDecor is hosted on Amazon's Cloudfront CDN, which you can source with the line:

<script src="http://dist.meekostuff.net/HTMLDecor/2.0-stable/HTMLDecor.min.js"></script>

However, be aware of the issues with doing this:

If Cloudfront goes down then page rendering will stall until the browser times-out downloading the script.
The is no guarantee that the CDN service will remain available.
Cloudfront doesn't support HTTPS with CNAMEs. If you want to use HTTPS from CDN the line becomes:


    <script src="https://d3g4qkktqnw71.cloudfront.net/HTMLDecor/stable/HTMLDecor.min.js"></script>