An easy-to-use GUI editor for Webtasks
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 to 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:
- Create a task from a Template
- Create a Cron Task
- Test task code using the Runner
- Troubleshoot tasks using the Logs
- Manage task Secrets
- Sync a task with a GitHub repository
... all of this and more!
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.
After authenticating, you'll be brought to the Webtask Editor window and given several options to choose from in order to create a new task.
- Webtask - Standard tasks, created from scratch.
- Cron - Cron powered tasks allow your task's code to be run on a schedule. If you plan on your task being run by cron, this is the option to choose.
- GitHub - You can create a task by importing its code directly from a GitHub repository, if you already have the code ready.
- Template - A task can be created from templates, which are pre-made foundations for tasks with specific purposes, such as integration with common services.
If your intent is to work on a task that already exists, rather than a new one,
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.
The Webtask Editor's newly re-designed user interface makes available all of the tools one might need while building a task.
There are quite a few features available in the Webtask Editor which are detailed below.
Several of the Editor's options deal with your Webtask account
GitHub Account Integration
This is where you can link your GitHub account to your Webtask account, allowing you to then sync the task with a GitHub repository. You can also use this menu to grant or revoke access to the private repositories in your GitHub account.
The alerts panel displays information about account-level events, or Webtask events or errors.
The Profile panel allows you to view and alter basic information about your Webtask account.
Saving, Logs, and the Runner
In the top right hand corner of the code editor area, there are three icons:
- Save (CMD + S) - Saves any currently unsaved changes to the task. If the task was not previously saved, you will be required to name the task prior to saving it. Note: If you wish to change this name at a later date, click the Edit (pencil) icon next to the name of the task at the top of the editor.
- Logs (CMD + SHIFT + L) - The Webtask Editor is capable of performing detailed logging on your tasks. Anything that would normally be output to
console.logcan 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
(CMD + CTRL + N)
Choosing the Create a New Webtask option will bring up the Create Webtask menu that you saw when you created your first task. Note that if you have unsaved changes to your current task, the editor will warn you to save your changes first. You can create a new standard Webtask, but you can also create a cron task, a task from template, or create one directly from code in a GitHub repository file.
(CMD + CTRL + N)
The Webtasks list provides a searchable/scrollable list of all of your named and saved tasks, which you can pick from to load one of them. You can choose the delete icon next to any task in the list if you wish to delete unused tasks. Additionally, typing
? in the bar allows you to bring up a shortcuts list.
The shortcuts list is also scrollable, and provides you with an overview of the keyboard shortcuts available to you while in the Webtask Editor, to make using it that much faster and easier.
The settings menu provides several settings areas that are specific to this task. You can set secrets, metadata, cron jobs, and GitHub syncing for the task, and can also create a new task from 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 tab 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 runs. This is useful for a lot of reasons, allowing the code to be modified by even a group of individuals who are granted access (for example, via GitHub) without the risk of security breaches due to exposed secrets.
- Cron - Using our visual cron 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.
- Meta - Metadata, at the moment, is an advanced use case dealing primarily with compiling other languages.
- GitHub - Choose or create a repository, branch, and file to sync this task with. This feature, once configured, will then update your task when new changes are committed to that file on GitHub (or vice versa). This will allow you to update your task from GitHub as part of your normal development process, or to use the editor to make your changes, and then save the task to GitHub, using it for version control. Take a look at the GitHub documentation for more details.
- Templates - Pick a template and create a new task using it. There are lots of templates, for Express functionality, integrations with services, and more! Take a look at the Templates documentation for more details.