Rendera

Your HTML

HTML markup HTML HAML Markdown

<table id='test_table'>
<table id='test_table'>
   <thead>
     <tr>
       <th>One</th>
       <th>Two</th>
       <th>Three</th>
       <th>Four</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Foo</td>
       <td>bar</td>
       <td>baz</td>
       <td>Fuge</td>
     </tr>
     <tr>
       <td>Foo</td>
       <td>bar</td>
       <td>baz</td>
       <td>Fuge</td>
     </tr>
     <tr>
       <td>Foo</td>
       <td>bar</td>
       <td>baz</td>
       <td>Fuge</td>
     </tr>
     <tr>
       <td>Foo</td>
       <td>bar</td>
       <td>baz</td>
       <td>Fuge</td>
     </tr>
   </tbody>
 </table>
 
 

Your CSS

CSS Markup CSS Sass SCSS

Your Javascript (no script tags needed)

Script Markup JS CoffeeScript ES6

Examples

Each example will load HTML, CSS, and Javascript into the editor tabs. If you're running this with Javascript enabled, we'll also automatically render the examples.

CSS

CSS Cascade example (All browsers)
Multiple border colors on boxes (Firefox 3.5+)
Horizontal menu from a list (All browsers)
Shutterfly Button (IE10, Firefix, Chrome, Safari)
Shadows on boxes (Firefox 3.5+, Safari 4, Chrome)
Rounding Text Fields (Firefox 3.5+, Safari 4, Chrome)
Shadows on headings (Firefox 3.5+, Safari 4, Chrome)
Striping tables with CSS 3 (Firefox 3.5+, Safari 4, Chrome)
Columns in CSS3 (Firefox 3.5+, Safari 4, Chrome)
HTML 4 Floated 2-column Layout (All Browsers)
HTML 5 Floated 2-column Layout (All Browsers)

CoffeeScript

CoffeeScript and jQuery Alerts (All browsers)
jQuery AJAX GET with CoffeeScript (All browsers)
jQuery Append and Wrap with CoffeeScript (All browsers)
Compound Interest Calculator with AngularJS (All browsers)
Geolocation (Firefox, Chrome, Safari)

HAML and SASS

Rounded Corners with Sass (Firefox, Chrome, Opera, Safari)
Simple Sass example (All browsers)
Simple HAML example (All browsers)
Advanced HAML and SASS (All browsers)

HTML

HTML headings (All browsers)
Basic Elements (All Browsers)
Some images from Flickr (All browsers)
HTML5 Audio (Firefox 3.5+, Safari 4+, Chrome)
A simple table (All browsers)
Canvas simle shapes (Firefox, Chrome, Safari, IE9)
New HTML form fields (Firefox, Chrome, Safari, Safari on iOS, IE10)
In place editing with ContentEditable (Firefox 3.5+, Safari 4+, Chrome)
Placeholder text on forms (Safari 4, Chrome)

JavaScript

Document.write (All browsers)
Simple input and output (All browsers)
Better input and output (All browsers)

JavaScript - AngularJS

Simple databinding (All browsers)
Simple databinding with Controller (All browsers)
Markdown Live Preview (All browsers)

Other APIs

LocalStorage (IE8, Firefox 3.5, Chrome 4, Safari 4, Opera 10.5)
Geolocation (Firefox, Chrome, Safari)

jQuery

Append and Wrap (All browsers)
Simple AJAX GET request to grab the time. (All browsers)
jQuery dialog (All browsers)

Rendera makes learning HTML5 and CSS3 easy!

Type in your HTML and CSS to see it rendered. Each time you press the Enter key, the live preview will update.

You can save your results to a file - just look under the export tab.

Learn By Example

I'm adding HTML5 and CSS examples so you can start playing around with all of the neat stuff you'll be able to use. Just click the examples tab, choose an example, and see it rendered immediately.

Javascript Support

You can try out some Javascript too. We've even loaded jQuery, jQuery Tools and jQuery UI so you can experiment with those libraries too!

Other Markup

I use HAML and SASS in a lot of the web work I do. You can use HAML and SASS instead of HTML and CSS if you'd like. This is where the source tab comes in handy - you can see your HAML and SASS converted to HTML and CSS in real-time. This is a great way to learn how to use these new markup languages to quickly develop web pages.

Security and Safety First

We've disabled Ruby evaluation in HAML markup, so you can only use HAML to generate HTML tags. You can't use it to do complex Ruby expressions.

Finally, we save people's code here, but it's not private, it's not secure, and it could damage your computer if you followed a link here. We're not responsible, and if people can't behave themselves we'll take the permalink feature away. So be nice to this service and be nice to your fellow web users.

Have fun learning, and go build something awesome.