Introducing dabblet: An interactive CSS playground

I loved JSFiddle ever since I first used it. Being able to test something almost instantly and without littering my hard drive opened new possibilities for me. I use it daily for experiments, browser bug testcases, code snippet storage, code sharing and many other things. However, there were always a few things that bugged me:

  • JSFiddle is very JS oriented, as you can tell even from the name itself
  • JSFiddle is heavily server-side so there’s always at least the lag of an HTTP request every time you make an action. It makes sense not to run JS on every keystroke (JSBin does it and it’s super annoying, even caused me to fall in an infinite loop once) but CSS and HTML could be updated without any such problems.
  • I’m a huge tabs fan, I hate spaces for indenting with a passion.
  • Every time I want to test a considerable amount of CSS3, I need to include -prefix-free as a resource and I can’t save that preference or any other (like “No library”).
Don’t get me wrong, I LOVE JSFiddle. It was a pioneer and it paved the way for all similar apps. It’s great for JavaScript experiments. But for pure CSS/HTML experiments, we can do better.
The thought of making some interactive playground for CSS experiments was lingering in my mind for quite a while, but never attempted to start it as I knew it would be a lot of fascinating work and I wouldn’t be able to focus on anything else throughout. While I was writing my 24ways article, I wanted to include lots of CSS demos and I wanted the code to be editable and in some cases on top of the result to save space. JSFiddle’s embedding didn’t do that, so I decided to make something simple, just for that article. It quickly evolved to something much bigger, and yes I was right, it was lots of fascinating work and I wasn’t able to focus on anything else throughout. I even delayed my 24ways article for the whole time I was developing it, and I’m grateful that Drew was so patient. After 3 weeks of working on it, I present dabblet.

Features

So what does dabblet have that similar apps don’t? Here’s a list:

  • Realtime updates, no need to press a button or anything
  • Saves everything to Github gists, so even if dabblet goes away (not that I plan to!) you won’t lose your data
  • No page reloads even on saving, everything is XHR-ed
  • Many familiar keyboard shortcuts
  • Small inline previewers for many kinds of CSS values, in particular for: colors, absolute lengths, durations, angles, easing functions and gradients. Check them all in this dabblet.
  • Automatically adds prefixes with -prefix-free, to speed up testing
  • Use the Alt key and the up/down arrows to increment/decrement <length>, <time> and <angle> values.
  • Dabblet is open source under a NPOSL 3.0 license
  • You can save anonymously even when you are logged in
  • Multiple view modes: Result behind code, Split views (horizontal or vertical), separate tabs. View modes can be saved as a personal preference or in the gists (as different demos may look better with different view modes)
  • Editable even from an embedded iframe (to embed just use the same dabblet URL, it will be automatically adjusted through media queries)
Here’s a rough screencast that I made in 10 minutes to showcase some of dabblet’s features. There’s no sound and is super sloppy but I figured even this lame excuse of a screencast is better than none.

I’m hoping to make a proper screencast in the next few days.
However, dabblet is still very new. I wouldn’t even call it a beta yet, more like an Alpha. I’ve tried to iron out every bug I could find, but I’m sure there are many more lingering around. Also, it has some limitations, but it’s my top priority to fix them:
  • It’s currently not possible to see or link to older versions of a dabblet. You can of course use Github to view them.
  • It currently only works in modern, CORS-enabled browsers. Essentially Chrome, Safari and Firefox. I intend to support Opera too, once Opera 12 comes out. As for IE, I’ll bother with it when a significant percentage of web developers start using it as their main browser. Currently, I don’t know anyone that does.
  • It doesn’t yet work very well on mobile but I’m working on it and it’s a top priority
  • You can’t yet add other scripts like LESS or remove -prefix-free.
  • Hasn’t been tested in Windows very much, so not sure what issues it might have there.
I hope you enjoy using it as much as I enjoyed making it. Please report any bugs and suggest new features in its bug tracker.

Examples

Here are some dabblets that should get you started:

Credits

Roman Komarov helped tremendously by doing QA work on dabblet. Without his efforts, it would have been super buggy and much less polished.

I’d also like to thank David Storey for coming up with the name “dabblet” and for his support throughout these 3 weeks.

