In this article, you are going to learn how to build a Raycast extension. We are going to split this tutorial into two. In the first tutorial you will learn:
What Raycast is?
Raycast APIs.
In the second tutorial, you will learn:
How to build a Raycast extension.
How to publish a Raycast extension.
How to update a Raycast extension.
Raycast
Raycast is a productivity tool built for developers by developers. It helps developers save time by adding all the tools that they need in one place to avoid continuous context switching between browser tabs.
Raycast's UI and UX are incredible, everything you need is in one interface and each tool one keyboard command away. One of the reasons that I as an engineer enjoy using Raycast apart from it's great UI and UX, is there openness and inclusion of the community. Instead of the Raycast team building the entire ecosystem of extensions on their own, they have a documentation guide on how developers can build their own Raycast extension and publish it to the Raycast store. The Raycast store has over 2.13K extensions that have been built by both the Raycast team and the community.
In today's world AI is part of our lives and it makes our everyday tasks much simpler. Raycast has not been left behind in matters related to AI. As a matter of fact, AI integrates seamlessly into Raycast as if they were meant for one another. You can be able to schedule meetings, cancel meetings, add events and all the great stuff that would require 5 minutes of your life in 30 seconds by simply typing a command and voila! Everything has been set.
Raycast's pricing model is insanely cheap, they have a free and two paid tiers. The free tier includes: core features, access to thousands of extensions, custom extensions, developer tool, Raycast AI ( Free 50 messages by trying any Pro model ) etc. The other two paid tiers are $8/month and $16/month respectively. You can check out their pricing model and what they offer here: Raycast pricing.
Currently, Raycast is only available on MacOs but they do have a waitlist if you are on windows. You can join the Windows waitlist here: Raycast Windows waitlist.
Raycast APIs
Raycast has powerful APIs that enable developers to tap into it's core engine. These APIs include but not limited to UI components, CLI etc. Let's look at each of them.
UI components
Raycast provides developers with building blocks to build their extensions. These UI components have a similar look to React's Radix UI. The Raycast API works with React, take a look at this code: import { useState } from "react"; import { List } from "@raycast/api";
In the code above, we import useState from React to handle our state and List component from the @raycast/api for building our UI. The @raycast/api provides us with UIs and utilities for building our extension, these UIs and utilities include but not limited to:
Detail component.
Form component.
Grid component.
Action component.
Toast component.
showToast function.
In the next tutorial, we’ll explore and work with each one in detail.
CLI
The Raycast CLI allows you to build, develop, and lint your extension. The CLI is part of the @raycast/api package and is automatically installed in the extension directory during setup. The CLI has various commands for specific use cases:
Help command: To get a list of the available CLI commands.
Build command: Creates an optimized production build of our
extension for distribution.
Development command: Starts our extension in development mode.
Lint command: Runs ESLint for all files in the src directory.
Migrate command: Migrates our extension to the latest version of the
@raycast/api.
Publish command: Verifies, builds, and publishes an extension to the
Raycast store.
In the next tutorial, we are going to learn how to build and publish a Raycast extension.
Till then, happy hacking ✨
