Raycast Extension Development Tutorial: Build and Publish with TypeScript and React

Building Raycast Extensions

Raycast extension development tutorial. Build a TypeScript and React extension from scratch — API integration, custom list UI, actions, and publishing to the Raycast store.

Raycast replaces Spotlight with a command bar that runs scripts, manages clipboard, controls windows, and even does AI — all from one hotkey.

By the end of this 16 min guide, you'll have a working Raycast setup and practical Raycast workflows you can use immediately.

• Understand what Raycast does and why it matters for Productivity
• Install and configure Raycast for your environment
• Build Raycast-specific workflows with real examples
• Troubleshoot common Raycast issues with concrete fixes

Node.js & React Environment Setup

Install Raycast:

Download from raycast.com

• Productivity environment with appropriate permissions
• No prior Raycast experience needed
• A terminal with true color support
• Git for version-controlling your config

Your First Command Component

Configure Raycast extensions in Settings. Script commands live in a directory you specify — any executable shell script with the right header becomes a searchable command.

Here's a foundational configuration to start with:

#!/bin/bash
# @raycast.title My Command
# @raycast.mode compact
echo "Hello from Raycast!"

• Begin with this config and make small, incremental changes
• Document each setting with inline comments
• Test changes one at a time to isolate issues
• Keep your config in a Git repo for easy rollback and sharing

Forms & UI Components

With Raycast configured, these Raycast-specific workflows will save you time every day:

• Hyper+Space open Raycast
• Script commands for quick CLI tasks
• Clipboard history with search and pinning
• Window snapping and layout management
• AI commands for instant text transformations

API Calls & Deeplinks

Once you're comfortable with Raycast basics, these advanced techniques will transform your Raycast workflow:

• Build full extensions with TypeScript and React
• Use Quicklinks for URL-based workflows
• Configure AI commands with custom prompts
• Set up deeplinks between commands

Build, Lint & Type Errors

Here are the most common Raycast issues and how to fix them:

• Script not showing? Check it's executable: chmod +x
• PATH issues? Add export PATH="/opt/homebrew/bin:$PATH"
• No clipboard history? Enable in Settings → Clipboard
• AI not working? Check API key in Settings → AI

Publishing to the Store

Congratulations — you now have a solid Raycast foundation. Here's where to go next:

• Explore the official Raycast documentation for features not covered here
• Join the Raycast community (GitHub Discussions, Discord, or Reddit)
• Check the related tutorials below for deeper Raycast dives
• Build your own Raycast configuration and share it with the community