Create a Code Preview Box on Your Website

If you post any client-side code on your website, it would be nice for people to be able to work with it and test or preview it live. This code uses an iframe to enable real-time viewing of your code. You could use this simply as a DHTML code editor, or you could even extend it to create your own WYSIWYG editor for your web application!

If you receive a JavaScript permission error when you're putting this on a test page, try closing and opening the page instead of just hitting refresh.

Here's an example of it in use:

<div align="center">
  <table style="width:500px; border:solid 1px #666;background:#f8f8f8">
    <tr>
      <td valign="top"><form name="form1">
          <textarea name="code" wrap="soft" onclick="focus(this.code);" 
		  style="border:solid 1px #999; padding:5px; width:250px; height:264px; scroll:auto;">
			my test code
  		  </textarea>
        </form></td>
      <td valign="top">
	  <iframe src="about:blank" name="preview" 
		 style="border:solid 1px #999;height:275px; width:250px; background:#ffffff" frameborder="0"></iframe>
	</td>
    </tr>
  </table>
  <input type="button" value="run code!"
   onclick="preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
  <input type="button" value="clear"
   onclick="document.form1.code.value='';preview.document.write(document.form1.code.value); preview.document.close(); preview.focus()" />
</div>