Live examples coming soon

Many of you have asked for live code examples that allow you to tweak the code and observe what happens. We agree that a feature like this would be of huge educational value and are actively working on providing it.

We plan to use a hosted (and probably customized) version of dabblet, an open source project built by yours truly. We decided to use dabblet because it’s a mature project that has been extensively tested in the community by a couple thousand users every day for almost a year, and because of its unique features, such as its CSS value previewers.

Before we integrate dabblet with WPD, we will need to make a few changes to it and add some features, most of which will be pushed to the website as well. The most significant of these changes is adding JavaScript integration, a long overdue feature. Also, we’ll have to fix a few bugs, improve cross-browser support, and strengthen security.

This work will take some time, but we are confident that when it’s out you will agree with us that it was absolutely worth it.

9 thoughts on “Live examples coming soon

  1. Why dabblet? dabblet do not execute any JavaScript easily. So the webplatform is only CSS and HTML? jsBin, jsFidle and the very promising would have been better

    • Boris, I’m afraid you missed this part:

      The most significant of these changes is adding JavaScript integration, a long overdue feature.


    • Hi Christian,

      The way we are thinking of integrating it, this won’t be an issue. The examples will still be stored in WPD and you would click a button to fiddle with them, at least in the beginning. :)

  2. Pingback: Lots of improvements coming to dabblet | Lea Verou

  3. Hi Lea,

    Sounds pretty neat. Your site ( was one of the inspirations that led to

    I wonder how you plan on integrating javascript support. Will you continue to take the jsFiddle/Dabblet route of dynamically building the html scaffolding or will you move to an iframe-based approach like Plunker?

    If your approach is going to be the latter, I think that you’ll find that Plunker is already pretty well set up for that. It is now the default previewing service for AngularJS’ documentation. There is a very simple POST endpoint at /edit/ that can bootstrap the editor.


  4. I really love this dabblet. I would like to implement a editor with prismjs and dabblet. Unfortunately I could not find a better articule on how to create simple dabblet editor with prismjs syntax highlighter. It would be great, if you can share any document for the same.