# 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