I use GitHub search all the time for things like searching config files for certain terms, whether it's a Karabiner file or a package JSON file or whatever. In Script Kit, you can create a custom GitHub search specific to your needs.

First, grab the URL containing the information you need.

Create a new script in Script Kit, and add the following code to open the URL:

```javascript
let url = `https://github.com/search?q=karabiner`;
open(url);
```

When you run the script, it will open a new tab with the search results.

Now, let's customize the query by pulling it out and using `await arg`:

```javascript
const query = await arg("Enter a GitHub search query:");
let url = `https://github.com/search?q=${query}`;
```

This allows you to enter a custom search query when running the script, and it will update the search results accordingly.

To store recent search queries, create a file path for the recent queries:

```javascript
let recentFilePath = kenvPath("recent", "karabiner.txt");
```

Use `ensureReadFile` to create and read the file as a text file if it doesn't exist:

```javascript
let content = await ensureReadFile(recentFilePath);
```

Split the content and filter out empty lines to get the recent queries:

```javascript
let recents = content.split("\n").filter((line) => line.trim().length > 0);
let query = await arg("Enter a GitHub search query:", recents);
```

When you run the script and start typing, you'll notice that the submit button is disabled. This is because, by default, strict mode is enabled when passing an array to a prompt. In strict mode, you have to enter text that matches something from the list.

To disable strict mode, set `strict` to `false`:

```javascript
let query = await arg(
	{
		placeholder: "Enter a GitHub search query:",
		strict: false,
	},
	recents
);
```

Now, you can search for items that aren't in the list, and the submit button will be enabled.

Next, we need to write out the file. Use the `writeFile` function, passing in the recent file path and modifying the recents array by removing the query from the current results. Since `recents` is an array, you'll have to join the elements.

```javascript
recents = [query, ...recents.filter((line) => line !== query)];
await writeFile(recentFilePath, recents.join("\n"));
```

Now, the search should work fine, and if you perform a recent search, the new item will be added to the history.

You may want to edit the text file to clear something from your history or modify the recents for any reason. To do this, add an extra action:

```javascript
const OPEN_FILE = "Open karabiner recents file";
let choices = [...recents, OPEN_FILE];

let query = await arg(
	{
		placeholder: "Enter a GitHub search query:",
		strict: false,
	},
	choices
);

