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 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:
- Test task code using the Runner
- Troubleshoot tasks using the Logs
- Create a Cron Task
- Work with Storage
- Use NPM Modules
... 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. 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.
Selecting "Create empty" will prompt you for a name and then open a new Webtask with some default code.
Selecting the template option will provide you with a list of different templates.
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.
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:
- 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.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.
(SHIFT + CMD + E)
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)
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.
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.
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.
- Using the Runner in the Webtask Editor
- Using logs in the Webtask Editor
- Creating a cron task in the Webtask Editor
- Working with Storage in the Webtask Editor
- Creating a task from a template in the Webtask Editor
- Use NPM Modules in the Webtask Editor
- Managing task secrets in the Webtask Editor
- Adding Middleware in the Webtask Editor
- Defining Metadata in the Webtask Editor