The best way to teach the web is with the web.
Create interactive live-coding presentations.

Use the arrow-keys go between slides.

Basic Code Editor

Basic split code editor is created by adding a class of "coder-editor" to a textarea. Press run, then modify some code and press "run" again

How to use it?

Download a release and modify the index.html with your slide. Slides are created with by adding a class='slide' to any element. CoderDeck areas are created by adding a class of 'coder-editor' to a text area, for example (prettyprint is also bundled, so, as below just use a <pre class='prettyprint'>.. to highlight static code):

<article class='slide slide-list'>
  <h2>This is a second level heading!</h2>
  <p>Here is some descriptive text, followed by a split editor. </p>
  <textarea class='coder-editor'>

Full Page Code Editor

Basic full page code editor is created by adding a class of "coder-editor-full" along with "coder-editor" to a textarea. Press run, then press "back", then modify some code and press "run" again

Pulling from Gists

Use a class of 'gist' and an attribute of data-gist-id for the Gist ID

Custom template and custom language

You can create custom reusable templates for wrapping the editor code with custom <script> tags. You can also specify the mode the editor should display (xml, css, javascript or the default htmlmixed )

Instant Update Sample

Try modifying any of the HTML on the left, the right side should updated periodically as you type. This is done by adding a class of "coder-editor-instant" to the textarea

Javascript/jQuery Example

Javascript works normally as well, libraries and external css (including jquery) can be included in the coderdeck template.

Local Storage

If you want your changes to a slide to survive between page reloads you can define a data-save attribute which will save it to the attributes value in localstorage. Make a code change, hit run/save and reload this slide.

You can also use the same 'data-save' attribute on mulitiple slides to keep the same code moving forwad


If you want to add a solution to an exercise, you can add a coderdeck-solution script tag in the slide