dabblet

help

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”.

F.A.Q.

Where can I report bugs?

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!

What about JavaScript?

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.

Keyboard shortcuts

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).

License

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!

Press

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: