Stitch It comes bundled with an embedded editor for writing code in JavaScript/TypeScript. It is based on the same technology that is powering the extremely popular VS Code product. Our editor will be very familiar if you have used VS Code before. Most default features and key bindings should remain the same, although certain features are removed; for example, you won't have access to your local file system.

Video Demo of Editor Features

Here's a ten-minute overview of the Stitch It editor's features, including some tips and tricks.

Toggling auto-complete suggestions

As you write code, the editor assists you by providing IntelliSense with suggestions, when available. You can expect full support for suggestions when using our Managed APIs.

Sometimes you may lose the suggestions list, or, in some cases, the suggestions list won't display by default, so you may want to explicitly ask for suggestions. To do so, press CTRL + SPACE:

By default, suggestions are not displayed for object fields. In this case, pressing CTRL + SPACE can help you view all the possible fields, which can be very helpful when working with our Managed APIs. For example, pressing CTRL + SPACE while your cursor is within the options object reveals all possible fields you can use:

Also, an additional popup containing documentation not shown by default can be toggled, opened, and closed by pressing CTRL + SPACE:

The same behavior applies not only to object fields but also to functions:

Press Escape to close suggestions.

Toggling import suggestions

Right now, import suggestions won't work if the caret is positioned after the last character of the import you're trying to get suggestions for. This is a known issue.

VS Code displays various auto-import suggestions under the same UI as regular suggestions. However, our editor works slightly differently. When you need to import something, just write the name of the import you are looking for, make sure the caret is positioned before the last character, and then a lightbulb should appear if the editor can find anything to import. If you tap on that lightbulb, a list of suggestions will appear, you can also toggle import suggestions by pressing COMMAND + . on Mac or CTRL + . on Windows.

For example, if you want to structure your code and create additional functions, you're recommended to specify types for your arguments for the functions you create, but it can be difficult to know where to import these types from. This is where import suggestions can be helpful.

In the following example, we're creating a function that does something with the Jira issue we just fetched. However, by not passing along the type for the issue argument, we're losing IntelliSense support as the type is implicitly inferred as any, which literally means it can be anything. In this case, we'll also lose TypeScript's compiler support to check if we're not making any syntactical mistakes. Also, when we try to access the issue object, we won't receive any suggestions that we otherwise could get if we were still in the scope of the (main) default function, since the type inference is still working. If we force the editor to give us suggestions by pressing CTRL + SPACE, we would get back gibberish, a random suggestion that the editor thinks might be there but, in reality, almost never is.

TODO: add remark for TS strict mode

To fix this situation, we can hover over the issue assignment to find the type and then specify that type for the argument of our new functions:

Or we can hover over the function we're calling (technically, it's a method, but let's keep things simple):

Using this method, we can see the entire function/method signature, but we can still see the same response type returned as a generic type of the Promise as we saw before.

Now, knowing the type that is returned from the Managed API call, in our case GetIssueResponseOK, we can specify it as the type for our new function's argument:

However, before we can use the type, we have to import it; this is where the import suggestions feature comes to the rescue. We can easily ask the editor to import this type for us:

While using TypeScript's types is optional, knowing how they work and how to use them correctly can greatly help reduce your cognitive load by offloading many of the things you usually have to memorize into the editor. You also get the benefit of TypeScript's compiler, which, especially if your code uses type information, can ensure you're not making typos in your code. Learning some basics of TypeScript can greatly improve your productivity and reduce bugs, as well.

Import suggestions not only work for types but also for other functions which are pulled into your workspace. In the following case, we can see a handy conversion function import suggestion:

It can even help you with your own functions that you may have defined in some other script you may want to reuse. As an example, if we created a utils script and declared and exported the following function:

We can then import it into some other script in our workspace and use it:

Leveraging type inference

TypeScript is exceptionally good at type inferencing, meaning it can infer type information in many cases without you specifying types explicitly. Knowing how to take advantage of this system can greatly help you get the most out of the editor regarding suggestions.

For example, when we ask for suggestions for an options object in one of the Managed API calls, TypeScript can infer the type and let the editor display these suggestions for us:

However, you might be tempted to construct the options object manually and pass it into the Managed API call. Since you're creating this object without any explicit type, TypeScript doesn't know anything about it, so the editor won't be able to provide you with suggestions. If we explicitly ask for suggestions (CTRL + SPACE), we'll get nothing useful:

Although if we pass this object into the Managed API call, TypeScript can figure out that the object is not compatible and let us know through the editor:

If you construct your options object manually, you can specify the explicit type for the options object. First, we'd have to find out which type represents the object. We can do the same trick that we did before and hover over the function:

We can then see that the option is typed as GetIssueRequest. We can then specify the type for the options object:

Obviously, we also have to import that type, and for that we can use our handy import suggestions feature to do the heavy lifting for us. When we import the type and then ask for suggestions, the editor displays valid options for us to consider:

In this case, the editor also highlighted an error for options because it was missing a required field, which it was only able to figure out when type information was added:


You can use the F2 key to rename things to refactor the rest of the code.

Only rename things that are local to the script you are working with. When you rename something that is imported, it will confuse the editor into thinking that it managed to rename the source file, which it cannot do. If you do this by mistake, save all your work and refresh the browser to force the editor to reload.


Shift + F12 allows you to peek at code without your having to manually navigate to that code.

In the following example, we can peek at a function that we have declared in a separate file that we have imported:

You can also peek at code that you didn't write yourself, but in this case, you'd only be seeing TypeScript type definitions:

More options

Press F1 to reveal all the actions you can take, but remember, all of the options won't be functional:

A right-click reveals even more common actions:

On this page