Editor User Guide

What is the Extend Editor?

The Extend Editor is a web based editor that can be used to create and edit extensions. The Extend Editor was designed to help users go from an idea to a running extensions quickly. Not only can the Editor be used to write code for extensions, but it can also do many other things:

... all of this and more!

Getting Started

This guide assumes you are using a service that has decided to use Extend to provide extensibility and customization to it's offering. That service will have it's own authentication requirements and process. They may also customize the editor experience such that it may look different than the visuals provided in this guide. In general though functionality should be relatively consistent across Extend clients.

Basic Layout

There are quite a few features available in the Extend 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 Extend 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.


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.

Note the items you see in the settings menu will depend on the settings used by the editor implemented in the site you are using. You may see more, or less, than what is pictured above. You can read more about configuration settings.

  • Secrets - Extend 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 extension without writing them into the code. The secrets panel is where the secrets for the current extension can be viewed, edited, and created. Secrets are not stored in the code, but are instead made available 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 extension. The editor provides a simple way to add, edit, and delete these values.
  • Scheduler - Using our visual editor, you can schedule your extension 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 extension. As with metadata, the editor makes it easy to work with these values. Note that this feature is disabled by default.
  • NPM Modules This lets you add and remove NPM modules available to your extension.
  • Middleware - Middleware is run before your extension and can either provide security or setup logic or act as a compiler to change how your code executes. You can use the editor to modify middleware for your extension. Note that this feature is disabled by default.
  • 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.
  • GItHub - Lets you quickly connect GitHub to your extensions. See the integration documentation for more information.

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