Basic Concepts

Basic Concepts


Each Applet is made up of Files that can import and export Typescript modules, just like any other Typescript project. These files make up functionality for an app that is deployed on our 'Run' domain, called

An applet requires a main.ts file that exports a function named handler. The 'Handler Function' defines the behavior of the root URL of the Applet.

Zipper Playground

Since the applet above is named 'greeting', the handler in main.ts would be responsible for the behavior of

Screenshot 2023-05-22 at 8.32.16 PM.png

When running it by visiting the Run URL and clicking 'Run', it should output the following results:

Hello, world!

You can also POST to the Run URL:

Hello, world!

Handler functions can just contain the business logic of your task, and we’ll handle all the inputs and outputs.

Let's go a little deeper on what else you can do with these functions.

Handler Function


A handler function can have optional arguments that you can pass through it. These can be anything: strings, booleans, arrays, and objects just as long as it's serializable as JSON. This is called the 'Inputs' object as is passed as a parameterized object in single argument to your handler.

Let’s start by modifying our greeting applet by letting you change the hello string and who you are saying hello to. Zipper uses the power of Typescript to help generate UI for all your inputs. Let's pass a string name to our function.

We generate UI for your function based on the the types in your Input. Check out the Input Types section for more information.

We generate UI for your function based on the the types in your Input. Check out the Input Types section for more information.

You can enter your inputs through the generated UI, by POSTing to your Run URL the entire inputs object, or prefill your inputs UI by using the query parameters. In this example,

  • visiting [](
  • sending a POST to with body { "name: "Earth" }
  • or manually filling out “Earth” in the input and clicking “Run”

Should all do the same thing and output:

Hello, Earth!


You can output more than just strings: objects, arrays, arrays of objets, even HTML. Zipper makes the output pretty and human readable for you, and even includes some basic components to make your Applet more powerful.

For more on Output, see the Output section.

Handler Context

You can also get some special information about the applet or the specific run through the 'Handler Context' object, which is passed as the second argument to a Handler Function. To make it easy and safe to see what you might have on the context argument, you can use the Zipper.HandlerContext type.

Let’s say you wanted to see if someone is signed into Zipper and use their email instead of the name input they passed.

Screenshot 2023-05-22 at 5.03.35 PM.png

If I’m logged in as 'Bruce' from 'Wayne Co' then my output might be something like:



main.ts is not the only file that can export a Handler Function. You can create a path for your applet by adding a new file and exporting a handler there. So let’s say you wanted to create a new path in Greeting at, you would create a salutations.ts (the path will match everything before the .ts in the filename) and export a handler function.

Screenshot 2023-05-22 at 5.15.39 PM.png

This path can be run independently so you can test each function by itself.

Library files

If you create a file, you do not have to export a handler. This will make it a 'Library' file, so that you can share code throughout your applet like a normal Typescript module.

Handler Config

You can also export a config file that will control behavior when visiting the 'Run URL'. Note, it doesn’t change how POSTing and API calls work. So for example, if you’d like my Handler Function to run when a user loads the page (instead of having to input) and define a default value, you can do it like this, you can do it like so:

Screenshot 2023-05-22 at 8.47.13 PM.png

Since it’s set to run and we’ve provided a defaultValue for name, a user will not have to click run when hitting the Run URL and instead get the output of handler:

Hello, world!

See more in the Config (opens in a new tab) section.

    Sign inJoin the beta
    © 2023 Zipper, Inc. All rights reserved.