rendur 2.1 - HTML / CSS Rendering Site

May 14, 2007 12:25 PM

rendur 2.1 - Dynamic HTML/CSS preview in your browser. A quick way to try out a bit of HTML and CSS code. Whatever you put in the box renders to its left. Now works in IE, though it's a bit better in Firefox (thanks to on-the-fly style sheet definitions). [via mefi projects]
posted by davebug (18 comments total)

This is just what I needed, thanks.
posted by chuckdarwin at 12:31 PM on May 14, 2007

Is rendur code part of MetaFilter comment preview?
posted by acro at 12:35 PM on May 14, 2007

For the CSS n00bs in the house.
posted by chuckdarwin at 12:36 PM on May 14, 2007

It would be more useful if the 'rendered' page was in a frame or iframe. having the input box on the same page like that is somewhat sub-optimal.
posted by delmoi at 12:36 PM on May 14, 2007

i enjoyed this
posted by goldism at 12:41 PM on May 14, 2007

neat!
posted by drezdn at 12:42 PM on May 14, 2007

It's worth noting that if you're using Firefox, you can get the same effect by installing Firebug and opening a blank page in Firefox to edit. The only thing you can't do (as far as I know) is create CSS for classes and IDs, but you can apply styles directly in the HTML and it'll show up.
posted by chrominance at 12:42 PM on May 14, 2007

Pure CSS popups
posted by acro at 12:47 PM on May 14, 2007

Remember the good old days when you got called out if your post wasn't about web design?

Good times...goooooood times...
posted by briank at 1:31 PM on May 14, 2007

hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher.
posted by quonsar at 1:33 PM on May 14, 2007 [1 favorite]

It's worth noting that if you're using Firefox, you can get the same effect by installing
Firebug...

Opera's built-in "view source" command displays a page's source code in a built-in editor. And the editor has an "apply changes" button for viewing the results immediately.

Firebug is very cool too, though.

I'm no web-design guru, that's for sure, so maybe I'm missing something obvious here. But it's already awfully easy to slap some HTML, CSS, and JavaScript into Notepad (or similar), and load the file right up in a web browser, isn't it? You can even open the file in multiple web browsers at once to see if your changes work differently in different browsers. How is this page better?
posted by Western Infidels at 1:53 PM on May 14, 2007

quonsar: hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher.

I agree. Can someone explain to me how this is useful?
posted by itchylick at 1:58 PM on May 14, 2007

quonsar: hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher.

I agree. Can someone explain to me how this is useful?

Especially given that there doesn't seem to be a way to set, change, or even determine what doctype the page gets rendur-ed in.
posted by ChasFile at 2:07 PM on May 14, 2007

I agree. Can someone explain to me how this is useful?

It's real-time, which makes it better than the notepad/taskbar scenario. It doesn't require additional software, which is also sometimes desired.
posted by Gary at 2:17 PM on May 14, 2007

The only thing you can't do (as far as I know) is create CSS for classes and IDs, but you can apply styles directly in the HTML and it'll show up.

If you click the CSS tab and then "Edit" above it, you can edit the stylesheet itself and add classes and IDs.

I was skeptical about Firebug at first, but now I use it as much as Dreamweaver for coding/editing (in conjunction with the Web Developer toolbar).

Just wish there was a Firebug for IE.
posted by dw at 2:24 PM on May 14, 2007

Mac users, see CSSEdit, Coda.
posted by armoured-ant at 3:31 PM on May 14, 2007

If you click the CSS tab and then "Edit" above it, you can edit the stylesheet itself and add classes and IDs.

Unfortunately that only seems to work if the page already had a separate stylesheet attached. Blank pages don't, and clicking on Edit when the CSS tab is active doesn't do anything. Though it occurs to me that the way around this is to slip a <style> tag in when editing the HTML.

Why is this useful? The real-time aspect is what does it for me. I don't have to think about where to save a temporary HTML file, or deleting it afterwards. I just pop open a new tab, enable Firebug, and off I go. I wouldn't use the method for anything serious; it's more for testing if that crazy layout idea you had actually works or not.

Firebug is amazing as a diagnostic tool, by the by. I'm not entirely sure how I managed to live without it. It's especially sad that there's no version for IE (well, there's Firebug Lite but you have to use it as a Javascript include, which isn't always ideal). Firefox is fairly predictable with its layout; with IE6 I never have a damned clue when something will break.
posted by chrominance at 3:35 PM on May 14, 2007

dw: "Just wish there was a Firebug for IE."

Bout as close as you'll get.
posted by armoured-ant at 3:51 PM on May 14, 2007