Raycast is a Spotlight alternative on MacOS that provides an extensive and open developer API based on ReactJS. This powerful tool allows developers to build custom productivity tools right into their launcher, which has helped improve my efficiency. In this post, I will be sharing the reasons why I use Raycast and the wonderful extensions available for it. I share some commentary on how simple it is for web developers to build powerful extensions for it.

Skip ahead to the API commentary if you are already a user and wants to go straight to my commentary about their extensions API.

Why not Spotlight?

What are some of the problems I have with Spotlight?

• There is an obvious delay before my results show up
• The results are not very deterministic
• We can't control type of results, its determined by an algorithm
• IMPORTANT: we cannot extend the functionality beyond what Apple defines to be worthy, like adding new widgets

All of these shortcomings are not a problem with Raycast. Results show up quickly, the results are consistent and reasonable for my queries. About the type of results, Raycast solves it with an impressive extension system with simple and reasonable APIs. The entire extension system is based around React, which means that any up-and-coming web developer will have a good chance of knowing how to program it.

The Extension System

The premise of Raycast is that it is a launcher that launches many mini-programs, each performing a small and specific functionality. This allows you to easily access a variety of tools and features right from your launcher, making it a powerful productivity tool. And the best part is that there are already many great extensions built-in, to save you time, so you don't have to have multiple apps open or switch between them, everything is right there at your finger tips.

• Clipboard history? There's no need to download another app
• Long and persistent snippets? There's a built-in tool for that!
• Running Apple Shortcuts? Straight from the launcher
• Peek at your schedule? No problem , 2 taps away
• Inserting emojis? 🏃‍♂️💨

And many more on the store!

• Launching your recent VSCode projects? There's an extension for that
• Want to have some text persistently on your menu bar? Insert it away

Let me give you an example. Let's say you want to insert an effect into your React component. Instead of typing out the entire code segment like it's 2004, you can use Raycast to do it with a few clicks, making the process simple and efficient.

I used ss as an alias to the Snippet extension, and then selected the component I wanted, all entirely based around keyboard movements.

Want to learn more? Try it out for free or checkout the usecases of other users!

And now, dear developers. Here's the fun part. Their extension system's API is based on ... ... ... REACTJS

Yes, you heard that right. Not Lua or Python or whatever, but ReactJS (although they're great languages, don't get me wrong). The tool that you are very likely using according to The State of JS. Also if you read my blog, you are very likely a ReactJS user or have dabbled in it.

Why is this a good thing?

Using React as the extension system is great. The SDK provides us a set of components that act like a design system. We don't have to think about styling or responsive issues, we just have to write the logic and use the provided components. React Core Components, anyone? This API design also forces developers to use the constrained API, providing a consistent and focused UX for the user. A VSCode project launcher will have similar keyboard shortcuts, information architecture, and "feel" when it's right below a Spotify music controller. This achieves a cohesive design language for the entire launcher across different extensions built for wildly different purposes by very different individuals.

Also According to The State of JS, React is quite popular, so it's definitely easier for developers to write plugins if they are already familiar with the patterns. But let's be real, if you're not familiar with React, it's never too late to learn!

And that's exactly what I did. I wrote an imitation of the built-in Snippets plugin.

GitHub - limxingzhi/raycast-snippet-demo: Just a demo for me to learn how the Raycast API works

Just a demo for me to learn how the Raycast API works - GitHub - limxingzhi/raycast-snippet-demo: Just a demo for me to learn how the Raycast API works

GitHublimxingzhi

So what are my thoughts about the developer experience of the extension SDK?

Writing a Raycast Extension ; The Good Parts

The best part for me, a primary front-end developer, is that the entire SDK is in React. It is a great plus for me, but if you are a hardcore linux kernel developer who burns anything that lives on a browser, sorry tough luck here (or you can always learn something new, who knows, you might like it).

The React experience for me is extremely seamless. The compiling works straight away without a single line of change needed, the package.json has a reasonable and easy to understand schema. This means that the process of setting up and configuring my extension is straightforward and hassle-free.

Writing my extensions show up is also incredibly easy. I just do npm run dev and my new commands shows up as the first items above my pinned favorites. I terminate the running script and the extension goes away. Very effortless, very nice. With this ease of use, I can focus on developing the extension's functionality rather than spending time on complicated setup and configuration. Overall, the process of developing a Raycast extension is simple, efficient, and enjoyable.

Erm, yea, I don't really have much more to comment. The minimal, clean, and sensible design of the API makes it easy to work with, and the fact that you don't have to worry about writing CSS is a huge plus. The provided utilities, like LocalStorage for persistent data or Clipboard for capturing your user's clipboard are sensible with the added bonus of being asychonous (like, they are promises and you can do async / await things to them).

Writing a Raycast Extension ; Please improve 🥹

As a developer, I am never satisfied with APIs, no matter how great. And the Raycast API is great, but I want moarrrrr.

Better documentation
The written documentation is great and very clear, but it has some problems with discovery. In my opinion, having a page that lays out all of the available UI components would make it easy to visually select the UI I want to use (e.g. Ant Design). The same thing goes for the utilities APIs like Storage or Clipboard access. Having a centralized location for all the available components and utilities would make it easier for developers to discover and utilize them in their extensions.

Actually that's about all my complains.

Conclusion

Great product, incredible thoughtful extension API, go use it today.