dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won't have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.
It currently only supports modern versions of Chrome, Safari and Firefox but I'm hoping to expand browser support soon.
It’s handcoded by Lea Verou with care but some other nice folks helped too. Special thanks go to Roman Komarov who helped tremendously with his tips & thorough QA and to David Storey that came up with the name “dabblet”.
Please report any bugs and suggest features in dabblet’s bug tracker. An extensive description and (for bugs) a reduced testcase are appreciated. Thanks for your effort towards making dabblet better!
JavaScript in <script> tags is not executed at the moment. This might change in the future. Currently, the only way to add JavaScript to a dabblet is through inline event handlers. Dabblet is CSS-focused. If your demo needs a lot of JavaScript, you might find something like jsFiddle or JSBin more helpful.
I’m a heavy keyboard user myself, so lots of effort has been put into making dabblet a breeze to use with the keyboard:
| Action | Result |
| ⌘S | Save if not saved, update if saved, fork if not own |
| ⌘1-8 | Go to first, second, third etc tab, provided they exist. |
| ⌘9 | Go to the last tab |
| ⌘⇧[ | Go to previous tab |
| ⌘⇧] | Go to next tab |
| ⌘- in editing mode |
Decrease font size |
| ⌘+ in editing mode |
Increase font size |
| ⌘0 in editing mode |
Reset font size to 100% |
| ⇥ in editing mode |
Enters a Tab (\t) character |
| ⇥ after selecting text |
Indents the selected lines (including partially selected lines) |
| ⇧⇥ after selecting text |
Removes one indent (Tab or space) from the beginning of each (partially) selected line. |
| ⌘/ in editing mode |
Comments the current selection (or line if there is none) or uncomments if within a comment |
| ⌥↑ / ⌥↓ | Increment/decrement value by 1 |
| ⇧⌥↑ / ⇧⌥↓ | Increment/decrement value by 10 |
| ⌃⌥↑ / ⌃⌥↓ | Increment/decrement value by 0.1 |
| ⎋ in editing mode |
The editing area loses focus, so after pressing ⇥ you can use the navigation bar through the keyboard |
Note: Wherever ⌘ is used, it means either ⌘ or ⌃, in both platforms. This wasn’t only done for cross-platform compatibility, but also because some browsers don’t allow overriding their default shortcuts.
In any case, if a keyboard shortcut doesn’t make sense, it’s deferred to the browser (for example ⌘9 when you’re already on the last tab).
All posted code belongs to the poster and no license is enforced.
I am not responsible or liable for any loss or damage of any kind during the usage of dabblet or provided code.
dabblet itself is open source software and is distributed under a NPOSL-3.0 license. Fork dabblet on github, we’re waiting for your pull requests!
The letters for the dabblet logo and all the icons that dabblet uses can be found in this font. For example usage, refer to the following dabblets: