Synopsis

How to download a snippet.

You can download snippets in 2 formats: ZIP file, or .HTML5 standalone app file.

First, write your snippet, or open an existing one.

Then click on Project / Download in the main menu, and choose your format, That's all !

Now simply double click on the .html file to run it localy in your browser, or put it on your own web server !
Note that all the libs that you have included in project options will be included in this "one standalone .html5 application file"

From that file, you can for example create an installable desktop application using titanium
Or a mobile application using phonegap

PS: Note that the download fonctionnality requires flash 10 :'( ...

If you want to get the entire zipped folder, click on "Download as standalone .html5 application (zipped folder)"

PS(2): The "download feature" is THE No1 reason, why you should use use natively supported libaries. It's the only way to generate standalone applications from snippets that can run offline.

How to use the code editor.

The editor let you edit 3 files: html5 file, css3 file and the Js file.

1 - This is your current snippet's menu

  • + New will load an empty snippet in the editor. Don't forget to save you current work before starting new snippet.
  • + Open let you open your local/server saved snippets, or try public snippet samples.
  • + Save As to save your snippet into local storage or on server. (ctrl+s)
  • + Run will run current snippet(ctrl+enter)
  • + Options helps you include libraries in your snippet or specify onload function (entry point of your app)
  • + Share will let you share current snippet
  • + Download will let you download current snippet in 2 formats: single, standalone .html5 file, or .zip archive
  • + Author's page will open this snippet author's page (if it has author of course)
2 - This is help/information/documentaion. Use it to get help.
3 - This is your profile's menu
4 - An html5 snippet has 3 types of content: html5, css3, js. This tabs will help you to navigate between them.
     Note that you can also write all your code in the html5 tab, just like it was a regular web page.
5 - This is your code, the content of selected tab (html5, css3 or js)
6 - This is the preview of your snippet. When you open a snippet, it doesn't run automaticly. Simply click on this play button to run it!

How to update user informations.

User infos @html5snippet.net are: nickname, short description, website url and avatar image. All 4 are optionnal and set to empty when you create new account.

You can access all this infos on your profile's page: Log in, then go to http://html5snippet.net and click on "My Home Page" in the top-right corner menu.

You will be redirected to your profile page. You can edit your nickname, description and website directly inplace. To upload new avatar image, simply drag and drop an image from your desktop to the blue "Drag and drop your avatar image here" zone. Note that this feature only works on Firefox and Chrome. On others browsers you will not be able to upload your avatar :'/ .... until they support the html5 file api properly !

On this page, you can also manage your snippets's visibility. You can make them private by unchecking public. When a snippet is private, only you can see/edit/run it.
To be able to share a snippet with visitors and other users, it has to be public!
"Visible here" checkbox, if is UNchecked, means that visitors who go to your profile page will not see this snippet, but if the visitor have direct url to the snippet, and this snippet is public, he/she will have access(read/fork) to it.

Note that since 23 may 2011 when you create and save new snippet on server, it will be public by default and NOT visible at your home page.

The automaticly generated slide-show is made from all your public snippets (see below).

How to use native libraries.

"Native libraries" are open source javascript libraries/frameworks that we officialy support.
To use a library in your snippet, open project proprties panel, by clicking on "project" -> "options" in the main menu. Then pick a library in the list and click on add. We'll choose jquery here. Then, close project properties panel.

That's all!, you can now use jquery in your snippet !

Multiple libraries can be used in a project. Note that load order is important ! On the screenshot below, jQuery is loaded in first and three.js in last. The app doesn't manage dependancies for you, so if you, for example want to use jQueryUI, you have to load jQuery too..., and before jQueryUI.
For instance, the limit is set to 6 libs/frameworks max by project.

How to use unsupported libraries.

We support 39 libraries/frameworks, but it may be that you want to load other, unsupported libraries.
To do that, you simply declare an external script/stylesheet in html !
On a snippet below, for example, we load cofeescript from github, and jquery from jquery.com:

PS: If you use some awesome library, that we don't support, please drop us an email to contact@html5snippet.net, we'll see what we can do :)

Keyboard Shortcuts

IDE Keyboard Shortcuts      (snippet's source code has to be focused for this to work):
    - CTRL + S               saves current snippet
    - CTRL + Return          runs current snippet
    - CTRL + UP              switch to next tab
    - CTRL + DOWN            switch to previous tab

Run Zone Keyboard Shortcuts (snippet's "run zone"(left side) has to be focused)
    - F12                    toggle firebug lite
	
Firebug is not included by default anymore, but you can
include it as library (go to project/options/libs/ then add firebug lite as library, then run your snippet again)