HTML5, CSS3 & JavaScript Playground

Liveweave is now in HTTPS!

Liveweave is now fully served over HTTPS! Basically all content inside (weaves, content, other apps like Vector Editor, CSS Explorer, Color Explorer), all of them are finally going HTTPS! You will notice the “padlock” sign near the browser’s address bar (see above pic).

So, what does this mean? Well, in short, any data sent over Liveweave is fully secured. And, all requests coming in over HTTP will be automatically re-directed to HTTPS, to enforce the security.

We now support Auto-save in browser


We now support auto-save in browser. What this means is that, every 5 secs, Liveweave will save a copy of the current weave you are working on (and settings like theme and panel layout), in your browser’s local storage. So, the next time you visit Liveweave again, you will automatically come back to exactly where you left off the previous day. Great, right?

What this also means is that if you accidentally close the browser or if your computer suddenly “hangs up“, there is a high chance your work is not lost! However, if you want to store and access the same weave from a different computer or a different browser, you will have to save it to the cloud or download the weave.

Note: You can only have one browser session active in order to use this feature. If you have multiple sessions of Liveweave running at the same time, the application will save the content of the last browser session you close.

Feel feel to email us if you have any questions.


Introducing the Liveweave CSS3 Code Generator


Liveweave now feature a CSS3 Code Generator! While CSS3 has been around a while, it is still hard to remember all the CSS3 tags.  So after much thought, we decided to introduce a CSS3 Generator to make a designer’s/developer’s life easier. You can now experiment with CSS3 gradients, text shadows, box shadows, transforms, rotate, skews, border radius and a whole lot more!

Think the CSS3 Code Generator as a lab. You can change several CSS3 parameters in real-time using just sliders, drop-downs and buttons. Once you are done, just click the “copy” icon to the right to copy your code. Click the “Back to Editor” (on top-right) to go back to the editor mode and paste the CSS code into your class or id. That’s it!

To use this feature, go to:

1. Tools menu > Generate CSS code using CSS3 Code Generator


2. Click the gear icon as show below.

CSS3 gen icon

We have introduced a real-time CSS validator (CSS lint)!


Liveweave already has an awesome real-time JavaScript validation (lint) service, for a long time. This is very useful if you want to write a 100% valid JavaScript code. And now to make things even better, we have introduced CSS lint as well.

So here’s your chance to write (and share) a fully validated CSS code. And again, everything is in real-time, so no need to click a Validate button. The warnings and errors will show up in the code/panel gutter while you write your CSS.

We now support collaborative real-time programming and screen sharing

team up 1

We have recently introduced a new feature, Team Up, a collaborative real-time programming and editing service! With the help of Mozilla’s TogetherJS integration, you can now use Liveweave to remotely teach, share, review and help other programmers and designers…completely in real-time!

Not only can you do screen sharing, you can chat with your fellow team mates as well. Team Up currently supports Chrome, Firefox, Safari and Opera, but not IE.

If you have questions about this new feature, please send your emails to or use our feedback form.

Note: The collaboration feature does not work for the JavaScript panel. This is a known bug, and unfortunately we do not currently have a solution for it.

team up 2

We now support keyboard shortcuts


Update (06/21/2014): We have temporarily disabled the “Save” shortcut feature because of some server-side issues. In the meantime, please click the “Save” button in order to save your weaves.

We have finally introduced keyboard shortcuts, a feature that has been long time coming!

For example, you can now save your weaves just by pressing Command ⌘ + S (in Mac) or Ctrl ^ + S (in PC). Another example: if you have switched off the Live Mode (especially when you are doing extensive JavaScript programming), you can now use Command ⌘ + R (in Mac) or Ctrl  ^ + R (in PC) to run your code/weave manually.

We will continue expanding the keyboard shortcuts to make Liveweave feel more like a traditional desktop-based source code editor.

Single-click full screen option for all panels!


Liveweave now supports fullscreen code editing for all the panels, i.e. HTML, CSS, and JavaScript. The best part? It is just a single-click away! So, now in addition to all the flexibility of panel resizing, you now have the ability to write your code in fullscreen, just like your old school desktop editor!

We have brought back the Night Vision

night vision toggle

We originally had the option to switch between themes using a toggle, but had to take it down when several users complained about scroll bars acting weirdly. In addition to that, there were several other bugs associated with it. Now, we have finally brought back the “Night Vision” toggle, so that users can enjoy both the worlds!

In addition to that, Liveweave can now save the state of the theme and the layouts. What that means is that, if you save a weave with a specific layout and your theme of choice, say the ‘light theme’, the next time you access the weave, you will see the same layout and theme with which you originally saved it.

A horizontal ‘ruler’ for responsive design


We have recently introduced a new horizontal ruler! The purpose for the ruler is mostly to help you create and test responsive designs, although it can also be used for various other features as well. You can easily change the size of the preview area and see how your weave renders accordingly.

The best part? The ruler size supports up to a 4K resolution (i.e. 3840 px horizontally)! Yep, that’s right. You can make use of the ruler even if you are building something for a 4k monitor.

1 of 3