Veneer.js


No Fuss Custom HTML tags

Veneer.js enables custom elements.

Tag definitions are loaded from a single script tag. import more on the fly if needed. With veneer, you can develop your site or application using the custom elements, link the veneer script tag, and go home early. If you have existing publishing/build routines, veneer is just a few small js files that you can mix and match as needed.

veneer.js is related to projects like polymer.js and x-tags, but far simpler, somewhat less encompassing, and much smaller ( 5kb-16kb gzipped). Adding a single script file enables about everything you see here, and adding more elements is easy and simple.

Stand Alone Demos

Todo List Declarative HTML todo list application

MP3 Player Plays your mp3 collection in the browser.

Contacts App Declarative HTML contact info manager demo

Veneer Mustache A full-featured yet simple demo of templating, partial DOM updates, and model observation.

Stand-alone Demos (Gists)

{{#rez}} {{textContent|.slice(0,-5)}}
{{/rez}}

On-Page Demos

These simple examples demonstrate common veneer tag usage. Most of the available tags are shown below. Most of them are native, meaning just the full veneer script is all you need. A few more complex tags are imported later, outside of the full veneer file, so they don't weigh down the basic set of widgets. On this page, the externals are "markdown", "qrcode", "syntax", and "firebug", loaded from an import call at the bottom of the page.

Sparkline Tags

Bars

Line

Blue Bars

Date Picker
File Tag

A better file input tag.

Rate Tag

What do you think about stuff? Tell the world using the ubiquitous star rating system.

Mapping Tags

Text Formatting Tags

Markdown demo

** Markdown Header ** this is text, _emphasised text_, and **bold text** in md. List example * one * two * three

HTML demo

HTML Code Viewer Demo

HTML markup in this tag will appear un-rendered

Local Time Format Tags

Given time is '04/05/2013 4:42:42 AM UTC'

time only:
date only:
date+time:
custom format:

difference:


try modifying the time attrib to a new date or time

RSS Viewers

Yahoo News, limit of 4, updated every 5 minutes


try changing the limit attrib to 13 instead of 4

Slides Tag

This uses a slides tag to show a simple slideshow with optional fade and delay

images, slide fx

images, fade fx

text, fade fx

Headline One

Headline Two

Headline Three

Headline Four

Syntax Highlighting Tags

These use the veneer-syntax tag to colorize plain source code into pretty human-readable html

HTML demo

HTML Code Viewer Demo

HTML markup in this tag will appear un-rendered

CSS demo

fieldset { display: inline-block; width: 48%; min-height: 10em; vertical-align: top; padding: 0.4em; }

JS demo

//a simple async url fetch: veneer.ajax=function aGet(strURL, fnCallBack) { var e = new XMLHttpRequest; e.onload = function() { fnCallBack(e.responseText, e); }; e.open("GET", strURL, true); setTimeout(function(){e.send();}, 0); return e; };

SQL demo

SELECT Shippers.ShipperName,COUNT(Orders.OrderID) AS NumberOfOrders FROM Orders LEFT JOIN Shippers ON Orders.ShipperID=Shippers.ShipperID GROUP BY ShipperName;
Time Tags Plain Time:
With seconds:
Filesize Tags turn ugly byte counts into human-friendly terms:

902 bytes =

90210 bytes =

90210123456 bytes =

Sort and Filter Tags

Order and Filter the list item below:


Sort By:
  1. Sunday
  2. Monday
  3. Tuesday
  4. Wednesday
  5. Thursday
  6. Friday
  7. Saturday
QR Code Tags

http://danml.com/veneer/

Item Tag Builds an object from the inner form controls by name and value
Input Tag Input publishes form input values to form input attributes, allowing HTML snapshots:
Persist Tag

The html below will be remembered between page visits. If you put structured HTML in there, you can parse it out later. you can also persist script tags, which will fire when the page is reloaded. This allows concat to the tag content to cache (and execute upon load) code libraries.

Hello World.
Playlist Tag
Reorder Tag

Re-Arrange the days below using drag and drop:

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
Notify Tag

Desktop Notifications made easy.






Panel Tag

This uses a panel to show the files in the veneer code library