Last but not least, I’d also like to thank Oli Studholme and Rich Clark for promoting dabblet in their .net magazine articles even before its release.

Update: Dabblet has its own twitter account now: Follow @dabblet

  • http://twitter.com/tjbarber09 T.J. Barber

    It’s beautiful, Lea!! I’m going to be using this alot. And also, I’m using Chrome on Windows and it seems to be working fine. =)

    • http://abarcarodriguez.com Alejandro Abarca R

      Works: Chrome/Firefox/Opera under Linux
      Don’t work: Midori under Linux

  • http://abarcarodriguez.com Alejandro Abarca R

    Amazing! I’ll help you out searching for bugs and send you some ideas. Congratulations, amazing work!

    • http://leaverou.me Lea Verou

      Thank you!

  • Anonymous

    That is completely awesome. Looking forward to seeing it develop!

  • http://twitter.com/jonshariat Jonathan Shariat

    Lea this looks awesome, I can’t wait to use it!

  • http://www.erikphipps.com Erik Phipps

    Lea, I love how you don’t post for three weeks then drop some awesome tool on us! 

  • http://twitter.com/thebabydino Ana

    There are a couple of small problems with the inline previewers for angles and durations (Chrome on Windows)

    • http://leaverou.me Lea Verou

      Ouchie. Can you please file a bug? https://github.com/LeaVerou/dabblet/issues

  • http://twitter.com/jiserra Juan Ignacio

    Wow, this has some amazing features that no desktop app owns, amazing work Lea!

  • http://twitter.com/thebabydino Ana

    There are a couple of small problems with the inline previewers for angles and durations (Chrome on Windows) – 1st image.

    Totally unrelated, the YouTube embed in the post comes over the notice bar -2nd image.

    • http://internuts.se/ internuts

      I just tested on Chrome under Windows 7 and I do not see that problem.

    • Marco

      Similar problem with Chrome on XP, anyway great job Lea!

  • Jeroen Franse

    Saving was easy, but opening a gist made me think. I read your blog post, even watched the whole screencast. After looking at the url I realised: ‘off course, the gist number!’
    Apart from that, WOW!

  • http://twitter.com/PowerMugen Mugen Sama

    seems nice and easy, but I’ve got one big problem to test it more… I can’t type the ‘ # ‘ character, because when I type “alt gr ” I’m redirected to the result tab … 
     

  • Jeroen Franse

    When I copy text  from the dabblet editor and paste there, line breaks are added before and after the pasted text. It doesn’t happen when I copy from somewhere else (the adress bar)
    Windows, Chrome.

    • http://leaverou.me Lea Verou

      Where are you trying to paste? I just tried to paste in TextEdit and it worked fine.

      • Gabriel Petrioli

        Confirming this bug. Copying anything from inside your editor to another place inside your editor, introduces line-breaks before and after the pasted text.
        To reproduce just select a word and copy/paste it on itself..
        Windows/Chrome

      • Jeroen Franse

        Copy from and paste inside the dabblet editor itself. Created an issue.

  • http://twitter.com/glsee See Guo Lin

    Brilliant!

  • Pingback: xhtml css templates – Introducing dabblet: An interactive CSS playground | Lea Verou | XHTML CSS - Style sheet and html programming tutorial and guides

  • http://twitter.com/dumaurier Josh Vogt

    This is a a great tool and there’s a hell of a lot of polish for what you’re calling an alpha release. 

    One small thing, the keyboard shortcuts collide with Safari’s for navigating to sites in the bookmark bar (if your site was the first in my bar Command-1 would take my there not to the CSS screen).

    • http://leaverou.me Lea Verou

      Yes, I noticed that. However, both Ctrl and Cmd works, so you could use Ctrl instead in Safari. :)

      • http://twitter.com/dumaurier Josh Vogt

        Awesome! Problem solved. 

  • http://twitter.com/jameswillweb james williamson

    Thank you for everything you do and how much you give back to the community. It’s humbling…

  • http://twitter.com/adantj Adan Alvarado

    I follow you on github and I started seeing that you were constantly uploading gists and updating them, I was almost sure they had a reason :D.

    I really like what I saw so far, nice work!

  • http://twitter.com/DavideFantu Davide Fantuzzi

    Thank you Lea, nice tool ;) I like your works very much

  • Pingback: Introducing dabblet: An interactive CSS playground | Lea Verou - bookmarks

  • Piecu

    What I miss is to edit HTML and CSS on the same screen along with previewing the result (merge these three tabs into one).

    • http://leaverou.me Lea Verou

      Yup, many people have requested that and it’s really trivial to add. What I’m not sure is how they should be laid, e.g. three rows? three columns? a column with CSS+HTML and another with the result? etc. 
      Ideally, the developer should be able to specify a custom layout for each tab (css, html, result), so I’m wondering what would be a UI for that that’s both easy to use and understand, and reasonably easy to code.

      • http://twitter.com/PauldeWouters PauldeWouters

        CSSDesk does this: 
        http://cssdesk.com/

        • http://fatal.myopenid.com/ Andrey

          Unfortunately CSSDesk and Dabblet don’t support IE 8 — must have for another couple years at least.

        • http://leaverou.me Lea Verou

          That’s what the full page result is for :)

  • Pingback: Web Design Weekly #25 | Web Design Weekly

  • http://twitter.com/operatino Харитонов Роберт

    Would be great to have zen coding inside dabblet

  • http://twitter.com/lucienimmink lucien immink

    Wow, awesome tool!

  • Coffee? Yes, please.

    Okay, you have some serious ninja skills.
    Is dabblet open source?

    • http://leaverou.me Lea Verou

      Thanks!

      Yes it is, but with a non-profit restriction (NPOSL license). Fork it on github: https://github.com/LeaVerou/dabblet/

  • http://rathersplendid.net Zander Martineau

    Really incredible work Lea, thank you for this.

  • http://www.cdettmar.com C. Dettmar

    I already love it, and I’m already using it haha
    I tried to use some js on it but didnt worked, but I’m not sure if it is an issue or if dabblet doesn’t support it, it has support at all?

    • http://leaverou.me Lea Verou

      I haven’t really tested it with JS. It should work, if properly placed inside <script> tags.

  • http://twitter.com/tsironakos Dimitris Tsironis

    Ok, this is seriously mind-blowing and cool. I had several nerdgasms the first minutes with it. I would dare to say, it’s life-changing.

    Also, I want to marry the color palette of the text highlight and the popups for the color and gradients. I want these features in my editor NOW!

    Damn you, Lea. You ‘ve done it again!

    • http://leaverou.me Lea Verou

      Thank you!

  • http://twitter.com/tsironakos Dimitris Tsironis

    Ok this is seriously cool and mind-blowing! I think it’s life-changing in terms of sharing CSS & HTML snippets.

    Also, I love the color palette of the syntax highlighting and the popup boxes for the color and gradients etc. I want these features in my editor NOW.

    Damn you, Lea! You ‘ve done it again.
     
    I’ll contribute with bugs report or any idea I think it’s cool.

  • http://pulse.yahoo.com/_YDJRPMWHRS52RBOPJURVS4LKEE Bridget Stewart

    Wow! Nice job!

  • http://twitter.com/Luc_Bietry Luc Biétry

    Une traduction en français ? Bravo et merci.

    • http://www.stookstudio.com/ Erwin Heiser

      Dude, seriously? Le monolinguisme est une maladie curable :)

  • http://twitter.com/andyhume Andy Hume

    Really nice, Lea. Great work.

  • http://irvbriscoe.com Irving Briscoe

    sooo cool. thanks

  • Pingback: Dabblet, WordPress, Hell Week - pancake theorem

  • http://pioul.fr Pioul

    Looks really promising! Still a few things to work out, such as editing HTML, CSS, and previewing on the same page (like JSfiddle, minus the JavaScript), but i really like it.
    Especially contextual tooltips, when usefulness meets fanciness!

  • Pingback: On web apps and their keyboard shortcuts | Lea Verou

  • http://www.google.com/profiles/taecilla Tae

    Amazing! Now you are my hero!

    • NexAloud

      I have not used this application before, I think this is something new to try. From your explanation on this page, this application seems to provide optimal support on the web. exede broadband

  • http://twitter.com/andrewsfg Andrews F.G

    Lea Verou. Thank you so much. This tool help me so much in the tests of CSS3, animations etc. I  ’m a fan of your work. Greetings from Brazil.

  • Anonymous

    This is a great catalyst, thank you! One thing you could do that would probably be easy, and would make good use of dabblet would be to offer some koans.

    Some html, and an image of a design that we need give the HTML (and a reference to a good learning source, for those of us without the experience to work on them).

    As a developer, I’ve found this approach incredibly effective. Lots of small focused challenges can teach me more in a few hours than working without specific direction for a few weeks.

  • Kai Mallea

    Thanks for this, it’s a great utility.

  • CodePsd

    I would love to use in-browser editor on my desktop instead of my regular code editor. I just wish you will add some features like I am trying to on my super alpha test stage editor so that I can stop developing mine and use yours. See here -> http://codepsd.com/editor .

    Great job Lea!  

    • http://leaverou.me Lea Verou

      Dabblet isn’t really meant to be a full in-browser editor, it’s meant for quick tests. If you want an in-browser editor, take a look at Cloud9 IDE (http://c9.io/), I think you’ll love it :)

      • CodePsd.com

        Dabblet will be just what I want for in-browser editor. I am only waiting to see if you will add code completition to it. I don’t need anything else. The only thing is I am want to use it offline so I will need to somehow disable the result.html and make it insert code directly into iframe.  

        You could make an offline editor from it too. Get some people to help you. Then charge for it or accept donations. I would definety donate for dabblet cause it’s just freakin awsome!

  • Pingback: Weekly Web Roundup for December 18th 2011

  • http://twitter.com/greenido Ido Green

    This is so powerful… thank you for the idea and execution! great stuff!

  • Eruptia

    What a wonterful job you’ve done right here, as always ! Thank you so much Lea, this is an amazing app’, very useful.

    Kep going ! :)

  • Pingback: Webdesign-Adventslink #20: Live coding mit Dabblet « Aperto-Blog

  • Pingback: Dabblet in fun on Friday | FunctionSource Development

  • Anonymous

    Wow, brilliant!  Adding to my go-to tool list

  • Pingback: dabblet: un nuovo CSS playground - Davide FantuzziDavide Fantuzzi

  • http://thinsoldier.com/ thinsoldier

    Pleasantly surprised by how many keyboard shortcuts I was able to find/guess correctly. Great tool.

  • Mot Tie

    I would love to see some way to add a url pointing to the dabblet within the gist… maybe as inside of the css comment. I’m asking because when I follow someone on Github, I can see they made a dabblet, but then I need to figure out the url to go see it… 
    http://dabblet.com/gist/ then the gist they made. Thanks! Rob

    • http://leaverou.me Lea Verou

      I’d love to do this (I’ve thought about it too), but I don’t like the idea of modifying people’s code, and github doesn’t offer any other way :(

      • Mot Tie

        What about adding the url inside of the “settings.json”?

        • http://leaverou.me Lea Verou

          What’s the point? It still won’t be clickable.

  • http://beben-koben.myopenid.com/ Beben Koben

    Truly the master Lea Verou of a kind woman ♥
    I have this
    http://prodigy-of-head.googlecode.com/svn/trunk/HTML%20EDITOR.html
    May be useful. It supports for all. Just stay put the tag.
    If CSS coded
    CODED HERE
    If Script
    SCRIPT CODED HERE

    But can not save :D
    ty

  • http://usb3gvn.com USB 3G

    Well, interesting post,
    thanks!

  • Sushil bharwani

    I see this as a very nice attempt. But have few issues like on chrome i am not able to login with my github account, one ie 7 it gives number of javascript errors.

    • http://leaverou.me Lea Verou

      IE7?? Which developer uses IE7 for crying out loud? I hardly care about that dinosaur on regular websites any more, let alone ones targeted to developers.

      What issue are you having with Chrome?

      • Sushil bharwani

        Well IE 7 is regular supported browser on our applications but lets forget it for a while. With chrome when i click on login and do a login with github it gives a white screen and the process halts. But yes like jsfiddle your app is already in my tool box. Also i added prefixfree to my set of tools

        • http://leaverou.me Lea Verou

          Browser support should be dictated by target audience. A website for a general audience might want to support IE7, but for a website targeted to developers (like dabblet) it’s pointless effort, since no developer uses IE7 as their main browser. Even IE9 isn’t supported, as the percentage of IE users in developer websites is tiny, even though it should be supported when a website is targeted to the general public.

          That said, if you make something you wish to test in IE7, you can use the “full page result” which is generated server-side, but use it with restraint as it consumes server resources.

          The Chrome issue you are describing however is indeed serious (although I’ve never heard anyone else have it). Could you please file a bug report here: https://github.com/LeaVerou/dabblet/issues and describe it in more detail? (i.e. Chrome version, operating system, are you logged in to github and any other detail that might be significant). Thanks!

        • Sushil bharwani

          While writing js in jsfiddle i see how it behaves in ie7 whether i need to add something specific for it or not. The site though developer centric should help developer to let him test his code in not so friendly browser also. Yes i understand that i could always do that by copying the code and then writing it back somewhere in local. 

        • http://leaverou.me Lea Verou

          Like I said, for this very purpose of testing in older browsers there is the “View full page result” feature. That will work anywhere, since it has none of the dabblet UI around it (provided your code itself works there of course).

        • http://twitter.com/JSushil sushil bharwani

          Thanks, I have never seen somebody replying so promptly. Way to go…

        • http://leaverou.me Lea Verou

          Hehe, thanks. I don’t always reply that quickly. I just haven’t started working yet for today. Sometimes I don’t have time to reply instantly and then I forget and end up never replying.

        • http://twitter.com/JSushil sushil bharwani

          I just read your css3 post on 24 ways and found it very well written and landed on your blogpost now reading your posts one by one. Really impressed with your writing and technical skills following you on twitter.

        • Al

          Seems to be down at the moment? Getting a lot of “Not found, sorry! :(” errors with the Parrallels favicon.

          If this worked, and if some IE-only JS redirected to this in IE, it’d be the perfect solution. People could post, “Here’s the fix for X IE bug, [link to dabblet]“. Then, when that link’s opened in Firefox, Chrome etc, they get a fully interactive dabblet, and when the same link is opened in IE, they get a read-only display that works.

      • Al

        Re “As for IE, I’ll bother with it when a significant percentage of web developers start using it as their main browser” and “Which developer uses IE7 for crying out loud?”

        A lot of developers would use tools like Dabblet and jsfiddle for developing workarounds and fixes for bugs in IE7 and IE8.

        Typical workflow: You’ve identified an element of your site that goes wrong in IE. You create a stripped-down general-case version of the problem on jsfiddle/dabblet to be sure you’ve identified the precise cause, you test, refine, test, refine, get something that works. Then finally, you post a link to your jsfiddle/dabblet on a site like stackoverflow or a blog, to show the world that this is how to get around that particular IE bug. People can load the same page in normal browsers and IE side by side to see how well the fix works, and they can tinker to check your fix really does work and easily share any improvements they come up with.

        It’s particularly useful if you’re on a Mac doing your IE testing
        through something like Virtualbox. Using a web tool beats
        local files because they’re a pain to push into and out of the virtual
        version of Windows in the virtualbox.

        Except we can’t do any of this, because neither the new look jsfiddle nor dabblet will even just show the output in IE.

        It would be fine if, on IE, none of the interactive stuff is shown, and there’s just a message saying “Dabblet doesn’t support IE. Here’s a read-only version of this gist.”, followed by the HTML and CSS output. That would be great. We can edit the code in a real browser, hit save, then refresh in IE.

        Just please at the very least, make it possible to view read-only output in IE.

        • http://lea.verou.me/ Lea Verou

          That already exists, since the dawn of Dabblet, it’s called “View full page result”. Even redirects there automatically on non-supporting browsers.

        • Al

          Thanks for the reply, but it didn’t do that for me. IE7 just loaded a blank page with a couple of empty UL li elements, and when I tried to use the ‘View full page result’ link, I get “Not found, sorry! :(” errors on all browsers (do I need an account to use that feature? If so, a more informative error message would help).

          I’m just using JSbin instead for now which (for now at least) works fine on IE for this purpose.

        • http://lea.verou.me/ Lea Verou

          The “Not found, sorry! :(” error is temporary. Happens sometimes, still haven’t found why.

  • Pingback: Derek’s Dope List Archive | Derek's Crib

  • Pingback: Introducing dabblet: An interactive CSS playground | Lea Verou | CSS Chops

  • http://www.webhostings.in/ Hosting companies

    Thank you for the information you have shared. Just continue writing this kind of post. I will be your loyal reader
     

  • Anonymous

    All existing things are really
    one. We regard those that are beautiful and rare as valuable, and those that
    are ugly as foul and rotten The foul and rotten may come to be transformed into
    what is rare and valuable, and the rare and valuable into what is foul and
    rotten.
    HydroxatoneMax BurnDouglasville bankruptcy lawyers

  • http://www.emenac.com/outsourcing/call_centre_service/ call center service

    Screen shoot of the CSS is looking very attractive

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | 蓝莓の技术Blog

  • Pingback: Dabblet,简洁实用的 HTML 和 CSS 代码段在线测试工具 » 全信息

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | 竹筱杰

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 - 前端绣

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | 朗沃教育-成都朗沃信息技术学校

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | 橙味网

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | 久违小屋

  • http://www.hotfrog.com.au/Companies/African-Mango-Plus-Australia-Official-Supplier/Hydroxatone-Bellaplex-Australia-NZ-1-99-Trail-Offer-For-Australia-And-New-Zealand-335136 hydroxatone

    Ok, this is seriously mind-blowing and cool. I had several nerdgasms the
    first minutes with it. I would dare to say, it’s life-changing.

    Also,
    I want to marry the color palette of the text highlight and the popups
    for the color and gradients. I want these features in my editor NOW!

  • Pingback: Dabblet,简洁实用的HTML和CSS代码段在线测试工具 | Asher Tech Blog

  • Geoff

    Thank you for this, Lea. Can we use media queries within Dabblet?

    • http://leaverou.me Lea Verou

      Of course, you can use any CSS you want.

  • JokiaJose

    I quite liked the design that you just created. In my opinion, designs and colors reflect the personality of the blog owner. I personally use a lot of pink on my blog because I am a woman. Greka

    • http://lea.verou.me/ Lea Verou

      Greka, you might be surprised to find that pink wasn’t always the “female” color. In the 19th century, blue was considered the female color, and pink the male color: http://en.wikipedia.org/wiki/Pink#In_gender

  • wheelchair lift

    We really should be using a lot of opportunity to get a lot of things that are important to many people. We must find a lot of important things on the existing site.
    wheelchair lift

  • NelsonGold

    I have not used dabblet application, but if this application could have a pretty good performance, I will try to use it even if the application is classified as a new application. botox in kingwood tx

  • AmeliaMins

    This application is easy enough to indulge me and work. In my opinion, this application could enable me to complete the work despite being in different places. Los Angeles medical insurance coverage

  • Pingback: 12个开发人员的实用代码编辑器 | J0s1ph's Blog

  • Pingback: 12 个开发人员的实用代码编辑器 | HTML5工作室

  • http://www.facebook.com/zeny.nunez Zeny Núñez

    This App is amazing I love it to practice css3 gradients effect
    You Rock!

  • Pingback: 12种开发者实用代码编辑器 | 开发者

  • Pingback: Stift & Blog | Tools für Journalisten und Blogger – Teil 4

  • Pingback: HTML/CSS/JavaScript Online Editors | Elaine Young - Front End Developer

  • http://www.cgfunding.com Dr. Stefan Gruenwald

    Hi Lea. Dabblet is a great tool for web development and testing out things. One of the improvements I could think of is adding a mouse-adjustable line under numbers. That would make it very user-interactive, similar to what Gabriel Florit at livecoding.io has done. You can also see this concept in action at: “Floating down a Tributary: A web interface for live and responsive visual coding” – http://enja.org/2012/05/07/floating-down-a-tributary/