Webtask
Would you like the webtask.io experience in your own SaaS? Try

Documentation

Webtask Editor

An easy-to-use GUI editor for Webtasks

For customized documentation and ready to run samples, please log in.

What is the Webtask Editor?

The Webtask Editor is a web based editor that can be used to create and edit Webtasks (to learn more about how Webtasks work in general, see the How it Works page). The Webtask Editor was designed to help users go from an idea to a running Webtask quickly. Not only can the Editor be used to write code for Webtasks, but it can also do many other things:

... all of this and more!

Getting Started

Working with the Webtask Editor requires a Webtask account which you can create by going to https://webtask.io/make and signing up using one of the available providers. If you already have an account, you may login with one of those same providers.

Login Providers

After authenticating, you'll be brought to the Webtask Editor window. By default you will not have any tasks, but selecting the "Create a new one" link in the middle will prompt you to create a new Webtask.

Create Webtask

Selecting "Create empty" will prompt you for a name and then open a new Webtask with some default code.

A blank Webtask

Selecting the template option will provide you with a list of different templates.

Create Webtask from Template

If your intent is to work on a task that already exists, rather than a new one,can edit it using the Webtask Editor by navigating to the following URL: https://webtask.io/edit/YOUR-WEBTASK-NAME.

Note that you can also access the Webtask Editor using wt-cli, if you already use the command line tool. Simply type wt edit and the Editor will load in your default browser.

Basic Layout

There are quite a few features available in the Webtask Editor which are detailed below. Please note that when a key combination is mentioned and CMD is specified, Windows users should use CTRL instead.

Saving, Logs, and the Runner

In the top right hand corner of the code editor area, there are three icons:

Saving, Logs, Runner

  • Save (CMD + S) - Saves any currently unsaved changes to the task.
  • Logs (CMD + SHIFT + L) - The Webtask Editor is capable of performing detailed logging on your tasks. Anything that would normally be output to console.log can be logged here. Take a look at the Logging documentation for more details.
  • Runner (CMD + SHIFT + S) - The Runner is used to manually run a task, and provides lots of useful information when doing so. Take a look at the Runner documentation for more details.

Creation, Listing Webtasks, and Settings

New Webtasks

(CMD + CTRL + N)

Create Webtask

Choosing the Create a New Webtask option will bring up the Create Webtask menu that you saw when you created your first task.

Listing Webtasks

(SHIFT + CMD + E)

Webtasks Explorer

The Explorer gives you a list of all your webtasks as well as a search filter on top. The Explorer can be opened and closed with the icon in the left hand panel or via the keyboard shortcut.

(CMD + P)

Webtasks List

You can also list, and open, webtasks via the "Quicksearch" menu. This provides a searchable/scrollable list of all of your named and saved tasks which you can pick from to load one of them.

Settings

Webtasks Settings

The settings menu provides several options that are specific to this task. You can set secrets, metadata, schedules, storage, NPM modules, middleware, and can also update the code from a template here.

  • Secrets - Webtask handles secrets in an easy to manage way. Tokens, IDs, private URLs, and other sensitive information can be stored as secrets, and made accessible to the task without writing them into the task code. The secrets panel is where the secrets for the current task can be viewed, edited, and created. Secrets are not stored in the task code, but are instead made available to the task when it is run. Check out how the editor makes it easy to work with secrets.
  • Metadata is arbitrary key/value pairs used to describe your task. The editor provides a simple way to add, edit, and delete these values.
  • Scheduler - Using our visual editor, you can schedule your task to run at particular time intervals according to your needs, in a similar manner to scheduling cron jobs on servers. Take a look at the Cron documentation for more details.
  • Storage - This lets you view, and edit, storage used for a webtask. As with metadata, the editor makes it easy to work with these values.
  • NPM Modules This lets you add and remove NPM modules available to your webtask. See how the editor makes it easy to work with NPM modules.
  • Middleware - Middleware is run before your webtask and can either provide security or setup logic or act as a compiler to change how your code executes. You can user the editor to modify middleware for your webtask.
  • Templates - Pick a template and copy the source from it. There are lots of templates, for Express functionality, integrations with services, and more! Take a look at the Templates documentation for more details.

Other Features

To the right of the file name for the webtask currently being edited, you will see an > icon that can be expanded for various options:File options

At the bottom right of the editor is another set of options specific to how the editor behaves when writing code.Editing options

Note that both "Prettier" and "ESLint" can be clicked to provide further customization for how both of those features work. Prettier helps with automatic formatting of your code and ESLint helps check your code for best practices.

Other Reading