if (query === OPEN_FILE) {
	await edit(recentFilePath);
	exit();
}
```

When you run the updated code, you'll see that "Open File" is now an option. And if you have edit the file those options will be available.

We need to do some grouping choices for better organization:

```javascript
let choices = groupChoices(
	[
		...recents.map((name) => {
			return {
				name,
				value: name,
				group: "Recents",
			};
		}),
		{
			name: OPEN_FILE,
			value: OPEN_FILE,
			group: "Actions",
		},
	],
	{
		order: ["Recents", "Actions"],
	}
);
```

By doing this, when we run the script, we'll see recents at the top and actions at the bottom. We can now type something existing like "button" to search for button two, or type "open" to open our file. Alternatively, we can type something new and hit enter to run a query with the new input.

In cases where the typed text doesn't have any results, we can still present information to the user. To do this, add the following code:

```javascript
choices.unshift({
	info: true,
	name: "Hit enter to open GitHub search results",
});
```

Now, the "Hit enter" message will always be at the top, providing users with information on what's going to happen even if they type something that doesn't exist.

To make the placeholder text appear only when there are no search results, we can change the `value` attribute to `miss`. However, if you run this now and type something, it would pass the value of this `miss` choice as the submitted query. To avoid this, we'll add the `skip` attribute as well.

```javascript
choices.unshift({
	miss: true,
	skip: true,
	name: "Hit enter to open GitHub search results",
});
```

This means that the choice can't be selected, and the input will be passed instead. For example, if you type "JavaScript" and hit enter, the value "JavaScript" is passed in as the query since the `miss` choice was skipped.

To style the placeholder text:

```javascript
choices.unshift({
	miss: true,
	skip: true,
	name: "Hit enter to open GitHub search results",
	nameClassName: "text-primary",
});
```

Alternatively, you can define custom CSS for the placeholder text.

```javascript
let css = `
.red {
	color: red;
}
`;
```

Now, update the `nameClassName` attribute to use the `red` class.

When you run the script and type something, the placeholder text will now appear in red.

Learn how to create a customized GitHub search tool using Script Kit, allowing you to search, store recent queries, and easily modify your search history.

Customizing Arg Choices

[00:00] I use GitHub search all the time for things like searching config files for certain terms, whether it's a Karabiner file or a package JSON file or whatever. So in Script Kit, you can grab this URL, which contains the information we need, and I'm going to create a GitHub search, and we'll make this specific to Karabiner.

[00:18] Hit enter to create a new script. If you have multiple Kens, this will show up, I'll put it in my main Ken. Then I'll just drop this URL in here, and I can say open URL. So now when I run this script, this will pop open in a new tab with all of that information. Now, what I want to do is customize the query here.

[00:36] So I'll pull this out, call this a query, and say that our query is await arg, enter a GitHub search query. That's fine. So now we can say search for button two, hit enter, and now you'll see button two is up there,

[00:55] and we have all these results for button two. Now, because I often search for the same thing, let's store our recent queries. I'll say a recent file path is our Ken path, and next to our scripts folder, we'll put a recent folder, and we'll just call this Karabiner.txt, because we're just going to store these queries as new lines in this file.

[01:14] We can use ensure read file on that recent file path. So if that file doesn't exist, it will create it and read it as a text file, and we'll just call this the content, and then we'll just say our recents, and it looks like copilot new. I wanted to split the content and filter out empty lines. So now we're going to pass our recents into here as an array,

[01:34] and I have to show you if I try and run this, and anything I type, you'll see that submit is disabled, and that's because once you start passing in an array to your prompt, if you want to pass some input or a value that doesn't match the array, then you're going to have to disable strict mode.

[01:53] So we'll say strict is false. It defaults to true, meaning you have to enter text that matches something from the list, but now that it's false, we can go ahead and search for button three, hit enter, and you'll see everything works just fine. So now we have to write out the file.

[02:10] So write file and the recent file path, and we'll take the recents and remove the query from the current results. You can see that copilot knew what we were doing already. So I'll say recents here, and since this is an array, we'll have to join that. Now if I search for button seven, which probably won't exist,

[02:30] you'll see the search was just fine, and now if we do our recent search, that button seven is in the search. Now let's add an extra action to this to be able to edit the text file in case we want to clear something from our history or just modify the recents for whatever reason. We'll create this value called open file,

[02:48] and this can just be like open carabiner recents file, and now we can see that our choices are the recents and open file. We'll pass our choices instead of the recents, and then if the query is open file, edit that path and exit. Exit will prevent it from running the script any further,

[03:07] and you'll see that once we run this, you'll see open file is an option. We'll go ahead and select that, and it's editing a recents file, so we can tweak that to button two. We'll say that this is hello, and now in our list, you'll see button two, hello, and open carabiner recents file, and to organize this a little bit more,

[03:25] I'm going to group these where these are only names right now, but if I group these to return names, values, and group, we'll call this recents. This can be an object of name open file, value open file, group, and this will be like actions, and then around this array,

[03:44] we're going to say group choices, and by grouping the choices, now once we open this, you'll see we have actions at the top, recents at the bottom, and instead of that order, it makes more sense for recents to be at the top. In the group config, we'll say that the order is recents at the top,

[04:04] actions at the bottom. We run this, we see recents at the top, actions at the bottom. We can type something existing like button, it'll search for button two. We can type open and open our file, or we can type something new, hit enter, and it will query with the new.

[04:22] Now you get into this interesting state of this when you've typed text that doesn't have any results, and you can present information to the user that you can still do something with that, and I'm going to come down here and say choices unshift, and this is going to be info true,

[04:40] which means it will always be there as information, and the name can be hit enter to open GitHub search results, something like that is great. So now when I run this, you'll see that hit enter is at the top, so even if I type something that doesn't exist, but that will always be there as kind of information of what's going to happen.

[05:00] So we can change this to appear only when there are no search results, and we do that by changing this to miss, but if you're to run this now, and I type something, this would pass the value of this miss choice as what's submitted to query, but since we don't want that, we're going to add skip as well,

[05:19] meaning that choice can't be selected, and so it'll skip it and pass in the input. So now we can open this, we can type something like JavaScript, and you'll see that it shows that information, it's unstyled, and we'll get to that, but if I hit enter, then JavaScript is what's passed in since this was skipped. So to quickly style this,

[05:37] I'm going to say name, class name, we'll say text primary, and that will give us the primary text color from this theme down here, or you could define some custom CSS, so we'll say CSS is something like red, we'll make this really obvious color red, we'll make red the class name, and pass in the CSS,

[05:58] run our script, type in something, and you'll see it's now red.

Create a script called `Widget Info` and imagine converting a video to another format. Once the conversion is complete, it outputs a path that you want to open on your system.

```typescript
// converting video
let fullPath = await path();
```

To take action once the video is done, we're going to use a widget.

### Creating a Basic Widget

As a basic example, we can create a widget with the state where the title is the full path.

```typescript
await widget(`<h1>{{title}}</h1>`, {
	state: {
		title: fullPath,
	},
});
```

When you run the `WidgetInfo` script and navigate into the desired directory, you'll see a widget opens. However, you can't do anything with it yet, as it just sits there.

### Customizing the Widget

You can add various customizations to the widget to take action on it.

To make the widget full screen, add `fullscreen: true`. When you run the script now, you'll see It goes completely fullscreen, and you can dismiss it with escape.

If full screen is too much, you can create a centered overlay by setting `center: true` and `transparent: true`.

### Styling the Widget

we can even style it a bit. We'll create a `css` variable and say the `h1` is a font size of two rems and a purple color,

```typescript
let css = `

h1{
  font-size: 2rem;
  color: purple;
}
`;
```

Then drop our `css` variable in our widget:

```typescript
await widget(`<h1>{{title}}</h1>`, {
	css,
	center: true,
	transparent: true,
	state: {
		title: fullPath,
	},
});
```

Now if you run the script it will be nicely styled

When you run the script there's some resizing logic that we want to avoid. What's happening is the widget measures its internal content and then shrinks the window to fit that size. to fix this we can give it a predetermined size,

```typescript
await widget(`<h1>{{title}}</h1>`, {
	css,
	center: true,
	width: 800,
	height: 600,
	transparent: true,
	state: {
		title: fullPath,
	},
});
```

Now, when you run the script, the widget will be displayed with the specified size and won't resize or reposition.

### Adding Clickable Actions to Widgets

If you want to add an action when a widget is clicked, you can define an `onClick` event for the widget.

```typescript
let w = await widget(`<h1>{{title}}</h1>`, {
	css,
	center: true,
	width: 800,
	height: 600,
	transparent: true,
	state: {
		title: fullPath,
	},
});

