We have improved the dashboard


We have significantly improved the dashboard. And by that we mean, now you can actually “see” what your weaves look like, and not a list of six letter keys in a table. Basically it looks more like a proper gallery/showcase. Currently, we have it setup to show 4 weaves at a time. Clicking each, would open the weave in “editor” mode. The gallery includes information like when was the weave created and how many page views it has received.

We now support true full-screen “demo” mode

full screen

Liveweave now supports full-screen “demo” mode. This mode is completely unobtrusive, so there will not be any Liveweave logos, menus, text etc. So if you want to “demo” your weave, just add the word “demo” at the end of the weave URL. For example, the source for the above example is available at http://liveweave.com/yPuTQa and to see it in full screen just go to http://liveweave.com/yPuTQa/demo. That’s it!

full screen demo mode

We now support drag-and-drop for HTML/CSS/JS files from the desktop

drag-and-drop 2To make development a tad easier, we have recently started supporting drag-and-drop. For example, if you have a HTML/CSS or JavaScript file in your computer, you can just drag and drop it in the respective panels (i.e. HTML file into the HTML panel, CSS file into the CSS panel, and so on), and just save it as a weave. You can then continue working on it from anywhere as long as that computer is connected to the web.

Once, you are done, you can download the weave anytime later! Of course, you can always use the traditional way of copying the contents of the files and pasting them into the panels, but drag-and-drop is definitely faster.

New list of JavaScript libraries, now in alphabetical order

js menu

We have a list of new JavaScript libraries and now they are in alphabetical order. A library should be now easier to find. A few more additions and we have to consider putting a search bar specifically for this purpose. Of course, jQuery is without a doubt still the most popular library out there, so we have a rather large hard-to-miss button to make it easier to add.

We will continue to add more JavaScript libraries, so keep an eye on this menu time to time.

We now support context-sensitive code-hinting for core JavaScript and jQuery!


Liveweave now supports context-sensitive code-hinting for core JavaScript and jQuery. What this means is that the next time you write JavaScript, it will be simpler…much more simpler! In addition to hinting all the available JavaScript and jQuery functions, there are JavaScript built-in templates that will help you write code even more faster. For example, if you choose the “for” loop keyword, you will see a list of options as to how you can use it in more than one way.

There is also built-in documentation, which shows up when you select a JavaScript (or jQuery) function or a keyword. The documentation is based on Mozilla Development Network, which is probably one of the best managed resources for learning JavaScript.

Unlike code-hinting for HTML and CSS, it is a much more complex setup for JavaScript (and jQuery). Not only there are hundreds of functions (that too can be used in various ways), a proper code-hinting technology needs to be context sensitive. What this means is that if you add a function (or variable) in your JavaScript code, it will start showing up in the code-hinting menu…in real-time. In short, there are several components involved, not just a list of keywords and functions.

A typical auto-complete/code-hinting menu is show below. You will notice several icons along with the definitions. These icons are mostly similar to the ones used in IDEs like Eclipse and others. For JavaScript keywords like do, for, if etc., you will also see something like “This is a KEYWORD…”.

js-hinting details 1

There’s a lot more to talk about this new and rather powerful feature, and we may be adding more information to this blog post later.

So, please try it…and feel free to let us know what you think about it!

Alert! Switching between themes has been disabled

night vision

Due to some rendering issues we had to temporarily disable / remove the Night Vision toggle switch. When the user switched to the “lighter theme” (dark text on white background), the scroll bars were disappearing. In addition to that, when the user was switching back to the default theme (light text on dark background), the scroll bars still didn’t show¬† up.

We will be working on this reported bug, but until then, switching between themes (i.e. the Night Vision toggle) will remain disabled.

We now support Emmet, formerly called Zen Coding!


Liveweave now supports Emmet (formerly called Zen Coding). In order to make HTML and CSS coding faster, Emmet is probably the most popular library out there. So choosing it was a no-brainer! So how does it work? Simple.

  1. Write your Emmet code (in the HTML5 or CSS3 panels)
  2. Select your Emmet code
  3. Click [Ctrl] + E in keyboard if you are using Windows, or [Command] + E if you are using Mac OS X.

That’s it! You will see your code automatically becomes “expanded”. Emmet works for both HTML and CSS. And if are interested to learn more about it and how it works, here are a few resources:

  1. Emmet official website
  2. Goodbye, Zen Coding. Hello, Emmet! by Smashing magazine
  3. Zen Coding at Google Code
  4. 7 Awesome Emmet HTML Time-Saving Tips by Designshack


Welcome “Tomorrow”, good-bye “Monokai”


We have, once again, updated our default theme. Our new default theme is Tomorrow. So, what was wrong with our previous theme Monkai then? Well, actually nothing. It is a beautiful by itself. However, at times, we noticed that some of the colors appeared too bright, especially at a higher display brightness. Now, that is fine for most people. However, we wanted to make sure, that all our users have an experience that is relatively more soothing to their eyes, especially since the default background is dark.

The light theme stays the same though. So, if you do not like our new default theme, then just click the Night Vision toggle switch.

Ability to download weave (HTML, CSS and JavaScript) as a ZIP file!

dowload zip

We now have the ability to save weaves as ZIP files. What this means is that you will now be able to download all the files together (HTML, CSS and JS) in a standard zip format, which when “unzipped”, will have a index.html, style.css (inside the css folder) and script.js (inside the js folder)! The downloaded file will be called source.zip.

One thing to keep in mind, in order the HTML to work correctly, make sure you have a <head> tag in your HTML code.


New Color & Palette Lab!


Color Lab

For all the color geeks out there, we have a new Color & Palette Lab. It is simple, very simple. Yet, it has pretty much all the colors (hex codes, e.g. #F5F5F5) you will ever need.

The list consists of:

1. Color List – This table includes all the important color names in HTML, e.g. GreenYellow. (#ADFF2F).

2. Secondary Colors – This large table consist of mixed colors (basically, the typical pastel colors).

3. Primary Colors – This table consists of the web-safe colors.

Note: Most computers today typically support at least 24-bit (16,777,216) colors. So any color you pick, should work in all computers.

Palette Lab

Although the Palette Lab initially seems to be a large white box, it actually consists of 14 small white textboxes. Clicking each of them will open up the Palette Editor. Select the colors you want to create the final palette. There are several buttons/controls in the Palette Editor, so you may want to play with it for a while to get a better understanding.

Try it now!


2 of 3