 # ✨ Script Kit 2.0 ✨

**Download for your platform from [scriptkit.com](https://scriptkit.com)**

## ⭐️ Unlock Script Kit Pro by Sponsoring Script Kit ⭐️

❤️ [Sponsor me on GitHub](https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist&tier_id=235205) ❤️

## New Main Menu

The main menu has been re-designed and optimized for your keyboard-centric workflows.

<img width="827" alt="CleanShot 2023-10-27 at 07 47 09@2x" src="https://github.com/johnlindquist/kit/assets/36073/60b9d227-d0a1-4cf0-ae2a-bede13fba9ef">

## Default to TypeScript

Script Kit now defaults to TypeScript for all new scripts. While v1 experienced issues with watching/compiling .ts files, we now have a custom loader that eliminates the need to watch .ts files for changes.

An awesome benefit of this is you can create a script anywhere on your system, such as `~/Desktop/my-script.ts` (or js if you prefer) and run it from script runner: `~/.kit/bin/kit ~/Desktop/my-script.ts`.

> Note: Your IDE won't recognize the `import` statements since it's not in a project, but the script will run just fine.

If we get enough requests, we will allow you to run the scripts from the built-in file browser through the app as well.

## Watch Scripts Imports for npm Install

As you're writing your scripts in your favorite editor, Kit.app will detect "on save" if you've added a new npm package and automatically prompt you to install it using the Kit.app built-in terminal.

## Windows and Linux arm64 Support

Script Kit now works on arm64 Windows and Linux. Almost all features are supported, but we did have to remove the keyboard listener as the library we use doesn't support arm64 yet. We'll keep investigating this.

## New Custom Windows

### Mac
Prompts like `editor` and `term` which use `ignoreBlur` will now convert the window into an "app" window which can be accessed by `cmd+tab`, is pinned when switching spaces, and shows up in Mission Control. This is also forward-looking to v3 which I'll talk about more in the future...

### Windows 

We built a custom Windows window to match the osx window behavior. We overrode all the maximize/minimize animations and the close buttons so it will instantly open and close. This makes the entire experience feel much closer to what osx users are used to.

## Keywords
Borrowed directly from Alfred, keywords allow you to trigger a script by typing a keyword followed by a space.

A keyword can be a single character or a word. For example, `c` for `clipboard`.

### Built-in Keywords
- `s` - Displays Snippets from your Snippets Directory
- `c` - Displays Clipboard History
- `f` - Find script by searching script contents
- `kit` - Access kit settings
- `kenv` - Access kenv options
- `npm` - Add/remove npm packages
- `spell` - List spelling suggestions for the input
 
 And many others. To see them all, type `keyword` into the Script Kit prompt.

 To create a custom keyword for your own scripts, add:

 ```
 // Keyword: mycustomkeyword
 ```

 If the first prompt is an `await arg()`, it will display the list in the main menu. Otherwise, it will jump to the next prompt.

 Also, if the first prompt is a static list and you shave off the few milliseconds required to load the list from your script, you can cache the list (after the first run) by adding:

 ```
 // Cache: true
 ```

Use caching sparingly, as it's only useful for `// Keyword` and `// Shortcut` where the first prompt is an `arg` with a static list.

## Pass Main Menu Input to a Script

```
// Pass: true
```

The `Pass` metadata allows you to type into the main menu without your script being filtered out of the list. Once you select the script, the input you've typed will be "passed" into the script. You can access the "passed" input using `flag?.pass`. For example, if you want to pass the main menu input to the input of you first arg:

```
// Name: Pass Demo
// Pass: true

import "@johnlindquist/kit"

await arg({
  input: flag?.pass || "",
})
```

### Pass "postfix"

Image you want to type: "How many moons does Jupiter have?" and have the "?" automatically trigger a script that reaches out to an AI service. You can do this by adding a "postfix" to the `Pass` metadata.

```
// Pass: ?
```

This will automatically trigger the script when you type a "?" at the end in the main menu and the entire input will be passed to the script as `flag?.pass`.

## Multi-select Prompt `await select()`

<img width="833" alt="CleanShot 2023-10-27 at 15 26 56@2x" src="https://github.com/johnlindquist/kit/assets/36073/9420d7a8-096c-468b-b98c-a9f70b48569b">

```js
let arrayOfChoices = await select("Pick one or more", ["one", "two", "three"])
```

Probably the most requested feature, Script Kit now has a `select` prompt which allows you to pick multiple choices.

## Themes Per Light/Dark Mode

You can now customize which theme will be active for both light and dark more or use the same theme for both.

## Snippets Directory

In your ~/.kenv/snippets directory, create .txt files you want to use as snippets. For example:
1. Create `~/.kenv/snippets/lorem.txt`
2. Add the following text to the file:
```
// Name: Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

The "Lorem Ipsum" snippet will now appear in the Snippets menu using the `s` keyword. Select the snippet will paste it into the current application.

Adding Snippet metadata will allow you to invoke the snippet anywhere on your system. It's a best practice to use a "postfix", such as ",,", to avoid triggering the snippet when you don't want to.
```
// Snippet: lorem,,
```

### Snippet Creator

<img width="829" alt="CleanShot 2023-10-27 at 01 02 25@2x" src="https://github.com/johnlindquist/kit/assets/36073/a32d5e12-8ff2-441c-8edf-cfdfe3b1ab0d">

Typing `ns ` from the main menu will launch the quick snippet creator. There's a helpful guide there that will show all the available options. Just to list a few:

- Tab stops: $0, $1, $2, $3
- Dropdown list: ${|apple,banana,cherry|}
- Current selection: $SELECTION
- Clipboard content: $CLIPBOARD

and many more...

If you need more advanced scenarios, for example clipboard history:

```js
let history = await getClipboardHistory()
let text = await arg("Pick an item from your history", history.map(item => item.value)

let result = await template(`Hello $0,

${text}
`)

await writeFile(home("example.txt"), result)
```

## Actions

The new `actions` array makes it much easier to assign shortcuts and behaviors when you have a choice selected. You can access the actions menu by pressing `right`on the keyboard, then quickly search to execute the action you want to take with the currently focused choice:

```js
// Name: Actions Example

import { Action } from "@johnlindquist/kit"

// Using a "flag" determines where to do to custom logic: After the prompt or in the action
// Also, "flags" are supported when running the script in the terminal with `--js`
let actions: Action[] = [
  {
    shortcut: `${cmd}+t`,
    name: "Append .ts",
    visible: true, // Display shortcut in the prompt
    onAction: async (input, state) => {
      // Since we're not using a "flag", we can do custom logic here
      submit(`${state.focused?.name}.ts`)
    },
  },
  {
    name: "Append .js",
    flag: "js", // Set `global.flag.js` to true when selecting the action
  },
]

let result = await arg("Pick a number", ["one", "two", "three"], actions)

if (flag.js) {
  result = `${result}.js`
}

inspect(result)
```

## Previews on All Prompts

You can build-out helpful previews on the right side for all prompts now (see the Snippet Creator above for a great example). This is especially useful for prompts like `editor`, `drop`, and `term` where you may need reminders on what the script is doing or steps you want to guide the user through.

```js
await editor({
  value: `Book Outline`,
  preview: md(`# Requirements
- Cover Major Characters
- Address the theme
- Have a beginning, middle, and end  
  `),
})
```


## Move kenv to a Different Directory

Type `kit move` into the main prompt to move your kenv directory to a different location. This is useful if you want to keep your scripts in dotfiles or other setup.

## Built-in Guide, API, and Tips Keywords

From the main menu, type `guide`, `api`, or `tips` to immediately launch into helpful information.

From the `api` list, pressing `cmd+p` will create a demo script with the examples shown so you can instantly start playing around with the various APIs.

![CleanShot 2023-12-14 at 08 28 39@2x](https://github.com/johnlindquist/kit/assets/36073/a088616d-6cc5-4723-8dcf-9173943609b8)

> Note: These are living documents parsed from the markdown files over at https://github.com/johnlindquist/kit-docs . So you can expect updates and new demos as we add more and more.

## New APIs

We'll follow-up with individual posts and demos around the new available APIs. Lots of new goodies to play with :)


## Road to v3

The major plan for v3 is enabling you to run multiple scripts each with their own editor/terminal/etc (this was a big reason we had to build custom windows mentioned above). We've only just begun toying with the implementation, so don't expect much news on it until sometime next year. Lots of other goodies planned too! We're super excited to keep pushing Script Kit forward.

## Questions?

Please ask below or join our [Discord](https://discord.gg/77MdcpSW) We're always happy to help figure out better workflows to optimize your day. Happy scripting!

\- John

Pass Demo

✨ Script Kit 2.0 ✨

 # Script Kit 2.0 Release Candidate

Download for your platform from the releases page:
https://github.com/johnlindquist/kitapp/releases/tag/v1.99.82

## New Main Menu

The main menu has been re-designed and optimized for your keyboard-centric workflows.

<img width="827" alt="CleanShot 2023-10-27 at 07 47 09@2x" src="https://github.com/johnlindquist/kit/assets/36073/60b9d227-d0a1-4cf0-ae2a-bede13fba9ef">

## New Custom OSX Window

Prompts like `editor` and `term` which use `ignoreBlur` will now convert the window into an "app" window which can be accessed by `cmd+tab`, is pinned when switching spaces, and shows up in Mission Control. This is also forward-looking to v3 which I'll talk about more in the future...

## Keywords
Borrowed directly from Alfred, keywords allow you to trigger a script by typing a keyword followed by a space.

A keyword can be a single character or a word. For example, `c` for `clipboard`.

### Built-in Keywords
- `s` - Displays Snippets from your Snippets Directory
- `c` - Displays Clipboard History
- `f` - Find script by searching script contents
- `kit` - Access kit settings
- `kenv` - Access kenv options
- `npm` - Add/remove npm packages
- `spell` - List spelling suggestions for the input
 
 And many others. To see them all, type `keyword` into the Script Kit prompt.

 To create a custom keyword for your own scripts, add:

 ```
 // Keyword: mycustomkeyword
 ```

 If the first prompt is an `await arg()`, it will display the list in the main menu. Otherwise, it will jump to the next prompt.

 Also, if the first prompt is a static list and you shave off the few milliseconds required to load the list from your script, you can cache the list (after the first run) by adding:

 ```
 // Cache: true
 ```

Use caching sparingly, as it's only useful for `// Keyword` and `// Shortcut` where the first prompt is an `arg` with a static list.

## Pass Main Menu Input to a Script

```
// Pass: true
```

The `Pass` metadata allows you to type into the main menu without your script being filtered out of the list. Once you select the script, the input you've typed will be "passed" into the script. You can access the "passed" input using `flag?.pass`. For example, if you want to pass the main menu input to the input of you first arg:

```
// Name: Pass Demo
// Pass: true

import "@johnlindquist/kit"

await arg({
  input: flag?.pass || "",
})
```

### Pass "postfix"

Image you want to type: "How many moons does Jupiter have?" and have the "?" automatically trigger a script that reaches out to an AI service. You can do this by adding a "postfix" to the `Pass` metadata.

```
// Pass: ?
```

This will automatically trigger the script when you type a "?" at the end in the main menu and the entire input will be passed to the script as `flag?.pass`.

## Multi-select Prompt `await select()`

<img width="833" alt="CleanShot 2023-10-27 at 15 26 56@2x" src="https://github.com/johnlindquist/kit/assets/36073/9420d7a8-096c-468b-b98c-a9f70b48569b">

```js
let arrayOfChoices = await select("Pick one or more", ["one", "two", "three"])
```

Probably the most requested feature, Script Kit now has a `select` prompt which allows you to pick multiple choices.

## Themes Per Light/Dark Mode

You can now customize which theme will be active for both light and dark more or use the same theme for both.

## Snippets Directory

In your ~/.kenv/snippets directory, create .txt files you want to use as snippets. For example:
1. Create `~/.kenv/snippets/lorem.txt`
2. Add the following text to the file:
```
// Name: Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
```

The "Lorem Ipsum" snippet will now appear in the Snippets menu using the `s` keyword. Select the snippet will paste it into the current application.

Adding Snippet metadata will allow you to invoke the snippet anywhere on your system. It's a best practice to use a "postfix", such as ",,", to avoid triggering the snippet when you don't want to.
```
// Snippet: lorem,,
```

### Snippet Creator

<img width="829" alt="CleanShot 2023-10-27 at 01 02 25@2x" src="https://github.com/johnlindquist/kit/assets/36073/a32d5e12-8ff2-441c-8edf-cfdfe3b1ab0d">

Typing `ns ` from the main menu will launch the quick snippet creator. There's a helpful guide there that will show all the available options. Just to list a few:

- Tab stops: $0, $1, $2, $3
- Dropdown list: ${|apple,banana,cherry|}
- Current selection: $SELECTION
- Clipboard content: $CLIPBOARD

and many more...

If you need more advanced scenarios, for example clipboard history:

```js
let history = await getClipboardHistory()
let text = await arg("Pick an item from your history", history.map(item => item.value)

let result = await template(`Hello $0,

${text}
`)

await writeFile(home("example.txt"), result)
```

## Actions

The new `actions` array makes it much easier to assign shortcuts and behaviors when you have a choice selected. You can access the actions menu by pressing `right`on the keyboard, then quickly search to execute the action you want to take with the currently focused choice:

```js
// Name: Actions Example

import { Action } from "@johnlindquist/kit"

// Using a "flag" determines where to do to custom logic: After the prompt or in the action
// Also, "flags" are supported when running the script in the terminal with `--js`
let actions: Action[] = [
  {
    shortcut: `${cmd}+t`,
    name: "Append .ts",
    visible: true, // Display shortcut in the prompt
    onAction: async (input, state) => {
      // Since we're not using a "flag", we can do custom logic here
      submit(`${state.focused?.name}.ts`)
    },
  },
  {
    name: "Append .js",
    flag: "js", // Set `global.flag.js` to true when selecting the action
  },
]

let result = await arg("Pick a number", ["one", "two", "three"], actions)

if (flag.js) {
  result = `${result}.js`
}

inspect(result)
```

## Previews on All Prompts

You can build-out helpful previews on the right side for all prompts now (see the Snippet Creator above for a great example). This is especially useful for prompts like `editor`, `drop`, and `term` where you may need reminders on what the script is doing or steps you want to guide the user through.

```js
await editor({
  value: `Book Outline`,
  preview: md(`# Requirements
- Cover Major Characters
- Address the theme
- Have a beginning, middle, and end  
  `),
})
```


## Move kenv to a Different Directory

Type `kit move` into the main prompt to move your kenv directory to a different location. This is useful if you want to keep your scripts in dotfiles or other setup.


## onClick and onKeydown Globals
- Global event handlers for click and type events.

## Custom TypeScript Loader

The new custom loader eliminates the need to watch .ts files for changes (which caused many issues from a long-running app). We now have a customized loader that can run any TypeScript file instantly.

An awesome benefit of this is you can create a script anywhere on your system, such as `~/Desktop/my-script.ts` (or js if you prefer) and run it from script runner: `~/.kit/bin/kit ~/Desktop/my-script.ts`.

> Note: Your IDE won't recognize the `import` statements since it's not in a project, but the script will run just fine.

If we get enough requests, we will allow you to run the scripts from the built-in file browser through the app as well.


## Watch Scripts for npm Install

As you're writing your scripts in your favorite editor, Kit.app will detect if you've added a new npm package and automatically prompt you to install it using the Kit.app built-in terminal.


## Road to v2

The plan is to release v2 in mid-December. I'll be focusing on updating documentation, guides, tips, and tricks to finally help everyone get a more complete grasp of what Script Kit is capable of. There are a few more APIs which haven't been announced which will be included as well.


## Questions?

Please ask below. We're always happy to help figure out better workflows to optimize your day. Happy scripting!

\- John

Script Kit 2.0 Release Candidate

# Script Kit 1.76.10 - July 2023 Release

- Download from https://www.scriptkit.com/
- Join our Discord: https://discord.gg/qnUX4XqJQd
- Sponsor to Keep Script Kit Growing ❤️ (and unlock the debugger): https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist

## Features

### Windows arm64 Build

We now have "arm64" builds for Windows: https://github.com/johnlindquist/kitapp/releases/tag/v1.76.10

> arm64 Windows limitations: Unfortunately, the "keyboard" libraries for Windows are not yet available for arm64. So, you won't be able to use snippets, "setSelectedText", and other keyboard-related features. I'd recommend AutoHotkey as a workaround until the libraries are available.

### Scripts Caching

Instead of waiting for the main menu to parse/load the scripts, the previous scripts results are now cached. This shaves off the ~100ms delay when opening the main menu from the keyboard shortcut. (There are also some clever technical tricks under the hood that would require a blog post to explain)

> Note: If you have a script that uses a shortcut which displays choices that don't change often, consider adding the `// Cache: true` metadata to the script for that extra 100ms boost.


### Scripts Grouping and `groupChoices`

Use the `//Group` metadata to group scripts together in the main menu. For example:

```js
// Group: Favorite
```

![http://res.cloudinary.com/johnlindquist/image/upload/v1687909106/clipboard/bnsocw9vxhqafkmmyivv.png](http://res.cloudinary.com/johnlindquist/image/upload/v1687909106/clipboard/bnsocw9vxhqafkmmyivv.png)

The you can search for "Favorite" from the menu to filter to the scripts with that metadata.


You can also add the `.group` property to any choice, then pass your choices to `groupChoices` to use the grouping behavior in your own scripts.

```js
// Name: Group Choices
// Cache: true

import "@johnlindquist/kit"
import { faker } from "@faker-js/faker"
import _ from "lodash"

let faang = ["Facebook", "Apple", "Amazon", "Netflix", "Google"]

let people = Array.from({ length: 25 }).map(() => {
  let name = faker.person.fullName()
  return {
    name,
    value: name,
    description: faker.color.human(),
    group: _.sample(faang), // Grouping by a random company
  }
})

let groupedChoices = groupChoices(people)

let result = await mini("Arg Group Demo", groupedChoices)
await editor(result)
```

![http://res.cloudinary.com/johnlindquist/image/upload/v1687909060/clipboard/urzyst1cz3wd6olsk7lx.png](http://res.cloudinary.com/johnlindquist/image/upload/v1687909060/clipboard/urzyst1cz3wd6olsk7lx.png)

### Flags "Submenu"

When using `flags`, pressing "right" (or `cmd+k`) now displays the available actions (AKA "flags") to the side in a separate searchable list with its own state.

This is a first pass at a "submenu" feature. We'll explore nested submenus in the future.

![http://res.cloudinary.com/johnlindquist/image/upload/v1687909291/clipboard/p7bwm9rxnhzquye3oxac.png](http://res.cloudinary.com/johnlindquist/image/upload/v1687909291/clipboard/p7bwm9rxnhzquye3oxac.png)

### Searching Off-loaded to Main Process

Previously, the searching logic was done in the renderer process. This creating some technical limitations on how we could pass results from a script to the list.

Now, you will be able pass "scored" choice results directly from the script to the list enabling you move the search logic to your script/server/API and display highlighted "scored" choices in the list. More information on this in the future.

### `// Pass` and `.pass` Metadata

The `// Pass` metadata on a script (and `.pass` property on a choice) will pass the current input of the prompt directly to the script so you can type input from the main menu that will be passed to the script.

![http://res.cloudinary.com/johnlindquist/image/upload/v1687909936/clipboard/p4bnehjxxkivrbderwhy.png](http://res.cloudinary.com/johnlindquist/image/upload/v1687909936/clipboard/p4bnehjxxkivrbderwhy.png)

```js
// Name: Grocery List
// Pass: true

import "@johnlindquist/kit"

let note = arg?.pass || (await arg("Enter an item"))

await editor(note)
```

You can also do this with your own choices by using the `.pass` property on a choice and using the `groupChoices` (as discussed above) to bring up the more advanced list.

### Choice `.miss` Property

Adding `.miss` to a choice will make the choice only appear if the search doesn't match any other choices. This is useful for showing a "No Results" choice:

```js
// Name: Miss Demo

import "@johnlindquist/kit"

await mini("Select an Item", [
  "One",
  "Two",
  {
    name: "No Choices Available",
    miss: true,
    disableSubmit: true,
    nameClassName: `text-red-500`,
  },
])
```

![http://res.cloudinary.com/johnlindquist/image/upload/v1687910247/clipboard/s2dtq4wzty61sl3ig0ym.png](http://res.cloudinary.com/johnlindquist/image/upload/v1687910247/clipboard/s2dtq4wzty61sl3ig0ym.png)

## Choice `.skip` Property

Using `.skip` allows you to create a choice that can't be searched/selected:

> Note: This is used internally for the "groupChoice()" headers

```js
// Name: Separator Demo

import "@johnlindquist/kit"

await arg("A demo for skip", [
  "Apple",
  "Banana",
  "Cherry",
  {
    name: "Separator",
    height: PROMPT.ITEM.HEIGHT.XXXS,
    html: `<div class="border-t border-gray-200 w-full"></div>`,
    skip: true,
  },
  "Celery",
  "Cucumber",
  "Lettuce",
])
```

## Thanks for Using Script Kit!

Happy Scripting!

\- John Lindquist

Group Choices

Script Kit 1.76.10 - July 2023 Release - Searching Enhancements, Grouping Logic, More Choice Options

# Script Kit 1.59.1 - May 2023 Release

- Download from https://www.scriptkit.com/
- Join our Discord: https://discord.gg/qnUX4XqJQd
- Sponsor to Keep Script Kit Growing ❤️ (and unlock the debugger): [https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist](https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist&tier_id=235205)

## Sunsetting Features

We're "sunsetting"/not supporting a few features going forward. 

> The `npm` and `db` apis will still be available (they're used internally in the SDK!), but we won't be actively supporting them

1. `await npm()`. Use `await import()` or regular `import` statements instead.

Script Kit now recommends using standard import methods. When you attempt to run a script and an import fails, Script Kit will catch the error and prompt you to install it. This removes the need for `await npm()`. This is especially useful for people using TypeScript as you don't need to worry about typing `npm` anymore.

2. `await db()`. We now recommend `keyv`: [https://www.npmjs.com/package/keyv](https://www.npmjs.com/package/keyv)

`keyv` is a much better solution for storing/retrieving data and achieves all of the future features we had planned for `db`.

We'll do our best to update older demos/tutorials that use these methods as we're able.

## Previews Everywhere

Every prompt type (`term`, `drop`, `fields`, etc) now supports the `preview` key. Pass in HTML to display it to the right side of your prompt. This is great for instructions and guiding the user through each script:

> Note: The `md()` helper is often used to transform markdown into HTML


```js
await term({
  preview: md(`# Follow these steps:

1. First, type \`ls\` to see the files in this directory
2. Then, type \`cat <filename>\` to see the contents of a file
3. Finally, type \`exit\` to exit the terminal
  `),
})
```

<img width="480" alt="CleanShot 2023-05-15 at 11 54 22@2x" src="https://github.com/johnlindquist/kit/assets/36073/fcabec36-4b03-4bd9-a7f6-3e2220d56ed5">

```js
await drop({
  placeholder: "Drop an mp3",
  preview: md(`# Convert mp3 to wav

## Instructions

1. Drag and drop an mp3 file
2. A progress prompt will open then close when ready
3. Your .wav will be created next to the .mp3 file
    `),
})
```

<img width="480" alt="CleanShot 2023-05-15 at 11 59 28@2x" src="https://github.com/johnlindquist/kit/assets/36073/141d015b-092a-459f-88ae-d9c5713bf266">

## `term.write()`

When a `term` prompt is open, you can issue terminal commands from shortcuts, etc by using `term.write(myCommand)`

```js
await term({
  shortcuts: [
    {
      name: "List files",
      key: `${cmd}+l`,
      onPress: () => {
        let command = isWin ? "dir" : "ls"
        term.write(command)
      },
      bar: "right",
    },
    {
      name: "Up a Directory",
      key: `${cmd}+u`,
      onPress: () => {
        term.write("cd ..")
      },
      bar: "left",
    },
    {
      name: "Clear",
      key: `${cmd}+k`,
      onPress: () => {
        let command = isWin ? "cls" : "clear"
        term.write(command)
      },
      bar: "left",
    },
  ],
})
```
<img width="480" alt="CleanShot 2023-05-15 at 12 06 23@2x" src="https://github.com/johnlindquist/kit/assets/36073/57ddd56e-d259-4402-b682-a561d62993c1">

## Kenv Improvements:

### "New Kenv" prompt for GitHub repo:

When creating a new Kenv, it will guide you through the process of linking the Kenv to a remote GitHub repo:

<img width="480" alt="CleanShot 2023-05-15 at 12 15 42@2x" src="https://github.com/johnlindquist/kit/assets/36073/74e2898e-f978-4a9e-8bb2-41f7a8dae11a">


### With a script selected, take Kenv actions

Press "right" (or `cmd+k`) with a script selected to reveal many "Kenv" actions:

<img width="480" alt="CleanShot 2023-05-15 at 12 17 32@2x" src="https://github.com/johnlindquist/kit/assets/36073/4f629489-5c9a-4965-892a-363452db44b0">

### Push/Pull From Remote Kenv

From a script (or a "Manage Kenv"), you can now push/pull changes as it swaps you over to a terminal to take action:

<img width="480" alt="CleanShot 2023-05-15 at 12 21 58@2x" src="https://github.com/johnlindquist/kit/assets/36073/96bcd7f5-b4b7-43e7-a101-0161fc8b7633">

### "Trusted" Kenvs

Thanks to Script Kit + AI integrations, we've had a large influx of "non-developer" users. This necessitated more warnings/protections around sharing scripts.

Some scripts have features that run scripts automatically: Shortcuts, schedule, background, etc. These kenvs now need to be "Trusted" to enable these features to add an extra layer of protection against bad actors. PLEASE only use scripts from people you absolutely trust.

You can "trust" a kenv during new/clone setup, or later from the Kit tab->Manage Kenv menu. You can also "untrust" a kenv from the same menu.

<img width="480" alt="CleanShot 2023-05-15 at 12 31 33@2x" src="https://github.com/johnlindquist/kit/assets/36073/e4501b9a-944c-4597-ae09-3223501631e0">

## "Trigger" flag

If a script is run by "schedule", "shortcut", etc, you can now access what triggered it by using

```js
if(flag?.trigger === "schedule") // do something specific
```

This will allow you customize the behavior based on whether you invoked it manually or automatically

## Windows Fixes

Handled edge-cases around

- Windows setup/install process
- Windows usernames that include spaces
- Windows terminal fixes

Thanks to all the Windows bug reports and testers on Discord. Please keep them coming ❤️

## Node 18.15.0

We're now on node 18.15.0. View the CHANGELOG: https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V18.md#18.15.0

Happy Scripting - John Lindquist

Script Kit 1.59.1 - May 2023 Release

# Script Kit 1.53.22 - April 2023 Release

- Download from https://www.scriptkit.com/
- Join our Discord: https://discord.gg/qnUX4XqJQd
- Sponsor to Keep Script Kit Growing ❤️ (and unlock the debugger): [https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist](https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist&tier_id=235205)

## Features

### `await mic()`

Using await mic will return a buffer of the audio recorded from your microphone.

```js
// Name: Transcribe Mic

import "@johnlindquist/kit"

let { Configuration, OpenAIApi } = await import("openai")

let config = new Configuration({
  apiKey: await env("OPENAI_API_KEY"),
})

let openai = new OpenAIApi(config)

let data = await mic()

let stream = Readable.from(data)
// https://github.com/openai/openai-node/issues/77#issuecomment-1463150451
stream.path = "speech.webm"

// If you're confused by "createTranscription" params, see: https://github.com/openai/openai-node/issues/93#issuecomment-1471285341
let response = await openai.createTranscription(stream, "whisper-1")

let transcriptionPath = tmpPath(`${Date.now()}.txt`)
await writeFile(transcriptionPath, response.data.text)

await editor(response.data.text)
```

![http://res.cloudinary.com/johnlindquist/image/upload/v1679783859/clipboard/pvbsvjjj1zrmlode3wwn.png](http://res.cloudinary.com/johnlindquist/image/upload/v1679783859/clipboard/pvbsvjjj1zrmlode3wwn.png)


### `await webcam()`

Using await webcam will return a buffer of the image captured from your webcam.

![http://res.cloudinary.com/johnlindquist/image/upload/v1679778480/clipboard/lxhy4fmndgzp7xximgco.png](http://res.cloudinary.com/johnlindquist/image/upload/v1679778480/clipboard/lxhy4fmndgzp7xximgco.png)

```js
// Name: Selfie

import "@johnlindquist/kit"

let buffer = await webcam()

let filePath = tmpPath("webcam.png")

await writeFile(filePath, buffer)
await revealFile(filePath)
```

### Resizing

The prompt will now grow and shink to match the length of the list of options.

You can also manually control the size of prompts by using the new `PROMPT` constants:

```js
await editor({
  width: PROMPT.WIDTH["5XL"],
  height: PROMPT.HEIGHT["5XL"],
})
```

### Terminal "Close on Exit"

The terminal will now automatically close when you exit the command.

> Note: By default, it start a shell (zsh/bash/cmd.exe for mac/linux/windows), so you'll need to run `&& exit` after your command

```js
await term("brew install ffmpeg && exit")
```

You can also use the `shell` option to disable the shell and just run the tool directly:

```js
await term({
  shell: false,
  command: "brew",
  args: ["services", "restart", "yabai"],
  closeOnExit: false, // optional, if you want to view output before it closes
})
```

> Note: Also fixed some resizing bugs with the terminal.

### Windows App Launcher

Press `;` from the main menu to launch the App Launcher.

Thanks to @dodgez: https://github.com/johnlindquist/kit/pull/1161

> Note: We still need a Linux App Launcher if anyone wants to take a stab at it :)

### Custom Fonts

You can now use custom fonts with the UI. In your `~/.kenv/.env` file, add:

```bash
KIT_MONO_FONT="Menlo"
KIT_SANS_FONT="Arial"
```

### Experimental: Shebang Scripts 🎉

Add a script in your `~/.kenv/scripts` directory with a shebang:

![http://res.cloudinary.com/johnlindquist/image/upload/v1679779537/clipboard/v1oja8v05dgexdgtfjba.png](http://res.cloudinary.com/johnlindquist/image/upload/v1679779537/clipboard/v1oja8v05dgexdgtfjba.png)

```bash
#!/bin/bash
open "https://scriptkit.com"
```

Then run it from the main menu

### Experimental: Windows `.bat` Files

Mac and Linux users have always had executables they could run in the terminal in the `~/.kenv/bin` dircetory. Now, on Windows, Script Kit will generate `.bat` files associated with each script that you can run from the terminal.

### Info Choices

We now have a custom "info" choice that isn't selectable, but shows up in the list to present the user with additional information about the input/list:

![http://res.cloudinary.com/johnlindquist/image/upload/v1679783784/clipboard/j4av6h2ybe1vezln2tt3.png](http://res.cloudinary.com/johnlindquist/image/upload/v1679783784/clipboard/j4av6h2ybe1vezln2tt3.png)

```js
// Name: Testing Info OnNoChoices

import "@johnlindquist/kit"

await arg("Select a number",
  [
    {
      name: "Sorry, no matches",
      info: "onNoChoices", // or "always"
    },
    "one",
    "two",
    "three",
  ]
)
```

### Removing `npm` requirement

When you run a script with a missing module, it will catch the error and prompt you to install it. This removes the requirement of the `await npm()`, but you can still use it if you find it more convenient.

The examples and scripts that I share from now on will no longer use `await npm()`, but I have no plans to deprecate it.

## Fixes

- Lots of little improvements around the `chat` component.
- Some solid performance improvements
- Upgrading to lots of the latest libraries


## Call for Help: Disable Window Animation on Windows?

If anyone knows how to disable the window animation on Windows (the one that transparently zooms in when you open a window), please let me know because I think it's super annoying and I'd love to disable it in the app. For now, I strongly recommend disabling it globally on Windows:

1. Open the Settings app by pressing the Windows key + I.
2. Click on “Ease of Access”.
3. Scroll down to “Other options” and click on “Visual options”.
4. Under “Play animations in Windows”, toggle the switch to “Off”.

## One Last Thing...

Script Kit AI course part 1 dropping this week... 💥

Transcribe Mic

Script Kit 1.53.22 - April 2023 Release

# Script Kit v1.51.2 - March 2023 Release

Download from https://www.scriptkit.com/
Join our Discord: https://discord.gg/qnUX4XqJQd
❤️ Sponsor Script Kit development [https://github.com/sponsors/johnlindquist](https://github.com/sponsors/johnlindquist/sponsorships?sponsor=johnlindquist&tier_id=235205) ❤️
## Features

### Build AI Conversations with the New `chat` Prompt

You can use the new `chat` prompt to create a chat interface for your scripts. The `chat` prompt returns a `messages` array that you can inspect to see the messages that were sent and received.

It supports keyboard navigation so you can press the up/down arrow keys to navigate through the messages and copy/paste them. You can also use `shortcuts` the same way you would with other prompts.


[Open chat-hello-world in Script Kit](https://scriptkit.com/api/new?name=chat-hello-world&url=https://gist.githubusercontent.com/johnlindquist/609d3f2dcbc49911698c3c2162310c0d/raw/bfe67e1067554893647fa84ecd8277c00f848926/chat-hello-world.ts")

```js
// Name: Chat Hello World

import "@johnlindquist/kit"

let messages = await chat({
  onSubmit: input => {
    chat.addMessage(`You said, "${input}"`)
  },
})

inspect(messages)
```

The `kit-examples` repo (bundled with new installs) has an example of using the latest ChatGPT model:
https://github.com/johnlindquist/kit-examples/blob/main/scripts/chatgpt.js

✨ Want more AI example scripts? Check out this post 👀: https://github.com/johnlindquist/kit/discussions/1143 ✨

### The `eyeDropper` Color Picker

You can now use the `eyeDropper` function to pick a color from anywhere on your screen. It returns an object with `sRGBHex` to align with Chrome's Eyedropper tool.

> Note: Unfortunately, windows restricts color picking to the foreground window. Still investigating a workaround.


[Open testing-get-color in Script Kit](https://scriptkit.com/api/new?name=testing-get-color&url=https://gist.githubusercontent.com/johnlindquist/e10cc5dfc08fd5c9824bb3a7e5e50071/raw/76bb4b86f08e1f2a8b2f09d6e2ba47286dc42673/testing-get-color.ts")

```js
// Name: Testing Get Color

import "@johnlindquist/kit"

await hide()
let value = await eyeDropper()
await editor(value.sRGBHex)

```

### Node 18.12.1

Script Kit now bundles Node 18.12.1. (Previous scripts ran on Node 16.17.2).

### New Settings in `~/.kit/db/app.json` Features

- "mini" boolean - Use Script Kit in a much smaller window
- "termFont" string - Set the font for the terminal
- "cachePrompt" boolean - If you experience issues with the prompt position caching logic, disable it so is _always_ show in the center of the screen
- "convertKeymap" boolean - Script Kit auto converts to your selected OS keymap (dvorak, colemak, etc). There have been a few reports of this conflicting with Portuguese keyboards. If you experience issues, disable this setting.
- "searchDebounce" boolean - by default, Script Kit will debounce when your choices list has over >1000 items. It's mostly a precaution and you can disable it if you'd like.

The defaults are as follows:
```json
{
    "mini": false,
    "termFont": "monospace",
    "cachePrompt": true,
    "convertKeymap": true,
    "searchDebounce": true
}
```

## Fixes

- Fixed a bug where `theme` was reset to the default when waking from sleep
- Fixed the `Open in Script Kit` urls for Windows users
- Fixed Calculator sizing from main menu
- `await npm("package-name")`  will now mark a package as an "external" dependency in TypeScript so you can use import statements for packages that aren't installed yet and your script will still compile
- Other minor bug fixes
- Fixed installation issues when dealing with certs/proxies

## Experimental

### `toast()`

You can try out the experimental `toast("Copied")` feature. I'm still working out the API, so there's no "onClick" or anything, but you should be able to pass the other toast properties (this uses `react-toastify`) explained [here](https://fkhadra.github.io/react-toastify/dispatch-toast-outside-of-react-component)

Chat Hello World

Script Kit v1.51.2 - Welcoming our AI Overlords! 👑


https://user-images.githubusercontent.com/36073/221332902-87c2d0a4-46b8-4eb1-a935-9a9fcae90e94.mp4

## This is a Preview Build for Next Week's Release

I'm releasing this to gather some feedback about the Chat component before I push the main release in the beginning of March. Please let me know below what you think of the new `chat` component. What do you love? What needs to change? What should be added? Please leave your ideas below! 🙏

Download here Pre-release here:

https://github.com/johnlindquist/kitapp/releases/tag/v1.50.6

Join our Discord:

https://discord.gg/qnUX4XqJQd

## Chat Component Hello World


[Open chat-hello-world in Script Kit](https://scriptkit.com/api/new?name=chat-hello-world&url=https://gist.githubusercontent.com/johnlindquist/0f0f86d0dc84f7acb30dc726da39b470/raw/bfe67e1067554893647fa84ecd8277c00f848926/chat-hello-world.ts")

```js
// Name: Chat Hello World

import "@johnlindquist/kit"

let messages = await chat({
  onSubmit: input => {
    chat.addMessage(`You said, "${input}"`)
  },
})

inspect(messages)

```



## Chat Component with AI

[Open openai-chat in Script Kit](https://scriptkit.com/api/new?name=openai-chat&url=https://gist.githubusercontent.com/johnlindquist/fc9f74aa387e371a59c973175201ead2/raw/e94fc92dec07dda63982bb54e756a35cfdb92532/openai-chat.ts")

```js
// Name: OpenAI Chat

import "@johnlindquist/kit"

await npm("openai")
await npm("langchain")

let { OpenAI } = await import("langchain")
let { ConversationChain } = await import("langchain/chains")
let { BufferMemory } = await import("langchain/memory")

let llm = new OpenAI({
  openAIApiKey: await env("OPENAI_API_KEY", {
    hint: `Grab a key from <a href="https://platform.openai.com/account/api-keys">here</a>`,
  }),
  streaming: true,
  callbackManager: {
    handleStart: () => {
      chat.addMessage("")
    },
    handleNewToken: token => {
      chat.pushToken(token)
    },
  },
})

let memory = new BufferMemory()
let chain = new ConversationChain({
  llm,
  memory,
})

let messages = await chat({
  ignoreBlur: true,
  alwaysOnTop: true,
  onSubmit: async input => {
    await chain.call({ input })
  },
})

inspect(messages)

```

## Chat with a .txt File

[Open doc-talk in Script Kit](https://scriptkit.com/api/new?name=doc-talk&url=https://gist.githubusercontent.com/johnlindquist/f1bfd6758815a1fb87d51a9c7893bd2e/raw/9d54e81aa9f269af0a22a44e6bfcb0f77b04f44d/doc-talk.ts")

```js
/*
# Doc Talk

Chat with a .txt file such as a book. In chat, ask questions like:
- "Who are the main characters?"
- "Where are the key settings"?
- "Summarize the story arc"

> Note: The chat's knowledge is limited to the loaded .txt file
*/

// Name: Doc Talk

import "@johnlindquist/kit"

await npm("openai")
await npm("langchain")
await npm("hnswlib-node")

let { OpenAI } = await import("langchain/llms")
let { VectorDBQAChain } = await import("langchain/chains")
let { HNSWLib } = await import("langchain/vectorstores")
let { OpenAIEmbeddings } = await import(
  "langchain/embeddings"
)
let { RecursiveCharacterTextSplitter } = await import(
  "langchain/text_splitter"
)

let filePath = await path({
  hint: `Select a .txt file to talk to or <a href="submit:__ROMEO__">Download Romeo and Juliet</a>`,
})

if (filePath === "__ROMEO__") {
  let buffer = await download(
    `https://www.gutenberg.org/cache/epub/1513/pg1513.txt`
  )
  filePath = home("Downloads", "romeo-and-juliet.txt")
  await writeFile(filePath, buffer)
}

wait(250).then(() => setLoading(true))

div(
  md(`# Loading...

~~~
Loading in ${filePath}
~~~
`)
)

let text = await readFile(filePath, "utf-8")

const model = new OpenAI({
  streaming: true,
  callbackManager: {
    handleStart: () => {
      chat.addMessage("")
    },
    handleNewToken: token => {
      chat.pushToken(token)
    },
  },
})

const textSplitter = new RecursiveCharacterTextSplitter({
  chunkSize: 1000,
})
const docs = textSplitter.createDocuments([text])

const vectorStore = await HNSWLib.fromDocuments(
  docs,
  new OpenAIEmbeddings()
)

const chain = VectorDBQAChain.fromLLM(model, vectorStore)

setLoading(false)
let messages = await chat({
  onSubmit: async query => {
    const res = await chain.call({
      input_documents: docs,
      query,
    })
  },
})

inspect(messages)

```


## Google AI


[Open google-ai in Script Kit](https://scriptkit.com/api/new?name=google-ai&url=https://gist.githubusercontent.com/johnlindquist/3086fd1ddb12e16056cf116633f69547/raw/7ded0692a0909bbdd8b80eb7af69a5d2bf3d7352/google-ai.ts")

```js
/*
# Google AI Experiment

This is 100% experimental. I'm still learning the ins and outs of langchain.
If you have feedback on how to improve, PLEASE share 🙏

\- John Lindquist
 */

// Name: Google AI

import "@johnlindquist/kit"

await npm("openai")
await npm("langchain")

// Note: This lib is updated fairly frequently to keep up with Google's changes: https://www.npmjs.com/package/googlethis
await npm("googlethis")
await npm("@extractus/article-extractor")

let { OpenAI } = await import("langchain")
let { Tool } = await import("langchain/tools")
let { initializeAgentExecutor } = await import(
  "langchain/agents"
)

class GoogleThis extends Tool {
  name = "search"
  description =
    "a search engine. useful for when you need to answer questions about current events. input should be a search query. Output should include the best result and associated URL."

  formatResults = response => {
    let data = response?.results
      ?.slice(0, 3)
      ?.map(r => {
        return `
title: ${r.title}
description: ${r.description}
url: ${r.url}
`
      })
      .join("\n")

    if (response?.knowledge_panel?.title)
      data = `Best title: ${response?.knowledge_panel?.title}
${data}`

    if (response?.knowledge_panel?.description)
      data = `Best description: ${response?.knowledge_panel?.description}
${data}`

    return data
  }

  async call(input: string) {
    let google = await import("googlethis")
    let response = await google.search(input)
    return this.formatResults(response)
  }
}

class ReadURL extends Tool {
  name = "read"
  description = `a web scraper. Input is a url. Output is the contents of the page.`

  formatArticle = (url, article) => {
    let formatted = ``
    try {
      formatted = Object.entries(article)
        .filter(([key, value]) => key && value)
        .map(([key, value]) => {
          // In case the article contents are too long
          // TODO: Should probably wrap over to a "Document" paradigm here...
          if (typeof value === "string") {
            return [key, value?.slice(0, 1000) || ""]
          }

          if (Array.isArray(value)) {
            return [key, value.join(",")]
          }

          return [key, value]
        })
        .map(([key, value]) => `${key}: ${value}`)
        .join("\n")
    } catch (error) {
      formatted = `Couldn't read the contents of ${url}`
    }
    return formatted
  }

  async call(url: string) {
    let { extract } = await import(
      "@extractus/article-extractor"
    )
    let article = await extract(url)
    let formatted = this.formatArticle(url, article)

    return formatted
  }
}

let tools = [new GoogleThis(), new ReadURL()]

let yankAnswer = async output => {
  return output?.generations
    ?.at(0)
    ?.at(0)
    ?.text.split("\n")
    ?.at(-1)
    .replace("Final Answer: ", "")
}

let llm = new OpenAI({
  temperature: 0.7,
  streaming: true,
  callbackManager: {
    handleError: log,
    handleEnd: output => {
      let answer = yankAnswer(output)
      history = `${history}
AI: ${answer}`
    },
    handleStart: () => {
      chat.addMessage("")
    },
    handleNewToken: token => {
      chat.pushToken(token)
    },
  },
})

let executor = await initializeAgentExecutor(
  tools,
  llm,
  "zero-shot-react-description"
)

// TODO: I'm sure this can be _vastly_ improved
let history = `The AI should always include relevant URLs when possible.
The AI should use the given information and URLs to explain why it chose the answer.
The AI should avoid commas by formatting with newlines

`

let messages = await chat({
  ignoreBlur: true,
  alwaysOnTop: true,
  onSubmit: async input => {
    history = `${history}
Me: ${input}`

    await executor.call({ input: history })
  },
})

inspect(messages)

```


## Read More about LangChain to Get Started with AI in Script Kit

https://hwchase17.github.io/langchainjs/docs/overview


Script Kit AI Chat Pre-release

# Script Kit v1.48.0 - February 2023 Release

Download Script Kit v1.48.0 from: https://scriptkit.com

Watch release video:
https://www.youtube.com/watch?v=FQg8AL539_M

## Drag and Drop Widgets

![CleanShot 2023-02-02 at 14 31 33](https://user-images.githubusercontent.com/36073/216454341-e1aa117f-c238-4a6b-83af-075c463773ab.gif)


Widgets now support `onDrop` and `onMouseDown` handlers. `onMouseDown` can be used in conjunction with `startDrag` to create drag and drop widgets as seen below.

You can put any sort of logic in the `onDrop` such as processing files using `ffmpeg`, uploading files to a server, etc, etc.

The widget `setState` can be used to show files/progress/etc in effect creating tiny application crafted _just for you_ 🤩

```js
let files = []

let w = await widget(
  `<div class="flex flex-col">
<h2 class="text-2xl">Drop Files</h2>
<span class="text-sm py-1 cursor-pointer" v-for="(file, index) in files" :key="file" :data-file="file">{{file}}</span>
</div>
`,
  {
    containerClass: `p-4 h-screen w-screen overflow-auto`,
    width: 300,
    height: 300,
    draggable: false,
    state: {
      files,
    },
  }
)

w.onDrop(event => {
  if (event?.dataset?.files) {
    files.push(...event.dataset.files)
    w.setState({
      files,
    })
  }
})

w.onMouseDown(event => {
  if (event.dataset.file) {
    startDrag(event.dataset.file)
  }
})
```

## `// Alias` Metadata

Have a script you run often? Use `// Alias` to jump that script to the top of the list when that alias is hit:

```js
// Alias: hi
say("hi")
```

## Fixes for Windows/Linux Installs

After a huge influx of users since the beginning of the year on a variety of different systems and setups, we've been able to test and fix most of the issues that have popped up around various setups with a huge focus on the installation process for Script Kit on Windows and Linux.

If you're finding that you're having issues installing Script Kit, please see this discussion: https://github.com/johnlindquist/kit/discussions/1052


Script Kit v1.48.0 - February 2023 Release

# Script Kit v1.39.17 December Release


<img width="887" alt="CleanShot 2022-12-07 at 19 28 41@2x" src="https://user-images.githubusercontent.com/36073/206341617-0af376eb-e794-47e3-8722-8fa78bee5c85.png">

Download from https://www.scriptkit.com/

## Kit.app Re-Design

Script Kit now has a new look. The theming was completely re-written to help build out customs themes, so we took the opportunity to clean up the main theme.

You may also notice subtle differences in app shadows, transparency, etc which are thanks to the latest Electron updates supporting "Panel" windows (which we were accomplishing through third-party, less-than-ideal ways before). Speaking of updates...

## Updated to the Latest Versions

Script Kit is now on the latest Electron 22, node 16.17.1, and many of the internal dependencies how been updated as well. If you're a developer, you know how big of an undertaking this can be (and how refreshing it is when you're done).

Electron 22 is an exciting release from a dev standpoint and we can't wait to dig into using some of the new features.

## Alternate Keymap Support

Script Kit shortcuts will now support your custom/international keymaps. If will also detect if a keymap has changed and remap based on the new configuration

> Note: If you have a shortcut that accounted for the keymap being "wrong", you'll need to update it to the correct version

## Run a Script From Other Apps with ~/.kit/run.txt

If you want to launch Script Kit from the terminal or another app, write the command and arguments to the `~/.kit/run.txt` file. 
Script Kit watches for changes and will run the command you write to the file.

The following will run the script `browse-scriptkit.js` in your ~/.kenv/scripts dir:

Mac:
```bash
echo browse-scriptkit > ~/.kit/run.txt
```

Windows:
```cmd
echo browse-scriptkit > %HOMEPATH%\.kit\run.txt
```

> Note: You can still use ~/.kit/kar, but I wanted to offer an alternative to our Windows friends

## Watchers Menu

> 🚨 Note: It's now required to manually start the snippet/clipboard watcher from the menubar icon->Watchers menu.

 Some users reported difficulty/freezing with the keyboard monitoring for snippets due to various other app conflicts, hardware conflicts, etc, so we decided to allow more control over starting/stopping/waking the watcher in case something happens. We worked hard in this release to address these issues, but decided it's still best to give control to the user.

## Windows setSelectedText() Fixed

Windows will now properly hide the prompt to be able to paste text to the app behind it

## Soon... Scripts on GitHub Actions

Made significant progress towards using Script Kit on GitHub Actions. Need some more time to test and handle edge cases, but we're close!!!

Script Kit v1.39.17 December Release

# Script Kit v1.36.0 November 2022 Release

Download from [https://www.scriptkit.com/](https://www.scriptkit.com/)


<div align="center">
  <a href="https://www.youtube.com/watch?v=bAXPa1Jxcvg"><img src="https://yt-embed.herokuapp.com/embed?v=bAXPa1Jxcvg" alt="Script Kit November Release Video"></a>
</div>


## Script Markdown

Place a multiline comment at the top of your script to display Markdown to the user when previewing the script. For example:

```js
/*
# Rotate Images
- Get the selected image from Finder
- Creates 3 new versions rotated at 90, 180, and 270
*/
```

## Script `Enter` Metadata

Adding `Enter` metadata will now change the text displayed by the "Run" button in the script preview. For example:

```js
// Enter: Rotate Images
```

## Themes (Pro)

From the "Kit" tab, you can now select a theme for the Script Kit UI. There are a variety of themes to choose from and in upcoming releases, you'll be able to create your personalized themes that you can share.

## Log Window (Pro)

Run a script with `alt+enter` to open the log window. This window will display the output of your script from and commands you run or any console logs.

## Debugger (Pro)

Run a script with `ctrl+enter` to open the debugger. The debugger will automatically pause on any `debugger` statements and allow you to step through your script and inspect/modify variables.

## Account

You can now sign in to GitHub to unlock more features. The first feature is `createGist` (which is used behind the scenes in sharing scripts already) which is now exposed to users:

```js
let {url} = await createGist("My content")
```

In the future, this account will be used for:
- syncing your scripts with a GitHub repo
- connecting to GitHub repos to run GitHub Actions
- displaying stats about your scripts
- pro plan/team plans
- and much more...


## Widgets Dynamic Lists

Widgets can now use dynamic lists and get data from an item selected. Please check out this example and watch the youtube video for more details.

https://github.com/johnlindquist/kit/discussions/948

## Snippet Keyboard Layouts

Some users reported that Snippets were not working on non-standard keyboard layouts. The snippet engine has been updated to detect your current system keyboard layout and adjust accordingly.

## Focus Window
> Requires "Security & Privacy" > "Accessibility" > "Screen Recording" permission to be enabled to work so it can get the window title names.

Hit colon (:) from the main menu to open the focus window script. This lists all of the windows open and allows you to select which window to bring into focus.




Script Kit v1.36.0 November 2022 Release

# Script Kit 1.32.2 Released 🎉

Download here: https://scriptkit.com

## Windows Preview 🤩

We are excited to announce the first Windows preview of Script Kit! This build is very close to feature-parity with the OSX version, so you can expect the vast majority of scripts you run on Mac to also run on Windows.

> Note: We haven't purchased the Windows code signing certificate yet, so Windows will warn you that it can't verify Script Kit when you begin the install process. Also, this causes that Windows updates will need to be installed manually. We plan on setting up the Windows code-signing certificate by the end of the year to fix these issues then we'll remove the "Preview" label 😊

Snippets, Watchers, Schedule, etc, etc, etc all work. If an api is not supported on Windows (mostly the functions that get information about the desktop) then it will display a "Not supported on Windows" message.

The "Browse" (`/` from the main menu) and "File Search" (`.` from the main menu) both required a ton of work, but they're working as well. We'll get the App Launcher sorted out in the next release.

## Debugger

You can now debug your scripts by simply pressing `cmd+enter` from the main menu (`ctrl+enter` on Windows). This will open a built-in inspector that will allow you to step through your script, set breakpoints, and inspect variables.

Use the `debugger` keyword to set a breakpoint in your script. The inspector will pause execution when it hits the breakpoint and you can mess around with the variables and step through the script to your heart's content. You can even invoke functions such as `setDescription()` and treat the inspector like a REPL.

## Repair

The menubar now includes a `Debug` menu. From `Debug->Force Repair Kit SDK` you can force the Kit SDK to be reinstalled. This is useful if you're having issues with the Kit SDK due to npm acting up or if an update failed.

## `await cutText()`

The `cutText()` function will cut the latest typed word and bring it into your script.

```js
let word = await cutText()

// Send word to an API, wrap the word in markdown, etc, etc
```

## Other Fixes

* The TypeScript esbuild compiling should be faster and more stable
* New install splash now shows the npm progress status
* App Launcher fixes (`;` from the main menu)
* Google Fixes (`~` from the main menu)

October 2022 Release (v1.32.2) - Windows Preview 🤩, Debugger 🐞, and Repairs 🛠️

# Script Kit 1.30.8 Released 🎉

Download here: https://www.scriptkit.com/

This is our first release after a couple of busy summer months, and it's slam-packed full of new features and UX!

## Postfix Snippets

Postfix snippets are snippets that are triggered by typing a postfix after a "variable" of text. The variable is represented by a `*` at the beginning of snippet. In the `*html,,` example below, typing `divhtml,,` would treat `div` as the variable and render out `<div>Hello world</div>`.

### Postfix Snippet Hello World

```js
// Name: Example Postfix Snippet
// Snippet: *html,,

import "@johnlindquist/kit"

let value = await arg("I'm the '*' content")

setSelectedText(`<${value}>Hello world</${value}>`)
```

### Postfix Snippet Query API

The snippet can also take the content of the `*` and post it to an API for more complex scripts.

In this example, the content is used to query google and create a markdown link from the word you typed.

```js
// Name: Markdown Link from Google Snippet
// Snippet: *,.

import "@johnlindquist/kit"

let google  = await npm("googlethis")

const options = {
  page: 0, 
  safe: false,
  additional_params: { 
    hl: 'en' 
  }
}

let value = await arg("I'm the asterisk content")
let response = await google.search(value, options);

let url = response.results[0].url

setSelectedText(`[${value}](${url})`)
```


## `template()`

The `template` prompt will present the editor populated by your template. You can then tab through each variable in your template and edit it. 

Templates pair really, _really_ nicely with Snippets!

### Template Hello World

```js
let text = await template(`Hello $1!`)
```

### Standard Usage

```js
let text = await template(`
Dear \${1:name},

Please meet me at \${2:address}

    Sincerely, John`)
```


## `await docs()`

`docs()` takes the file path of a markdown file and displays it as a list of choices.

Each h2 is displayed as a choice while the content of the h2 is displayed in the preview.

Selected the choice will return current h2.

### Submitting a `docs()` value

If you'd rather submit a value instead of the h2, then use an HTML comment to specify the value under the h2's content:

```md
## I'm the Choice Header

```

### `docs()` Example

```js
// Name: Example Docs

import "@johnlindquist/kit"

let buffer = await download(`https://raw.githubusercontent.com/BuilderIO/qwik/main/README.md`)

let filePath = tmpPath("README.md")
await writeFile(filePath, buffer)


let selectedDoc = await docs(filePath)

dev({selectedDoc})
```

## UI Shortcuts in the "Action Bar"

The September 2022 release adds a new "Action Bar" at the bottom of the UI which supports custom shortcuts.

A shortcut has a `name`, `key`, `onPress` and `bar` property. When you press the shortcut, it will trigger the `onPress` function. You can also click on the shortcut to trigger the `onPress` function.

```js
let clearInput = {
            name: "Clear",
            key: "cmd+u",            
            onPress: async () => { 
                setInput("")
            },
            // optional, but will only display when set
            bar: "right",
}
```


Add each shortcuts to a `shortcuts` array which is passed to the prompt config (most commonly, the first argument of `arg()`).

### UI Shortcuts Example

```js
// Name: Shortcuts Example

import "@johnlindquist/kit"

let clearInput = {
            name: "Clear",
            key: "cmd+u",            
            onPress: async () => { 
                setInput("")
            },
            // optional, but will only display when set
            bar: "right",
}

let reloadChoices = {
            name: "Reload",
            key: "cmd+l",
            bar: "right",
            onPress: async () => { 
                setChoices(["one","two","three"])
            }
}      

let submitInputNotChoice = {
            name: "Submit Input",
            key: "cmd+i",
            bar: "right",
            onPress: async (input) => { 
                submit(input)
            }
}                

let runAppLauncher = {
            name: "Launch App",
            key: "cmd+a",
            bar: "left",
            onPress: async () => { 
                await run(kitPath("main", "app-launcher.js"))
            }
}

let result = await arg({
    placeholder: "Shortcut demo",
    shortcuts: [        
        clearInput,
        reloadChoices,
        submitInputNotChoice,
        runAppLauncher
    ]
}, ["apple", "banana", "cherry"])

await div(md(`## ${result}`))
```

## Recent Script Moved to Top

The most recently run script is now moved to the top of the list so that the next time you open the main prompt, you can quickly run it again.


## VS Code Extension

We now have a VS Code extension which allows you to run scripts directly from VS Code:

https://marketplace.visualstudio.com/items?itemName=johnlindquist.kit-extension

More features are coming soon!

## Menubar Updates

The menubar menu now has a "Dev Tools" menu which allows you to perform some common commands that might not be obvious from the main UI.

The menu also lists all of the running processes so that you can easily terminate them without having to hunt around from process ids.

## cmd+tab to Widgets and `dev`

When the main prompt is open, a widget is open, or a `dev` window is open, the Script Kit icon will be added to the doc to allow you to cmd+tab back to widgets/editor/dev/etc. Since Script Kit is a combination of a temporary prompt (like Alfred) but also can host long-running widgets, we had to work through various scenarios of when cmd+tab can be available. Hopefully we've landed on a solution that works for everyone.

## Main Menu `API` and `Guide`

The Main Menu of Script Kit now hosts `API` and `Guide` tabs which allow you to easily copy code snippets or create new scripts from the examples. They're also both easy to update, so you can expect more samples and explanations to play with in the future!

## `await emoji()`

A brand new emoji picker

```js
let e = await emoji()
setSelectedText(e.emoji)
```

## `await fields()`

```js
let [first, last] = await fields(["First name", "Last name"])

dev({
    first,
    last
})
```

## `beep()`

And the most exciting announcement of all, `beep()` is now available!

`beep()` plays a beep sound.

### `beep()` Example

```js
beep()
```

Example Postfix Snippet

September 2022 Release (version 1.30.8) - Postfix Snippets, UI Shortcuts, VS Code Extension, and Much, much more!

# Script Kit 1.19.3 Released 🎉

Download here: https://www.scriptkit.com/
Direct downloads:
* Intel: https://github.com/johnlindquist/kitapp/releases/download/v1.19.3/Kit-1.19.3.dmg
* m1: https://github.com/johnlindquist/kitapp/releases/download/v1.19.3/Kit-1.19.3-arm64.dmg

## Features

* Moved all notifications to menu colored “dots” (red, orange, green)
    * In the future, the user will be able to set these notifications as well
* Completely re-vamped menu for common options
* Implemented an “auth helpers” when user does actions that require “accessibility permissions” (Snippets, clipboard history, setSelectedText, etc)
* `ignoreBlur` allows window to go behind other windows and stay open
* `node` is now stored in `~/.knode` (instead of ~/.kit/node) to allow npx to work in the terminal
* `node` version set to v16.14.2. Version is now synced with Kit.app which resolves conflicts with native packages in scripts
* Keyboard actions (copy/paste/type) have moved from applescript to native code. Snippets, setSelectedText, etc should now feel as “instant” as possible.
* You can now `await hide()` for when you need to make sure the prompt is hidden before continuing the script. This was necessary since the new keyboard actions were so fast.
* Moved the script sharing auth flow to a widget
* Internal: Can now set the state of Kit.app from a script to help with debugging


## Fixes

* App launcher failed to parse malformed App plist icons
* Editor whitespace collapsing on HiDPI screens
* Touchbar key while prompt open would cause crash
* Bin files sometimes didn’t regenerate properly when re-launching the app
* Updater issues
* Background UI not updating when user manually terminates process
* Performance: Moved the file watcher to a spawned process that sends events to the App

## More to come...

Finally moved into the new house and settled in. Personal life was too hectic to stream much or do release notes on past couple releases. Expect more streaming, sharing scripts, promotion, and news from me. Cheers! 🥂

_Here's a preview of the new menu and an example of a dot notification_


![The new dot notifications and re-vamped menu](https://cdn.discordapp.com/attachments/963905444823318578/988844882665803926/unknown.png)



June 2022 Release (version 1.19.3) - Menu, Native Keyboard, ignoreBlur

# March 2022 Release (version 1.7.3)

Script Kit should auto-update or you can grab the downloads here: https://www.scriptkit.com/

## Widgets - `await widget()`

A widget is a detached UI window that can control and listen to a script.

<img width="374" alt="CleanShot 2022-03-01 at 12 43 13@2x" src="https://user-images.githubusercontent.com/36073/156237436-f42e8f33-2fbb-48bb-9408-94f1a45283a5.png">

[Open widget-hello-world in Script Kit](https://scriptkit.com/api/new?name=widget-hello-world&url=https://gist.githubusercontent.com/johnlindquist/ca174899643e86f416d301d9599bb4e8/raw/55d334c6dc412c0346a750348d8c0ffa2b8650ba/widget-hello-world.ts")

```js
// Name: Widget Hello World

import "@johnlindquist/kit"

let message = await arg("Hello what?")
await widget(`<h1 class="p-4 text-4xl">Hello ${message}</h1>`)

```

### Widget Events


[Open widget-events in Script Kit](https://scriptkit.com/api/new?name=widget-events&url=https://gist.githubusercontent.com/johnlindquist/1ce2972fdeed0773450f4dba3f3f2c00/raw/6834ccde194ea471f403df9366a7ac283cb853bb/widget-events.ts")

```js
// Name: Widget Events

import "@johnlindquist/kit"

let text = ""
let count = 0

let w = await widget(`
<div class="p-5">
    <h1>Widget Events</h1>
    <input autofocus type="text" class="border dark:bg-black"/>
    <button id="myButton" class="border px-2 py-1">+</button>
    <span>{{count}}</span>    
</div>
`)

w.onClick((event) => {
    if (event.targetId === "myButton") {
        w.setState({count: count++})
    }
})

w.onClose(async () => {
    await widget(`
<div class="p-5">
    <h1>You closed the other widget</h1>
    <p>${text}</p>
</div>
`)
})

w.onInput((event) => {
    text = event.value
})

w.onMoved(({ x, y}) => {
    // e.g., save position
})

w.onResized(({ width, height }) => {
    // e.g., save size
})
```

## Closing a Widget
There are 3 ways to close a widget:
1. Hit "escape" with the widget focused
2. End the process of the widget. Hit <kbd>cmd+p</kbd> with the main menu focused to see the running processes or `exit()` anywhere in the script.
3. Use a `ttl` (time to live) in the options when creating a widget

## "Always on Top" and Locking the Widget

[Open widget-always-on-top in Script Kit](https://scriptkit.com/api/new?name=widget-always-on-top&url=https://gist.githubusercontent.com/johnlindquist/bfd8ec67d9632867b0faf4e808381948/raw/90f766f21af8c88760409215e569baef9d8f0238/widget-always-on-top.ts")

```js
// Name: Widget Always on Top

import "@johnlindquist/kit"

await widget(`<h1 class="text-9xl">🇺🇦</h1>`, {
    alwaysOnTop: true,
    transparent: true
})

```

With a widget focused, press <kbd>cmd+l</kbd> to "Lock" the widget. This will disable any possible mouse interactions (including moving, resizing, etc) and allow you to click through the widget to any windows underneath.

To "Unlock":
1. three-fingered swipe up on OSX
2. focus the widget
3. hit <kbd>cmd+l</kbd>

You can now hit move, escape, etc the widget.

## Built-in Terminal - `await term()`

`term` is Script Kit's built-in terminal.

### From the Main Menu

Type <kbd>></kbd> into the main menu to open `term`

### From a Script

Use the `await term()` API to switch to the terminal.

[Open term-hello-world in Script Kit](https://scriptkit.com/api/new?name=term-hello-world&url=https://gist.githubusercontent.com/johnlindquist/10420bab68da357b572c1e703c2c5a43/raw/a287e443f1e57d4541f50feba28b86e1702ff515/term-hello-world.ts")

```js
// Name: Term Hello World

import "@johnlindquist/kit"

await term(`echo 'Hello World!'`)
```

> Note: If you want spawn a new Mac terminal, use `await terminal()`

### Pass Terminal Output to Script

If you end the terminal with <kbd>cmd+enter</kbd>, the script will continue and you can grab the latest text output from the terminal.

> 🐞: <kbd>ctrl+any key</kbd> will also end the terminal. This is a bug (it was only meant to be ctrl+c) which I'll fix soon. I'm also open to ideas for other shortcuts to "end" a terminal that aren't taken by vim/emacs/etc, because I know I'll be missing some.
> 🐞: `term` doesn't grab keyboard focus when opening. I'll get that fixed ASAP!

[Open term-returns in Script Kit](https://scriptkit.com/api/new?name=term-returns&url=https://gist.githubusercontent.com/johnlindquist/935445caef26d1c13f195533569cd0cc/raw/ca921b09480a3d7b5bf63e7a777011199e642fb9/term-returns.ts")

```js
// Name: Term Returns

import "@johnlindquist/kit"

let text = await term(`ls ~/.kit`)
await editor(text)
```

## Menubar - `menu()`

`menu` allows you to customize the menubar for Script Kit.

<img width="290" alt="CleanShot 2022-03-01 at 12 40 58@2x" src="https://user-images.githubusercontent.com/36073/156237149-c40843db-4dd2-4e35-9854-4a922e9cd1dd.png">

[Open menu-hello-world in Script Kit](https://scriptkit.com/api/new?name=menu-hello-world&url=https://gist.githubusercontent.com/johnlindquist/6aeb6a3f916bfc40e9acd6b9d4388b34/raw/21d8c70da05f08e454d81cb0ccebbbbc82b42f7d/menu-hello-world.ts")

```js
// Name: Menu Hello World

import "@johnlindquist/kit"

menu(`Hello 🌎`)
```

### Menu with Scripts

The second arg of menu can be an array of scripts you wish to present in a drop-down menu. This way, on left-click, you'll get a list of scripts to pick from from the menubar rather than opening the main Script Kit UI.

[Open menu-with-scripts in Script Kit](https://scriptkit.com/api/new?name=menu-with-scripts&url=https://gist.githubusercontent.com/johnlindquist/0e07e0a8bd4926be6d843ce49fbb4474/raw/4a111ceeae7725525fdcf8bf546105698a4ac4c9/menu-with-scripts.ts")

```js
// Name: Menu with Scripts

import "@johnlindquist/kit"

// An empty string means "Use default Script Kit icon"
menu(``, [
    "app-launcher"
])
```

## Built-in Editor Types

Script Kit's built-in editor now loads all of Script Kit's types! This was a huge undertaking that everyone just expects to work. You all know how that feels 😇

> 🐞: Please let me know if you see any missing. I noticed that I missed the types for `terminal` and `iterm` when putting this post together 🤦‍♂️.

## March Plans

I'm dedicating March to DOCUMENTATION!!! (and bug-fixes)... I have _a lot_ of script requests to follow-up on and work around the newsletter and other non-app stuff. I'm also moving this month, so y'all know how stressful that can be. So expect the April build to be extremely light feature-wise, but I will be set up in the new house ready to much more live-streaming and communication. Can't wait to share more! 🙂

## Questions?

I'm happy to help with any questions you may have!

Widget Hello World

March 2022 Release (version 1.7.3) - Widgets! Built-in Terminal, Menu, and Built-in Editor Types

Been a _busy_ month of major Script Kit features!

## Built-in Editor

Script Kit's number one goal is to make writing time-saving scripts easier. So now Script KIt comes with a pre-configured editor, complete with autocompletion and error checking:

https://user-images.githubusercontent.com/36073/152349718-9f9af13f-4cbb-4444-810a-2f1281938106.mp4

If you're already using vs code, you can switch to the "Kit" editor in the `Kit` tab -> `Change Editor`.

## Main Menu Shortcuts and `/`, `~`, and `>`

The Script Kit main menu will continue to grow in features. 

### Shortcuts

* `cmd+f` - Does a `grep` search through all of your scripts
* `cmd+p` - Launches a `Processes` menu for currently running scripts

### Path Mode
Type the following characters to change the mode of the main menu:
* <kbd>~</kbd> Switches to a path selector mode in your home directory
* <kbd>/</kbd> Switches to a path selector mode in your root directory

Navigate with <kbd>right</kbd>/<kbd>left</kbd> or <kbd>tab</kbd>/<kbd>shift+tab</kbd> then select with <kbd>return</kbd>. Here's an example of typing `~`

https://user-images.githubusercontent.com/36073/152386816-8be054d6-047c-416f-ae2b-dce1723d222c.mp4

### Command Mode

* <kbd>></kbd> Switches to a command mode to execute a command


https://user-images.githubusercontent.com/36073/152387376-b2e8b71a-4980-4d23-8c98-4f56f3ce1fdd.mp4


### Future Work
In the March release, planning on these:

* <kbd>,</kbd> List system preferences
* <kbd>.</kbd> App launcher
* <kbd>;</kbd> MEGA MENU WITH EVERYTHING 🤭

## `await path()`

You can now prompt to select a path. This UI  works exactly like "path mode" above.

```js
let selectedPath = await path()
cd(selectedPath)

await exec(`git pull`) // this will now operate based on the selectedPath
```

## Event Handlers

When building the `path` prompt, I realized it just wasn't possible to do in a script. So I put in the effort to expose the event handlers from the app into the prompt. So even though `path` behaves very differently, it's still an `arg` with customized handlers. You can override many of the handlers yourself for customized prompts:

For example, you can override the default behavior of `Escape` terminating your current script:

```js
// Submit the current input when you hit escape
await arg({
  onEscape: (input)=> {
    submit(input)
  }
})
```

Overriding handlers is definitely considered "advanced", so I'm happy to answer any questions!

Here's a list of all the new `arg` config properties:
```js
export interface ChannelHandler {
  (input: string, state: AppState): void | Promise<void>
}

export interface PromptConfig
  onNoChoices?: ChannelHandler
  onChoices?: ChannelHandler
  onEscape?: ChannelHandler
  onAbandon?: ChannelHandler
  onBack?: ChannelHandler
  onForward?: ChannelHandler
  onUp?: ChannelHandler
  onDown?: ChannelHandler
  onLeft?: ChannelHandler
  onRight?: ChannelHandler
  onTab?: ChannelHandler
  onInput?: ChannelHandler
  onBlur?: ChannelHandler
  onChoiceFocus?: ChannelHandler

  debounceInput?: number
  debounceChoiceFocus?: number

  onInputSubmit?: {
    [key: string]: any
  }
  onShortcutSubmit?: {
    [key: string]: any
  }
}
```

## onInputSubmit, onShortcutSubmit

If you want to create "shortcuts" to submit specific values, can use the new `onInputSubmit` and `onShortcutSubmit`. These allow you to bind text or shortcuts to submit values. This is exactly how the main menu works:

![CleanShot 2022-02-03 at 09 47 42](https://user-images.githubusercontent.com/36073/152388672-db242f4e-20e2-4645-a326-a8bbc960f63d.png)


## Beta Pro Features: Menubar

You can now customize the text of the Script Kit menubar icon to say anything with the `pro.beta.menubar` method. In the future, you'll be able to build out an entire menu, but I thought I'd sneak this feature in for fun in this build:

[Open menubar-demo in Script Kit](https://scriptkit.com/api/new?name=menubar-demo&url=https://gist.githubusercontent.com/johnlindquist/ef01308eb63715970f26ee1378473194/raw/9ad4219968d9ec1a9747811a71c678ad8e241ec0/menubar-demo.ts")

```js
// Name: Menubar Demo

import "@johnlindquist/kit"

let value = await arg("Set the menubar to:")
pro.beta.menubar(value)


```

https://user-images.githubusercontent.com/36073/152394319-d9e071fe-edcd-4cf2-be3e-60d5ba7b01cd.mp4


## Terminate Processes

If you need to end a script that's running in the background, stuck on an exec command, or whatever reason, open the main menu with the <kbd>cmd+;</kbd> shortcut, then press this button (or hit <kbd>cmd+p</kbd>. This will open a "terminate processes" window where you can end your scripts:

![CleanShot 2022-02-03 at 10 20 45@2x](https://user-images.githubusercontent.com/36073/152394881-cf612921-1f00-4458-861a-3538053377dd.png)

Menubar Demo

February 2021 (version 1.6.9) - Built-in Editor, New Main Menu Features, `await path()`, Event handlers, Beta pro features, Terminate Process

# Script Kit for Linux - Developer Preview

## Why "Developer Preview"

1. Building from the "Mac" source

Currently, the Linux build builds from the exact same branch as the Mac build. While this works fine, for now, we'll want two separate release cadences and feature sets. This could be done through a branch, but then I'd have to set up a new release server. I'll figure it out details next year.

2. The Linux build is missing all the OS-specific tools

Linux currently doesn't support `getSelectedText`, `getTabs`, and other utils that are written in AppleScript. I'm planning to tackle many of those utils in Rust, which theoretically should allow them to be cross-platform, but that's another task for next year.

3. I've Only Tested on Ubuntu through a Parallels vm

Obviously will need some more real-world testing.

## Where to Download

Download the AppImage here:
https://github.com/johnlindquist/kitapp/releases/tag/v1.5.1

Script Kit for Linux - Developer Preview

# Script Kit is Officially Released! 🎉

Download now from https://scriptkit.com

## Free Script Kit Course on [egghead.io](https://egghead.io)

To help you get started, I put together a short course as a feature tour:

https://egghead.io/courses/script-kit-showcase-for-optimizing-your-everyday-workflows-e20ceab4

If you've been using Script Kit for a while on the beta, you know it can do much, much more than what's shown in the lessons, but everyone has to start somewhere. Speaking of the beta...

## Beta Channel Discontinued

If you installed the beta, please download from https://scriptkit.com, quit Kit.app, and replace with the new version. This will put you on the “Main” channel. Updates will be ~monthly. The beta channel is discontinued ❗️

Also, thank you so, so much for all your feedback and patience with updates over the past year. You’ve really helped make Script Kit what it is today and I’m forever grateful 🙏

## Windows Developer Preview

The details for the Windows build are found here: https://github.com/johnlindquist/kit/discussions/654

## Plans for 2022

1. Make the dev setup more contribution-friendly. I would love to accept PRs later next year.
2. Get the Windows build to parity with Mac.
3. Lots of lessons and scripts. I can finally spend more time sharing scripts than working on the app 😎
4. Research into Rust, runtimes, and utilities that can provide any benefit to making our scripts better.
5. Focus on "export to serverless function", "export as github action", and other ways to maximize the work you put into your scripts.
5. Script Kit Pro. A paid version with additional features not found in the base version. Not ready to talk about it, but it's exciting!


🥳  Script Kit Launch Day 🎉

# Script Kit for Windows - Developer Preview

## Why "Developer Preview"

1. I haven't bought a certificate to add to the build:
- You'll see many "untrusted" warnings when downloading/installing
- Auto-updating will not work

2. I haven't decided if the Windows repo will be a fork, branch, or main

Currently, the Windows build builds from the exact same branch as the Mac build. While this works fine, for now, I'm pretty sure we'll want two separate release cadences and feature sets. This could be done through a branch, but then I'd have to set up a new release server. I'll figure it out the details next year.

3. The Windows build is missing all the OS-specific tools

Windows currently doesn't support `getSelectedText`, `getTabs`, and other utils that are written in AppleScript. I'm planning to tackle many of those utils in Rust, which theoretically should allow them to be cross-platform, but that's another task for next year.

4. I've Only Tested It on Two Laptops

The Mac version has been used/tested by many, many people. I have two Windows laptops at home to test it on. It works well, but I don't know how much your mileage will vary.

## Where to Download

Download the  installer here:
https://github.com/johnlindquist/kitapp/releases/tag/v1.5.1

Again, this build will not auto-update. I'll post announcements here when new versions are available and you'll have to download the new version each time until I have the certificate and release servers worked out. Honestly, I'll probably write a "check for Windows update and download" script then you can just run that on a `// Schedule: 0 8 * * *` 😉

Script Kit for Windows - Developer Preview

# beta.114 - Info, Settings, Choice Events

## Displaying Temporary Info

Until now, `await div()` worked by waiting for the user to hit enter/escape. This still works fine, but if you want to "timeout" a `div` to display temporary info without user input, this entire script will run without any user interaction:

[Install non-blocking-div](https://scriptkit.com/api/new?name=non-blocking-div&url=https://gist.githubusercontent.com/johnlindquist/87e92156251d09a02154f04772f1e9bf/raw/be6dde40a7f5e1f3b8eaa9abf68d8698031cd3de/non-blocking-div.js")

```js
import "@johnlindquist/kit"

let classes = `p-5 text-3xl flex justify-center items-center text-center`

div(`Wait 1 second...`, classes)
await wait(1000)

div(`Just 2 more seconds...`, classes)
await wait(2000)

div(`Almost there...`, classes)
await wait(3000)

```

## Remember Selection

I needed to build a settings "panel", so I wanted to make a list that could toggle. 


![CleanShot 2021-11-22 at 12 08 29](https://user-images.githubusercontent.com/36073/142920816-3bf47911-578b-4e2f-9662-10257287fde4.png)

The solution was to remember the previous choice by `id`. Any time `arg` is invoked, it will check to see if a choice has an id that matched the previously submitted choice and focus back on it. This enables you to hit enter repeatedly to toggle a choice on and off.

[Install remember-selection](https://scriptkit.com/api/new?name=remember-selection&url=https://gist.githubusercontent.com/johnlindquist/a86395d809c260d943f9763023f5a6f0/raw/4c1057b8500fcdf34fcd179af52f09cc7dee9ca4/remember-selection.js")

```js
import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "On",
  },
  {
    id: uuid(),
    name: "Off",
  },
  {
    id: uuid(),
    name: "On",
  },
]

let argConfig = {
  placeholder: "Toggle items",
  flags: {
    end: {
      shortcut: "cmd+enter",
    },
  },
}

while (true) {
  let item = await arg(argConfig, data)
  data.find(i => i.id === item.id).name =
    item.name === "On" ? "Off" : "On"

  if (flag.end) break
}

await div(JSON.stringify(data), "p-2 text-sm")
```

You could also use this when making a sequence of selections:

[Install remember-sequence](https://scriptkit.com/api/new?name=remember-sequence&url=https://gist.githubusercontent.com/johnlindquist/80f9d005e5bff92691125f736199aa2c/raw/4e05c118bc91defe5e2f39cff20eb9862f4c6a2d/remember-sequence.js")

```js
import "@johnlindquist/kit"

let data = [
  {
    id: uuid(),
    name: "One",
  },
  {
    id: uuid(),
    name: "Two",
  },
  {
    id: uuid(),
    name: "Three",
  },
]

let selections = []

let one = await arg(`First selection`, data)
selections.push(one)

let two = await arg(
  {
    placeholder: `Second selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(two)

let three = await arg(
  {
    placeholder: `Third selection`,
    hint: selections.map(s => s.name).join(", "),
  },
  data
)
selections.push(three)

await div(
  selections.map(s => s.name).join(", "),
  "p-2 text-sm"
)

```



[Install no-choices-event](https://scriptkit.com/api/new?name=no-choices-event&url=https://gist.githubusercontent.com/johnlindquist/5534589a322bbb384e5bf4dbcbf00864/raw/1a7c2500149db3b8731e900646d568fa7fb5ed74/no-choices-event.js")

## Choice Events

`onNoChoices` and `onChoices` allows Kit.app to tell your script when the user has typed something that filtered out every choice. Most commonly, you'll want to provide a `setHint` (I almost made it a default), but you can add any logic you want.

```js
import "@johnlindquist/kit"

await arg(
  {
    placeholder: `Pick a fruit`,
    onChoices: async () => {
      setHint(``)
    },
    onNoChoices: async input => {
      setHint(`No choices matched ${input}`)
    },
  },
  [`Apple`, `Orange`, `Banana`]
)

```



beta.114 - Info, Settings, Choice Events 🎛

## Previews

Creating the previews feature was a huge undertaking, but it really paid off. You can now render html into a side pane by simply providing a `preview` function. A preview can be a simple string all the way to an async function per choice that loads data based on the currently selected choice. For examples, see here #555 

> You can toggle previews on/off with <kbd>cmd+p</kbd>

https://user-images.githubusercontent.com/36073/141507471-db3e4454-f0ef-4e6b-891b-bd4344a40e85.mp4

## Docs

Along with previews comes the built-in docs.

- Docs are built from the GitHub discussions [docs](https://github.com/johnlindquist/kit/discussions/categories/docs) category
- Each time I post/update a doc, a webhook builds the docs into a json file, Kit.app checks for a new docs.json once a day (or you can manually update them from the `Help->Download Latest Docs`
- You can _click an example to install it!_ 🎉
- I'll keep working on docs and examples. Please ask any questions over in the [docs](https://github.com/johnlindquist/kit/discussions/categories/docs) section if you'd like to see something clarified.

https://user-images.githubusercontent.com/36073/141507953-02d44174-3ac0-43d7-8d92-4319e917d512.mp4

## Dev Tools

Pass any data into `devTools` to pop open a Dev Tools pane so you can interact with the data. `devTools` will first log out the data, but it's also assigned to an `x` variable you can interact with in the console.

> `devTools` will be another paid feature once Script Kit 1.0 releases

https://user-images.githubusercontent.com/36073/141508954-df3ea997-a49e-4fdd-bd40-7bff76024a6d.mp4

## Updater Fixes

A few users reported a strange behavior with the updater. If you've had any issues with it, please download a fresh copy of Kit.app from https://scriptkit.com and overwrite the old version. There are many more guards around the updating logic to prevent those issues from cropping up again.




beta.98 - Previews 👀, Docs, devTools, updater improvements

I spent last week getting Script Kit running "in browser" to emulate the terminal experience over on Stackblitz. Here's a quick demo:

https://stackblitz.com/edit/node-rnrhra?file=scripts%2Frepos-to-markdown.js

The plan is to use this to host interactive demos for the guide/docs. I'd appreciate if you could play around with it a bit and see if I missed anything.



Script Kit online on Stackblitz ⚡️

beta.62 brings with it a long-awaited, much-requested feature: TypeScript support!

![CleanShot 2021-09-27 at 10 42 38](https://user-images.githubusercontent.com/36073/134951810-31754840-85c3-4ad3-a493-59c757fdda07.png)

## TypeScript Support 🚀

### 1. But, how?

Each time your run a TS script, Script Kit will compile the TS script using `esbuild` to a JS script in a `.scripts` dir (notice the "dot"). The compiled JS script is then imported from there. Using `.scripts` as a sibling dir will help avoid any `import`/path issues. You can also write TS "library" files in your `~/.kenv/lib` dir and import them into your script just fine.

If you're experienced with `esbuild` and curious about the settings, they look like this:

```js
let { build } = await import("esbuild")

await build({
  entryPoints: [scriptPath],
  outfile,
  bundle: true,
  platform: "node",
  format: "esm",
  external: ["@johnlindquist/kit"],
})
```

This also opens the door to exporting/building/bundling scripts and libs as individual shippable tools which I'll investigate more in the future.

### 2. Can I still run my JS scripts if I switch to TS?

Yes! Both your TS and JS scripts will show up in the UI.

### 3. Why the `import "@johnlindquist/kit"`?

When you create a new TS script, the generated script will start with the line: `import "@johnlindquist/kit"`

This is mostly to make your editor stop complaining by forcing it to load the type definition files and forcing it to treat the file as an "es module" so support "top-level `await`". It's not technically required since it's not technically importing anything, but your editor will certainly complain very loudly if you leave it out.

### 4. Where is the setting stored?

Look in your `~/.kenv/.env` for `KIT_MODE=ts`.

## fs-extra's added to global

The [fs-extra methods](https://www.npmjs.com/package/fs-extra#methods) are now added on the global space. I found myself using `outputFile`, `write/readJson`, etc too often and found them to be a great addition. The only one missing is `copy` since we're already using that to "copy to clipboard". You can bring it in with the normal import/alias process if needed, e.g., `let {copy:fsCopy} = await import("fs-extra")`

## Sync Path

![CleanShot 2021-09-27 at 11 10 26](https://user-images.githubusercontent.com/36073/134954703-7c9d779f-268a-4f8b-973a-59ac71eebaf0.png)

You may notice running scripts from the Script Kit app that some commands you can run in your terminal might be missing, like "yarn", etc.

Run the following command in your terminal to copy the $PATH var from your terminal to your `~/.kenv/.env`. This will help "sync" up which commands are available between your terminal and running scripts from the app.

```bash
~/.kit/bin/kit sync-path
```


TypeScript support! 🚀

## tl;dr Here's an example repo

The example script creates a release, downloads an image, and uploads it to the release.

https://github.com/johnlindquist/kit-action-example

## Template Repo

This page has a "one-click" clone so you can add/play with your own script.

https://github.com/johnlindquist/kit-action-template

## What is it?

Use any of your scripts in a GitHub action. `use` the `kit-action` and point it to a scripts in your `scripts` dir:

```yml
name: "example"
on:
  workflow_dispatch:
  pull_request:
  push:
    branches:
      - main

jobs:
  example:
    runs-on: ubuntu-latest
    steps:
      - name: Script Kit
        uses: johnlindquist/kit-action@main
        with:
          script: "example-script" # The name of a script in your ./scripts dir
```

## Add env vars:

You most likely add ["secrets" to GitHub actions](https://docs.github.com/en/actions/reference/encrypted-secrets#creating-encrypted-secrets-for-an-environment), so you'll want to pass them to your scripts as environment variables:

```yml
jobs:
  example:
    runs-on: ubuntu-latest
    steps:
      - name: Script Kit
        uses: johnlindquist/kit-action@main
        with:
          script: "example-script"
        env:
          REPO_TOKEN: "${{ secrets.REPO_TOKEN }}" # load in your script with await env("REPO_TOKEN")
```

## Works with your existing repos

Feel free to add this action and a `scripts` dir to your existing repos. It automatically loads in your repo so you can parse `package.json`, compress assets, or whatever it is you're looking to add to your CI.

## What does "preview" mean?

Everything is working, but it's pointing to the "main" branch rather than a tagged version. Once I get some feedback, I'll tag a "1.0" version so you can `uses: @johlindquist/kit-action@v1`

## Please ask for help! 😇

I'd ❤️ to help you script something for a github action! Please let me know whatever I can do to help.

Scripts in GitHub actions (preview)

## Search Improvements

beta.55 has a vastly improved search:

Search descriptions 🎉

![CleanShot 2021-08-20 at 13 37 44](https://user-images.githubusercontent.com/36073/130285547-24f111d7-a706-4be2-b0d6-b425afbe6683.png)

Search shortcuts

![CleanShot 2021-08-20 at 13 51 49](https://user-images.githubusercontent.com/36073/130286634-4797c029-c2ed-4071-9e1d-285d6bf1a15f.png)

Search by kenv

![CleanShot 2021-08-20 at 13 51 18](https://user-images.githubusercontent.com/36073/130286567-4fd0a155-43a7-4af5-bd3f-c0a9db9ae8dc.png)

Sear by "command-name" (if you can't think of // Menu: name)

![CleanShot 2021-08-20 at 13 54 45](https://user-images.githubusercontent.com/36073/130286878-62b2a139-b3b7-4c34-904f-40d7b03a7e1c.png)

Sorts by "score" (rather than alphabetically)

## Drag

Choices can now take a `drag` property. This will make list items "draggable" and allow you to drag/drop to copy files from your machine (or even from URLs!) into any app. When using remote URLs, their will be a bit of "delay" while the file downloads (depending on the file size) between "drag start" and "drop enabled", so just be aware. I'll add some sort of download progress indicator sometime in the future, just not high priority 😅

```js
// Menu: Drag demo

await arg(
  {
    placeholder: "Drag something from below",
    ignoreBlur: true,
  },
  [
    {
      name: "Heart Eyes (local)",
      drag: "/Users/johnlindquist/Downloads/john-hearts@2x.png",
      img: "/Users/johnlindquist/Downloads/john-hearts@2x.png",
    },
    {
      name: "React logo svg (wikipedia)",
      drag: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
      img: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
    },
  ]
)
```

![CleanShot 2021-08-20 at 15 26 07](https://user-images.githubusercontent.com/36073/130294979-c45aabe2-6c30-41ad-94b4-64a85a2c34eb.gif)

You can use the `drag` object syntax to define a `format` and `data`

> `text/html`: Renders the HTML payload in contentEditable elements and rich text (WYSIWYG) editors like Google Docs, Microsoft Word, and others.
> `text/plain`: Sets the value of input elements, content of code editors, and the fallback from text/html.
> `text/uri-list`: Navigates to the URL when dropping on the URL bar or browser page. A URL shortcut will be created when dropping on a directory or the desktop.

```js
// Menu: Drag demo

await arg(
  {
    placeholder: "Drag something from below",
    ignoreBlur: true,
  },
  [
    {
      name: "Padding 4",
      drag: {
        format: "text/plain",
        data: `className="p-4"`,
      },
    },
    {
      name: "I love code",
      drag: {
        format: "text/html",
        data: `<span style="background-color:yellow;font-family:Roboto Mono">I ❤️ code</span>`,
      },
    },
  ]
)
```

![CleanShot 2021-08-20 at 15 48 00](https://user-images.githubusercontent.com/36073/130296713-6249d5c2-c01f-42d1-b2c2-ea86d2e4c29b.gif)

## Happiness

I'm _very_ happy with the state of Script Kit. When I started almost a year ago, I had no idea I could push the concept of creating/sharing/managing custom scripts so far. I think it looks great, feels speedy, and is flexible enough to handle so, so many scenarios.

With everything in place, next week I'm starting on creating lessons, demos, and docs. It's time to show you what Script Kit can really do 😉 

P.S. - Thanks for all the beta-testing and feedback. It's been tremendously helpful!


beta.55 Improved Search, Drag, and Happiness 😊

## Design/theme

Put a lot of work into tightening up pixels and made progress towards custom themes:

![CleanShot 2021-08-13 at 09 35 40](https://user-images.githubusercontent.com/36073/129383567-ae628c68-3c96-463f-a47e-4800186ea7ac.png)

Here's a silly demo of me playing with theme generation:

https://user-images.githubusercontent.com/36073/129384214-2af744ab-8165-4e3f-825d-42fadbf86aec.mp4

## Flags ⚐

An astute observer would notice that the `Edit` and `Share` tabs are now gone. They've been consolidated into a "flag menu".

When you press the `right` key from the main menu of script, the flag menu now opens up. This shows the selected script and gives you some options. It also exposes the keyboard shortcuts associated with those options that you can use to :

![CleanShot 2021-08-13 at 09 42 52](https://user-images.githubusercontent.com/36073/129384559-bff59ebf-88d9-4b95-b9b5-640ce755fe8f.png)

I've found I use `cmd+o` and `cmd+n` all the time to tweak scripts of quickly create a new one to play around with.

### Custom Flags

You can pass your own custom flags like so:

[Install flags-demo](https://scriptkit.com/api/new?name=flags-demo&url=https://gist.githubusercontent.com/johnlindquist/b96c8f8de9c256f909ae0f6ab0adda39/raw/9f049cf454f0766fb278e5ee7a24c6b6776df889/flags-demo.js)

```js
//Menu: Flags demo

let urls = [
  "https://scriptkit.com",
  "https://egghead.io",
  "https://johnlindquist.com",
]

let flags = {
  open: {
    name: "Open",
    shortcut: "cmd+o",
  },
  copy: {
    name: "Copy",
    shortcut: "cmd+c",
  },
}

let url = await arg(
  { placeholder: `Press 'right' to see menu`, flags },
  urls
)

if (flag?.open) {
  $`open ${url}`
} else if (flag?.copy) {
  copy(url)
} else {
  console.log(url)
}
```

Notice that `flag` is a global while `flags` is an object you pass to `arg`. This is to help keep it consistent with terminal usage:

From the terminal
```bash
flags-demo --open
```

Will set the global `flag.open` to `true`

![CleanShot 2021-08-13 at 10 08 30](https://user-images.githubusercontent.com/36073/129388037-3f27a12d-9e44-4402-a51f-bac39eead54d.png)


You could also run this and pass in all the args:

```bash
flags-demo https://egghead.io --copy
```

In the app, you could create a second script to pass flags to the first with. This is required if you need to pass multiple flags since the `arg` helper can only "submit" one per `arg`.

```js
await run(`flags-demo https://egghead.io --copy`)
```

I'll put together some more demos soon. There are plenty of existing CLI tools out there using flags heavily, so lots of inspiration to pull from.

## `await div()`

There's a new `div` "component". You can pass in arbitrary HTML. This works well with the `md()` helper which generates `html` from markdown.

[Install div-demo](https://scriptkit.com/api/new?name=div-demo&url=https://gist.githubusercontent.com/johnlindquist/0ad790953f7101d313abfd48182356b0/raw/c70e17649317986707d2ac714c31afe6f7850015/div-demo.js)

```js
// Menu: Div Demo

// Hit "enter" to continue, escape to exit
await div(`<img src="https://placekitten.com/320"/>`)

await div(
  md(
    `
    # Some header

    ## You guessed it, an h2

    * I
    * love
    * lists
    `
  )
)

```

## Fixed `notify`

`notify` is now fixed so that it doesn't open a prompt

The most basic usage is:

```js
notify("Hello world")
```

`notify` leverages [https://www.npmjs.com/package/node-notifier](https://www.npmjs.com/package/node-notifier)

So the entire API should be available. Here's an example of using the "type inside a notification":

[Install notify-demo](https://scriptkit.com/api/new?name=notify-demo&url=https://gist.githubusercontent.com/johnlindquist/44387dc5b0c170e4146b061162c33532/raw/1bce77fb778a45cf9052a63d02dcab94a9cf7ef0/notify-demo.js)

```js
// Menu: Notify Demo
let notifier = notify({
  title: "Notifications",
  message: "Write a reply?",
  reply: true,
})

notifier.on("replied", async (obj, options, metadata) => {
  await arg(metadata.activationValue)
})

```




beta.46 Design, ⚐ Flags, div, fixed notify

## `console.log` Component

The follow code will create the below prompt (👀 notice the black background logging component):
```js
let { stdout } = await $`ls ~/projects | grep kit`

await arg(`Select a kit dir`, stdout.split("\n"))

```
<img width="402" alt="CleanShot 2021-07-22 at 16 13 10@2x" src="https://user-images.githubusercontent.com/36073/126716080-db8e1361-7972-488c-8873-2996a7c03064.png">

```js
console.log(chalk`{green.bold The current date is:}`)
console.log(new Date().toLocaleDateString())
await arg()
```

<img width="416" alt="CleanShot 2021-07-22 at 16 12 24@2x" src="https://user-images.githubusercontent.com/36073/126716010-b38c8d28-af68-4f1f-aefd-93de186a03d2.png">

The log even persists between prompts:

```js
let first = await arg("First name")
console.log(first)
let last = await arg("Last name")
console.log(`${first} ${last}`)
let age = await arg("Age")
console.log(`${first} ${last} ${age}`)
let emotion = await arg("Emotion")
console.log(`${first} ${last} ${age} ${emotion}`)
await arg()
```
<img width="415" alt="CleanShot 2021-07-22 at 16 19 36@2x" src="https://user-images.githubusercontent.com/36073/126716651-bb7b539a-2314-4d95-bcd9-5104c8d18ec5.png">

Click the "edit" icon to open the full log in your editor:
![CleanShot 2021-07-22 at 16 20 57@2x](https://user-images.githubusercontent.com/36073/126716749-4eda367a-4e55-424f-915a-30207583cd3f.png)

## cmd+o to Open

From the main menu, hitting `cmd+o` will open:

1. The currently selected script from the main menu
2. The currently running script
3.  Any "choice" that provides a "filePath" prop:

```js
await arg(`cmd+o to open file`, [
  {
    name: "Karabiner config",
    filePath: "~/.dotfiles/karabiner/karabiner.edn",
  },
  {
    name: "zshrc",
    filePath: "~/.zshrc",
  },
])
```

I've found this really useful when I want to tweak the running script, but I don't want to go back through the process of finding it.

## Experimental `className`

You can pass `className` into the arg options to affect the container for the list items or panel. Most classes from Tailwind should be available. Feel free to play around with it and let me know how it goes 😇:

```js
await arg(
  {
    className: "p-4 bg-black font-mono text-xl text-white",
  },
  `
  <p>Working on Script Kit today</p>
  <img src="https://i.imgflip.com/5hc0v4.jpg" title="made at imgflip.com"/>`
)

```

<img width="428" alt="CleanShot 2021-07-22 at 16 38 40@2x" src="https://user-images.githubusercontent.com/36073/126717978-2bf8d0e4-24a4-47ad-948a-97fde38a83e0.png">


```js
await arg(
  {
    className: "p-4 bg-black font-mono text-xl text-white",
  },
  ["Eat", "more", "tacos 🌮"]
)
```

<img width="420" alt="CleanShot 2021-07-22 at 16 41 19@2x" src="https://user-images.githubusercontent.com/36073/126718146-c3c94b10-0e5a-4e9d-8bab-a6b7c3b6f1d3.png">



beta.33 `console.log` component, cmd+o to Open, `className`

I'm starting on lessons/docs on Monday. If you have anything specific you want me to cover, please reply below!

## M1 Build
 If you're on an M1 mac, you can download the new M1 build from https://www.scriptkit.com/

1. Download https://www.scriptkit.com/
2. Quit Kit. *note - typing `kit quit` or `k q` in the app is the fastest way to quit.
3. Drag/drop to overwrite your previous build
4. Kit should now auto-update from the M1 channel
5. Open Kit

## Kenv Management
There are a lot of tools to help manage other kenvs. They're in the `Kit` menu and once you've installed a remote kenv (which is really just a git repo with a scripts dir), then more options show up in the `Edit` menu to move scripts between kenvs, etc. I'll cover this in detail in the docs/lessons

## Polish
Lots of UI work:
* Remembering position - Each script with a `//Shortcut` will remember its last individual prompt position. For example, if you have a script that uses `textarea`, then drag it to the upper right, the next time you launch that script, it will launch in that position.
* `//Image` metadata - Scripts can now have images:
```js
//Image: https://placekitten.com/64
```
or
```js
//Image: logo.png
```
will load from `~/.kenv/assets/logo.png`


* Spinner - added a spinner for when you submit a prompt and the process needs to do some work before opening the next prompt

![CleanShot 2021-07-16 at 12 22 58](https://user-images.githubusercontent.com/36073/125992326-7b6f0034-00e8-41df-9ca7-f0e33becf0b2.gif)


* Resizing - *Lots* of work on getting window resizing behavior consistent between different UIs. This was a huge pain, but you'll probably never appreciate it 😅
* Lots more - many more small things

## Lessons!

I'm starting to work on lessons next week and getting back into streaming schedule. I would ♥️ to hear any specific questions or lessons you would like to see to help you remove some friction from your day. I'll be posting the lessons over on [egghead.io](egghead.io) for your viewing pleasure. Please ask questions in the replies!



beta.29 M1 build, install remote kenvs, polish, upcoming lessons

## Process Pools and Virtualized Lists

https://user-images.githubusercontent.com/36073/123519955-7fdd8200-d66b-11eb-8167-09b9daed1c9f.mp4


## Experimental `textarea`

Feel free to play around with the `textarea` for multiline input.

```js
let value = await textarea()
```

The API of textarea will change (it currently just sets the placeholder), but it will always return the string value of the textarea, so there won't be any breaking changes if you just keep the default behavior. `cmd+s` submits. `cmd+w` cancels.

## Experimental `editor` (this will become a _paid_  💵 feature later this year)

As an upgrade to `textarea`, `await editor()` will give you a full editor experience. Same as the textarea, the API will also change, but will always return a string of the content.


```js
// Defaults to markdown
let value = await editor()
```

> ⚠️ API is subject to change!
```js
let value = await editor("markdown", `
## Preloaded content

* nice
`)
```

```js
let value = await editor("javascript", `
console.log("Support other languages")
`)
```

### A note on paid features

Everything you've used so far in the Script Kit app will stay free. The core `kit` is open-source MIT. 

The paid features will be add-ons to the core experience: Themes, Editor, Widgets, Screenshots, Record Audio, and many more fun ideas. These will roll out experimentally in the free version first then move exclusively to the paid version. Expect the paid versions later this year.


Beta.20 MOAR SPEED! ⚡️

Beta.19 is all about _speed_! I've finally landed on an approach I love to get the prompt moving waaaay faster.

Couple videos below:

## Instant Prompts

https://user-images.githubusercontent.com/36073/121084054-6d270a00-c79d-11eb-8b37-96473de7e0e4.mp4

```js
// Shortcut: option 5

let { items } = await db(async () => {
  let response = await get(
    `https://api.github.com/users/johnlindquist/repos`
  )

  return response.data
})

await arg("Select repo", items)

```

## Instant Tabs

https://user-images.githubusercontent.com/36073/121084134-85972480-c79d-11eb-9e18-94e5a2efa5d1.mp4

## Instant Main Menu

The main menu now also leverages the concepts behind Instant Prompts listed above.

## Faster in the future

These conventions laid the groundwork for caching prompt data, but I still have plenty ideas to speed things, especially around how the app launches the process. I'm looking forward to making this even faster for you!

I'm also starting the work on an "Instant Textarea" because I know popping open a little textarea to take/save notes/ideas is something many people would use. 📝








Beta.19 New Features - Gotta go fast! 🏎💨

TL;DR

- Help -> Create kenv
- Git init new kenv, push to github
- Reply, dm, contact me somehow with the repo 😇

Here's a video walking you through it:

https://user-images.githubusercontent.com/36073/120856653-6732ee00-c53d-11eb-9dfb-04907b036361.mp4



How to Get Your Scripts Featured on ScriptKit.com 😎

## ⚠️Breaking: New `db` helper

[lowdb](https://github.com/typicode/lowdb) updated to 2.0, so I updated the `db` helper to support it.

* access/mutate the objects in the db directly. Then `.write()` to save your changes to the file.
* `await db()` and `await myDb.write()`

Example with a simple object:
```js
let shoppingListDb = await db("shopping-list", {
  list: ["apples", "bananas"],
})

let item = await arg("Add to list")
shoppingListDb.list.push(item)
await shoppingListDb.write()

await arg("Shopping list", shoppingListDb.list)
```


You can also use an `async` function to store the initial data:
```js
let reposDb = await db("repos", async () => {
  let response = await get(
    "https://api.github.com/users/johnlindquist/repos"
  )

  return {
    repos: response.data,
  }
})

await arg("Select repo", reposDb.repos)
```

## Text Area prompt

```js
let text = await textarea()

inspect(text)
```
![CleanShot 2021-06-04 at 14 25 12](https://user-images.githubusercontent.com/36073/120858988-cf370380-c540-11eb-8b79-5483ec090dd8.gif)


## Optional `value`

`arg` choice objects used to require a `value`. Now if you don't provide a value, it will simply return the entire object:

```js
let person = await arg("Select", [
  { name: "John", location: "Chair" },
  { name: "Mindy", location: "Couch" },
])

await arg(person.location)
```

## ⚗️ Experimental "Multiple kenvs"

There was a _ton_ 🏋️‍♀️ of internal work over the past couple weeks to get this working. The "big idea" is supporting multiple kit environments. For example:

* private/personal kenv
* shared kenv
* company kenv
* product kenv

### Future plans
In an upcoming release: 
* you'll be able to "click to install kenv from repo" (just like we do with individual scripts)
* update a git-controlled kenv (like a company kenv)
* the main prompt will be able to search for all scripts across kenvs. 
* If multiple kenvs exist, creating a new script will ask you which kenv to create it in.

For now, you can try adding/creating/switching the help menu. It should all work fine, but will be _waaaay_ cooler in the future 😎

![CleanShot 2021-06-04 at 11 50 32](https://user-images.githubusercontent.com/36073/120843227-16b29500-c52b-11eb-974c-a81c260b9ae2.png)

## Improved Error Prompt

Now when an error occurs, it takes the error data, shuts down the script, then prompts you on what to do. For example, trying to use the old `db` would result in this:

![CleanShot 2021-06-04 at 12 03 04](https://user-images.githubusercontent.com/36073/120844575-d6541680-c52c-11eb-8d12-c7c3117e132e.png)

## Improved Tab Switching
Switching tabs will now cancel the previous tabs' script. Previously, if you quickly switched tabs on the main menu, the "Hot" tab results might show up in a different tab because the loaded _after_ the tab switched. The internals around message passing between the script and the app now have a cancellation mechanism so you only get the latest result that matches the prompt/tab. (This was also a ton of internals refactoring work 😅)




Beta.18 Changes/Features (`db` has a breaking change)

New features are separated into the comments below:



✨NEW FEATURES✨ beta.17

`beta.12` brings in the ability to start/stop background tasks.


Using `// Background :true` at the top of your script will change the behavior in the main menu:
```js
// Background: true

setInterval(() => {}, 1000) //Some long-running process
```

<img width="702" alt="Screen Shot 2021-05-06 at 1 30 53 PM" src="https://user-images.githubusercontent.com/36073/117355039-4b212b80-ae6f-11eb-952e-4ee28c65ded4.png">

<img width="681" alt="Screen Shot 2021-05-06 at 1 31 13 PM" src="https://user-images.githubusercontent.com/36073/117355094-5b390b00-ae6f-11eb-817a-86be66cabe18.png">


<img width="679" alt="Screen Shot 2021-05-06 at 1 33 02 PM" src="https://user-images.githubusercontent.com/36073/117355276-9a675c00-ae6f-11eb-82b4-fa069e53b143.png">


## Auto (like nodemon)
```js
// Background: auto

setInterval(() => {}, 1000) //Some long-running process
```

Using `auto`, after you start the script, editing will stop/restart the script.


✨ NEW ✨ // Background: true

Script Kit now supports `// Watch:` metadata

```js
// Watch: ~/projects/thoughts/**/*.md

let { say } = await kit("speech")

say("journal updated")
```

* `// Watch: ` supports any file name, glob, or array (Kit will `JSON.parse` the array).
* Scripts will run on the "change" event
* Read more about supported [globbing](https://github.com/micromatch/picomatch#globbing-features)

> Read about the [other metadata](https://github.com/johnlindquist/kit/discussions/185)

I would _LOVE_ to hear about scenarios you would use this for or if you run into any issues 🙏

// Watch: metadata 👀


https://user-images.githubusercontent.com/36073/115079813-fc5f2200-9ebe-11eb-8e7c-74c8a1d2aee3.mp4

Can't wait to see what you build! Happy Scripting this weekend! 😇

beta.96 - Design, Drop, and Hotkeys! Oh my!


https://user-images.githubusercontent.com/36073/114220248-fc907800-9928-11eb-8096-61a5debbdc0d.mp4


[Install google-image-search](https://scriptkit.app/api/new?name=google-image-search&url=https://gist.githubusercontent.com/johnlindquist/99756d4e1a54c737dc534c4edb5f6c9d/raw/55c440503a8a653c3ef3dafb9ba1bd567fc0b14a/google-image-search.js)

```js
// Menu: Google Image Search
// Description: Searches Google Images
// Author: John Lindquist
// Twitter: @johnlindquist

let gis = await npm("g-i-s")

let selectedImageUrl = await arg(
  "Image search:",
  async input => {
    if (input.length < 3) return []

    let searchResults = await new Promise(res => {
      gis(input, (_, results) => {
        res(results)
      })
    })

    return searchResults.map(({ url }) => {
      return {
        name: url.split("/").pop().replace(/\?.*/g, ""),
        value: url,
        preview: `<img src="${url}" />`,
      }
    })
  }
)

copy(selectedImageUrl)

```



[Install giphy-search](https://scriptkit.app/api/new?name=giphy-search&url=https://gist.githubusercontent.com/johnlindquist/dc17a3f07fb41b855e742a0f995cb0ed/raw/109831f9d40a8293b7d8741b44081fddcb024cda/giphy-search.js)

```js
// Menu: Giphy
// Description: Search giphy. Paste markdown link.
// Author: John Lindquist
// Twitter: @johnlindquist
let download = await npm("image-downloader")
let queryString = await npm("query-string")
let { setSelectedText } = await kit("text")

if (!env.GIPHY_API_KEY) {
  show(
    `<div class="p-4">
      <div>
        Grab an API Key from the Giphy dev dashboard:
      </div>
      <a href="https://developers.giphy.com/dashboard/">Here</a>
    </div>`
  )
}
let GIPHY_API_KEY = await env("GIPHY_API_KEY")

let search = q =>
  `https://api.giphy.com/v1/gifs/search?api_key=${GIPHY_API_KEY}&q=${q}&limit=10&offset=0&rating=g&lang=en`

let { input, url } = await arg(
  "Search giphy:",
  async input => {
    if (!input) return []
    let query = search(input)
    let { data } = await get(query)

    return data.data.map(gif => {
      return {
        name: gif.title.trim() || gif.slug,
        value: {
          input,
          url: gif.images.downsized_medium.url,
        },
        preview: `<img src="${gif.images.downsized_medium.url}" alt="">`,
      }
    })
  }
)

let formattedLink = await arg("Format to paste", [
  {
    name: "URL Only",
    value: url,
  },
  {
    name: "Markdown Image Link",
    value: `![${input}](${url})`,
  },
  {
    name: "HTML <img>",
    value: `<img src="${url}" alt="${input}">`,
  },
])

setSelectedText(formattedLink)

```


*New* Choice Preview

Update (1.1.0-beta.86) adds a [`~/.kit/kit.d.ts`](https://github.com/johnlindquist/kit/blob/main/kit.d.ts) to allow better code hinting and completion.

❗️After updating, you will need to manually "link" your `~/.kenv` to your `~/.kit` for the benefits (This will happen automatically for new users during install)

Method 1 - Install and run this script

[Click to install link-kit](https://scriptkit.app/api/new?name=link-kit&url=https://gist.githubusercontent.com/johnlindquist/f238cb1b3a3ed97890657ccf154d12b1/raw/a488a8b6c331d527bb0433a6b8df9428263b85a0/link-kit.js)

```js
await cli("install", "~/.kit")
```

Method  2 - In your terminal
```bash
PATH=~/.kit/node/bin ~/.kit/node/bin/npm --prefix ~/.kenv i ~/.kit
```

Now your scripts in your `~/.kenv/scripts` should have completion/hinting for globals included in the "preloaded" scripts.

> I still need to add types for the helpers that load scripts from dirs `kit()`, `cli()`, etc.

Please let me know how it goes and if you have any questions. Thanks!

News & Announcements