Zipper Quickstart

👾 Zipper is currently in private beta. If you’re interested in trying it out, please sign up for the waitlist (opens in a new tab). Things might break but they mostly won't.

What you need to know

Zipper is a platform for turning Typescript functions into web services, with UI and auth built for you.
Functions are encapsulated in Applets, small forkable packages responsible for accomplishing a specific task.
Applets are written in Typescript (opens in a new tab) and runs on Deno (opens in a new tab), an alternative runtime for JavaScript.
Every applet gets a working URL that you can call from anywhere, anytime.

How Zipper works

First things first, Zipper is an entirely online platform. There are no local installations or command line tools. You can write, deploy, and share applets entirely from your browser.

Each applet is made up of a collection of Typescript files. There's always a main.ts file that serves as the entrypoint to your applet. Any other Typescript file that exports a function called handler will be treated as a route.

Every time a route is hit, we run the handler function associated with that route. We automatically render whatever the handler function returns for you. If you need to collect information from the user, just add inputs to your function and we'll render a form to collect the inputs that get sent to the function.

Other applet functionality

Authentication: Applets can piggyback off of Zipper's user authentication to limit who can access an applet.
UI Framework: In most cases, Zipper can render the UI for your function's output automatically. If you need more control, you can use our UI framework to build more complex interfaces.
API endpoints: Send GET & POST requests to your applet's paths to trigger their handler functions.
Import packages via URL: No need for a package.json file. Just import packages directly from their URLs.
Built-in storage: Store data in your applet's storage and access it from any function within the applet.

Your first Applet

Step 1: Create an applet

Once you sign in to Zipper, you should land on a page that lists your projects. (You won’t have any since it’s a new account).

Click on the +New Applet button to create a new applet. Give your applet a name and click Create (this will skip the AI generation step for the sake of keeping things simple). By default your applet's code will be private (only visible to you) but anyone with the link to the published URL will be able to run it. You can change this in the applet's settings tab.

Step 2: Write a function

After creating your applet, you'll be redirect to the applet's code editor. You should see a main.ts file with a handler function. This is the function we run when someone visits your applet's published URL. The inputs to this function are rendered as a form to the user and the output is rendered as a page.

Let's go ahead and replace the contents of main.ts with the following:

enum daysOfWeek {
  Sunday,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}
 
export async function handler({ date }: { date: Date }) {
  return daysOfWeek[date.getDay()];
}

Step 3: Preview your applet

You should now see an input called date on the right sidebar. Choose a date and click Run. You should see the day of the week that date falls on in the output section below.

Step 4: Deploy and share your applet

Now that you've got a working version of your applet in the playground, it's time to publish it. Click the Publish button in the top right. It will open a menu with the URL of your published applet. Click Update your latest changes to the applet's URL. You can now share this URL with anyone and they'll be able to run your applet.

Basic Concepts