Basic Applet: Simple Input/Output

In this simple example, we'll create an applet that takes a shortened link and expands it to show the original URL.

1. Create a new applet

Sign in (opens in a new tab) to your Zipper account. On your dashboard, click the + Create Applet button. Provide a name for your applet (or use the generated name). When prompted to start from a template, choose the "Hello World" template.

2. Write your code

After your applet is created, you'll be redirected to the in-browser editor, with the main.ts file open.

main.ts is always the entry point of your applet, and it must export a handler function called handler.
The first argument to your handler function refers to inputs that are to be collected from your users. Zipper will use this argument to render a form for your applet.

For our simple example, let's replace the contents of main.ts with the following code:

export async function handler({ shortLink }: { shortLink: string }) {
  const linkWithProto = shortLink.startsWith('http')
    ? shortLink
    : `https://${shortLink}`;
  const response = await fetch(linkWithProto, { redirect: 'manual' });
 
  return response.headers.get('location') || linkWithProto;
}

3. Run your applet

There are two ways to run your applet: in the preview sidebar or by publishing the applet and using its URL.

Preview sidebar

As you update your code in the editor, the preview sidebar to the right will show you how your applet will behave when run. In our example, we input a shortened URL (such as https://bitly.com/98K8eH) and then click the ▷ Run button. This will run your applet right there in the page.

Publish and run

The other way to run your applet is to publish your recent changes and use the applet's URL. After you have saved your code, click Publish in the top right of the page. Then, click Update to update the live version of your applet with your latest changes. The "Publish" box that pops up also shows your applet's URL. You can use that URL to run the latest published version of your applet.

What You Can Build Interactive Applet