Practice Your Web Design Skills Online with JavaScript App Rendr

JavaScriptSearch
Tuesday, June 13, 2006; 03:50 AM

Rendr is an online application that creates a live preview for CSS and HTML code inserted into a dialog box on the page.  It is a useful tool for light development work, and a nice example of today's web technologies, including the possibilities of JavaScript.  You can find it at http://gregtaff.com/rendar2.html .

Rendr-as-a-Greasemonkey-script's fearsome, fearsome logo.

Rendr allows the online editting of two separate fields: Markup and CSS.  They are rather self-explanatory--Markup is where you write the HTML tags, and CSS is for all the style selectors, values, and properties.  The visuals resulting from writing code appear to the left.  That is, if you are a Firefox user.  Rendr does not work with other browsers.

The various components of the page can be moved and resized in order to enable the typing of large block of text, as well as a clear view to the resulting layout.

The online tool is also available as a free Greasomonkey script.  Greasemonkey is a Firefox extension that allows you to add functionality to the browser via external JavaScript code.  Rendr as a Greasemonkey script, however, is somewhat limited in functionality--it does not work with remote style sheets, which are widely used.  You might want to stick to that Web Developer extension.

Rendr was created by web developer and illustrator Greg Taff. 

Screenshot of Rendr.