w.onClick(() => {
	revealInFinder(fullPath);
	exit();
});
```

**Note**: When dealing with transparent windows, you need to add pointer events back to the elements you want to click on. Otherwise, since the window is transparent, it won't receive those pointer events.

```typescript
let css = `

h1{
  font-size: 2rem;
  color: purple;
  pointer-events: all;
}
`;
```

Now, when you click on the widget, it will exit the script and perform an action, such as displaying the contents of your public directory.

This allows you to create interactive information pieces that can perform various actions in your script, instead of just having a prompt waiting for user input.


Info Widgets and Customization

[00:00] Let's create a script called WidgetInfo, and then imagine you're converting a video to some other format. Once that's done, it outputs a path that you want to open on your system. Now, since you don't want a prompt in your face while you're waiting for your video to be converted,

[00:16] but you still want to take action once the video is done, we're going to use a widget. As a basic example, we can say widget, and then this can have the state where the title is the full path. If I run the script WidgetInfo and I'll navigate into dev, hit write. I'll search for a script kit and I want to see my packages directory.

[00:36] You'll see this widget opens, and I can't do anything with it right now, it just sits there. But we can add all sorts of things to this to take action on. For example, let's make this much more in your face. We'll say full screen true. That way when we run this, hit enter, you'll see this goes completely full screen, blocks everything else out, and you can dismiss it with escape.

[00:55] If that's too much, center true and transparent true can give you information in a nice essentially centered overlay in your system. Hit escape to dismiss that, and we can even style it a bit. We'll say CSS and say the H1 is a font size of two rems,

[01:14] and maybe like a color purple, then drop our CSS in here, and we'll run this, select our music directory or whatever, and it's a nice purple. If you want to avoid that resizing logic you see, since a widget measures its internal content and then shrinks the window to fit that size, you can give it a predetermined size,

[01:33] so like width 800, height 600, or whatever. Now, this time when I run it, it won't resize, it will just sit there in the center and avoid the resizing and repositioning. If we want to add an action when we click on it, we can say that this W is our widget, and we'll say widget on click. For now, we'll just say reveal and find

[01:52] your full path and then exit which will close the script completely. One caveat here is that once you're dealing with transparent windows, again, this is a non-transparent window, so we'll see the frame around it, and if I click on this, it exited the script, this opened on my other monitor, so I'll drag that up, you see it showed me where the desktop was.

[02:11] But if you're dealing with a transparent window, you'll want to make sure to add pointer events back to the elements you want to click on. Otherwise, because it's transparent, it won't receive those pointer events, so I'll just go ahead and select my public directory. I can click on this now, it exits and shows me my public directory. So you have tons and tons of options when working with widgets to use them as

[02:31] these interactive information pieces to do something else in your script, rather than just have a prompt sitting there waiting for user input.

Open up Script Kit, and create a new script called "Bookmarks".

First, let's create a string with our bookmarks:

```javascript
let bookmarks = `
https://scriptkit.com - Script Kit
https://egghead.io - egghead.io
https://github.com - GitHub
https://github.com/johnlindquist/kit/discussions - Script Kit Discussions
`;
```

Next, we'll create a `choices` variable by splitting the `bookmarks` string on new lines, and filtering out the empty ones.

Then, we'll map over each bookmark, and return an object with a `name` and `value` property by splitting the bookmark on the dash. The `value` will be the `url` of the bookmark:

```javascript
let choices = bookmarks.split("\n").filter(Boolean).map((bookmark)) => {
  let [url, name] = bookmark.split(" - ")
  return {
    name,
    value: url,
  }
}
```

Now we can use Script Kit's `arg` function to create a selection menu. We'll give the menu a title of "Open Bookmark", and pass in the `choices` array we just created. Then we can call `open` with the `url` that's returned from `arg` to open it in the browser:

```javascript
let url = await arg("Open bookmarks", choices);

