Comment on page
Understand the file structure of an extension.
An extension consists of at least an entry point file (e.g.
src/index.ts) and a
The typical directory structure of a newly-created extension looks like this:
│ └── icon.png
│ └── index.tsx
The directory contains all source files, assets, and a few support files. Let's go over each of them:
Put all your source files into the
srcfolder. We recommend using TypeScript as a programming language. Our API is fully typed, which helps you catch errors at compile time rather than runtime.
jsxare supported as file extensions. As a rule of thumb, use
jsxfor commands with a UI.
An extension consists of an entry point file (e.g.
src/index.ts) per command and a
package.jsonmanifest file holding metadata about the extension and its commands. The format of the manifest file is very similar to that of npm packages. In addition to some of the standard properties, a
commandsproperty describes which commands an extension exposes to Raycast root search and how they are presented.
Each command has a property
namethat maps to its main entry point file in the
srcfolder. For example, a command with the name
package.jsonfile, maps to the file
assetsfolder can contain icons that will be packaged into the extension archive. All bundled assets can be referenced at runtime. Additionally, icons can be used in the
package.jsonas extension or command icons.
- node_modules contains all installed dependencies. You shouldn't make any manual changes to this folder.
- package-lock.json is a file generated by npm to install your dependencies. You shouldn't make any manual changes to this file.
- tsconfig.json configures your project to use TypeScript. Most likely, you don't have to edit this file.