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

March 2022 Release (version 1.7.3)

Script Kit should auto-update or you can grab the downloads here:

Widgets - await widget()

A widget is a detached UI window that can control and listen to a script.

CleanShot 2022-03-01 at 12 43 13@2x

Open widget-hello-world in Script Kit

// 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

// 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>
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>
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 cmd+p 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

// Name: Widget Always on Top
import "@johnlindquist/kit"
await widget(`<h1 class="text-9xl">πŸ‡ΊπŸ‡¦</h1>`, {
alwaysOnTop: true,
transparent: true

With a widget focused, press cmd+l 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 cmd+l

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 > 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

// 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 cmd+enter, the script will continue and you can grab the latest text output from the terminal.

🐞: ctrl+any key 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

// 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.

CleanShot 2022-03-01 at 12 40 58@2x

Open menu-hello-world in Script Kit

// 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

// Name: Menu with Scripts
import "@johnlindquist/kit"
// An empty string means "Use default Script Kit icon"
menu(``, [

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! πŸ™‚


I'm happy to help with any questions you may have!

Discuss Post