open(url);
```

After saving the script, we can open Script Kit and run the Bookmarks script.

We'll see a list of our bookmarks, and we can select one to open it.

![placeholder for screenshot 00:42](https://res.cloudinary.com/johnlindquist/image/upload/v1705605461/tips/01_a9bnas.png)

The script works, but we can make it faster by adding some triggers.

## Adding Triggers

First, we'll add a `Trigger` at the top of the script above the `import`, and set it to `bm`:

```tsx
// Name: Bookmarks
// Trigger: bm

import "@johnlindquist/kit";
```

Next, we'll add a new trigger to each of the boomarks by adding a dash and the trigger to the end of each line.

We'll use `sk`, `eg`, `gh`, and `kd` for each bookmark respectively:

```javascript
let bookmarks = `
https://scriptkit.com - Script Kit - sk
https://egghead.io - egghead.io - eg
https://github.com - GitHub - gh
https://github.com/johnlindquist/kit/discussions - Script Kit Discussions - kd
`;
```

Now we need to update the `map` function in `choices` to parse the triggers in addition to the bookmark `url` and `name`. We'll also add a `tag` property to the object we're returning, which will be the trigger:

```javascript
let choices = bookmarks.split("\n").filter(Boolean).map((bookmark)) => {
  let [url, name, trigger] = bookmark.split(" - ")
  return {
    name,
    value: url,
    trigger,
    tag: trigger,
  }
}
```

After saving the script and opening Script Kit again, we can type the `bm` trigger to quickly open the bookmarks menu.

Once the menu is open, Script Kit will display each option's trigger next to the name of the bookmark:

![placeholder for screenshot 01:18](https://res.cloudinary.com/johnlindquist/image/upload/v1705605462/tips/02_epoziy.png)

Typing in a trigger will open the bookmark in the browser faster than typing the full name.

After a while, you'll build the muscle memory of typing `bm gh` to quickly open GitHub.

## Adding a Shortcut

Adding a shortcut to the top of the script will let you open it without opening the main menu.

```javascript
// Name: Bookmarks
// Trigger: bm
// Shortcut: opt b
```

With the shortcut added, hitting `Option + B` and then a shortcut like `eg` will open the bookmark.

## Focus the Tab Instead of Opening a New One

On Mac, Script Kit has a `focusTab` function that will focus an already open tab instead of opening a new one:

```javascript
focusTab(url);
```

One caveat is that you will need to have the full URL in the `bookmarks` string in order to work properly. Otherwise, a new tab will open each time you run the script:

```javascript
let bookmarks = `

https://www.scriptkit.com - Script Kit - sk
...
```

## Load Bookmark from a File

