A simple guide to creating your first Vista Gadget

Gadgets are simply HTML and JavaScript. The SideBar exposes a bunch of API's which are accessible from JavaScript and extends the HTML schema. In this short guide we will greate a simple "Hello World" gadget.

The four steps

  • Create a directory to contain the gadget files.
  • Create an HTML page for our "Hello World".
  • Create the XML file for the gadget manifest.
  • Test the created gadget with Vista Sidebar.

Step 1 - Create a directory to contain the gadget files

Locate and open your gadgets folder. Click the Start button, and then click Run. In the Open text box, type:

%userprofile%\AppData\Local\Microsoft\Windows Sidebar\Gadgets

This will open an explorer window containing your Gadgets folder.

Create a new folder named HelloWorld.gadget

Step 2 - Create an HTML page for our "Hello World".

Create a file named HelloWorld.html and update it's contents with the following HTML:

(NOTE: The source is available for download at the bottom of this article)

    <title>Hello, World!</title>
            margin: 0;
            width: 130px;
            height: 65px;
            width: 130px;
            top: 24px;
            text-align: center;
            position: absolute;
            font-family: Verdana;
            font-size: 10pt;
    <span id="gadgetContent">
        Hello, World!

Step 3 - Create the XML file for the gadget manifest

Now you need to create a Gadget manifest. This is an XML file that specifies the core HTML file and defines the gadget's properties, such as name, icon, and description. Every gadget manifest is named gadget.xml.

To create the gadget manifest, copy and paste the following text into a new file. Save your file with the file name gadget.xml. For localization support, make sure that you save your gadget.xml file with UTF-8 encoding.

<?xml version="1.0" encoding="utf-8" ?>
    <name>Hello, World!</name>
    <author name="Your Name">
        <info url="www.example.com" />
    <copyright>&#169; 2007</copyright>
    <description>My first gadget</description>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="HelloWorld.html" />
            <platform minPlatformVersion="1.0" />

Step 4 - Test the created gadget with Vista Sidebar

  • Right click on the Sidebar. Choose Add Gadgets...
  • Double click the Hello World Gadget

The gadget should now appear on your sidebar. If you want to make updates to the Gadget HTML then view the changes you need to remove it from the sidebar and add it again for the changes to become visible.

Next Steps....

Why not try adding a background to the Gadget (see GadgetBackground), changing the height or editing the CSS to make it appear differently.

Author Paul Hayman

Paul is the COO of kwiboo ltd and has more than 20 years IT consultancy experience. He has consulted for a number of blue chip companies and has been exposed to the folowing sectors: Utilities, Telecommunications, Insurance, Media, Investment Banking, Leisure, Legal, CRM, Pharmaceuticals, Interactive Gaming, Mobile Communications, Online Services.

Paul is the COO and co-founder of kwiboo (http://www.kwiboo.com/) and is also the creator of GeekZilla.


Ford said:

Hello - I just wanted to say you can upload your gadgets on this site http://www.gadgetsdownload.com we try to collect a good collection so people have some to choise of, if you are a beginner or PRO it dossent matter, we just want gadgets btw great Nerd site.

11/Apr/2008 23:39 PM

DaTval said:

I have created this gadget, but windows sidebar,can't find it. what to do? how to make installation program of the gadget?

04/Jul/2008 09:38 AM

phayman said:

DaRval, did you see the installer download in my article?

10/Jul/2008 10:59 AM

DaTval said:

Yes I've seen, and it's working very well, but I want to make it myself. I create folder Helloworld.gadget and paste this files in it. then moved this folder in gadgets folder. But I can't find them in sidebar

Can I suggest me how to create this instalation?

12/Jul/2008 21:10 PM

GadgetGuy said:

11/Aug/2008 02:17 AM

DaDroll said:


Stop tying to get DaTival to buy your crappy book.

02/Oct/2009 17:21 PM

Add Comment


Your comment has been received and will be shown once it passes moderation.