You can manage your bookmarks more efficiently by moving them into a separate file.

For this example, we'll create a `bookmarks.txt` file in the `.kenv` folder, which is where Script Kit stores all of its files.

To quickly create the file, open Script Kit and hit `/` to browse to your home directory. Type in `.kenv/`, then continue to type `bookmarks.txt` and select the "Create File" option from the menu:

![placeholder for screenshot 2:30](https://res.cloudinary.com/johnlindquist/image/upload/v1705605462/tips/03_nlau2w.png)

Script Kit will then give you the option to open the file in your editor.

If you want to use a custom editor like Cursor Nightly, add a `KIT_OPEN_IN` environment variable in your `.env` file:

```tsx
// inside of .env
KIT_OPEN_IN=Cursor Nightly
```

Inside of `bookmarks.txt`, paste in the `bookmarks` from the script:

```tsx
// inside of bookmarks.txt

https://www.scriptkit.com - Script Kit - sk
...
```

Now we need to update the script to read the file.

Replace the `bookmarks` string with the `readFile` function, where we'll point to `bookmarks.txt` using the `kenvPath` helper function. The file should be read as `utf8`:

```javascript
let bookmarks = await readFile(kenvPath(bookmarks.txt), "utf8");
```

Save the script, and everything should function as before.

With this Bookmarks script, you can easily manage and quickly access your favorite bookmarks.

As an exercise, try writing a script to add and remove items from the bookmarks list. This will help you improve your bookmark management even further. This functionality could be added either a new feature in the existing Bookmarks script, or in a new Manage Bookmarks script.


Discover how to utilize triggers and shortcuts to quickly access and manage a list of your favorite websites with a custom Script Kit script.

Instant Choices with Triggers

[00:00] let's create a bookmarks script where we can manage our favorite bookmarks. So right now, this will just be a string, let's say script kit, give it a name of script kit, and then add a few more. Then we'll create our choices by taking the bookmarks, and we'll split on that string, filter out any empty ones,

[00:19] and then it looks like Copilot knows what I want here to split on dash, which I set up here, and this will be the name, and then the URL is the first part. So when I create an arg here, I can say open bookmark, pass in my choices, and then this will be the URL we want to open,

[00:38] and then we can just say open URL. So now if I run bookmarks, you'll see I can select egghead, and this opened on my other monitor, and I can select script kit, and you'll see that'll open up, and we have a quick way of launching those bookmarks. To make this even faster, we can add triggers, I'll say trigger VM, and then add triggers for each of these.

[00:58] That'll be script kit, this can be egghead, this could be GitHub, and this will be my kit discussions. So I'll parse each of these out of here, say this is the trigger, pass this trigger along, and I also want to display the trigger, so I'm going to display that as the tag. So I want to open this with the main shortcut,

[01:15] I type VM, that script automatically runs, and you can see all the triggers listed over here, so that as soon as I type gh, it automatically opens GitHub. So I can get into muscle memory of VM gh, and that opens GitHub, VM sk, that'll open script kit, VM kd, and you're instantly there.

[01:34] You can also add a shortcut to this, if it's something that you want to use without opening the main menu, so anywhere I can do option b eg, option b kd, and easily jump between those. Now on Mac, there is a focus tab, which you can use, which will, instead of opening a new tab, focus on one that's already open,

[01:54] because it can use Apple script behind the scenes. So if I do option b sk, you'll see this time it opened a new one, and that's because I didn't actually have the full URL here, focus tab is going to check for that www. So now this time I can, you'll see script gets open over there, option b sk,

[02:13] and that will focus on that tab, rather than opening a new one. Just make sure that you have any necessary wwws, or whatever this will match is required inside of focus tab. We can also take this content here, move it into a file. I'll go into my can, and create a bookmarks.txt.

[02:32] I'll open that in my editor. And one quick tip here, if you want that open in command that you saw in here, so you see open in cursor nightly is like a custom one. If you add to your .env a kit, underscore open, underscore in, that will add that option to any of your path menus. So I'm going to take this content

[02:51] and we'll paste it in here. And then instead of just having a string right here, we can await read file. And from our Ken path, we'll grab our bookmarks.txt. Make sure this is UTF-8. Then we're back in business with option b sk, while having a file to keep track of all our bookmarks.

[03:10] A good exercise for you is to write a script to add and remove to this list, either from a new script or adding it as a feature to this one. And it's something I can show how to do in the future.