Update: I wrote an introduction post for Blast Launcher.
Blast is an open-source educational and experimental project that aims to utilize the extension ecosystem of Raycast Launcher
Raycast is a SaaS software, while providing paid subscription services for teams,
for personal is copmletely free. You can also extend your workflow by building
extensions on your own. The extensions are implemented using custom React
components(@raycast/api), and each command within an extension can be thought
of as a separate React application. I think that's the magic of Raycast, where
everyone can easily build and integrate their own tools without much effors on
top of the huge Node.js and React.js ecosystem.
While Raycast is great, it is a closed-source software and the extension ecosystem can only be used in Raycast. So here's where this project comes in.
Blast provides an open-source React renderer to render these Raycast extensions.
Blast uses the following components:
- Node.js to write the backend and implement a custom React renderer with
react-reconciler - Electron & React.js to write the front end and render the React element tree as HTML
- Use
rpc-websocketsto communicate between the backend and front end
In the architecture of Blast, the backend uses Node.js and the react-reconciler package to implement a custom React renderer. The element tree created during this process is then emitted as a JSON object tree to the front end, which is an Electron app built with React.js and rendered as HTML. While the front end is built with React, it is also framework agnostic as it can accept the plain JSON element tree from the backend.
For higher performance, a custom renderer such as React-native may send operations to the host app to build a shadow element tree alongside the renderer. However, Blast was designed for educational and experimental purposes and therefore emits the entire element tree as JSON during the resetAfterCommit phase, which is called every time the component is updated. This is less performant but sufficient for the needs of this project as the component tree is not complex and high performance is not required.
You can learn more about the blast architecture in the following documents:
@blastlauncher/renderer: The custom React renderer@blastlauncher/runtime: The backend and runtime application, which is also a React.js app@blastlauncher/api: Polyfill for the Raycast API@blastlauncher/cli: A CLI tool that manage to build/publish raycast extension to blast compatible module. Really much alike the ray-cli tool.
- Download the latest version of Blast from the release page
- Unzip the downloaded file and move the Blast app to the Applications folder
- Note: On macOS, you may need to allow the app to be opened in "System Preferences"
- or right click on the Blast app and select "Open" to open the app
- If it doesn't show up in the context menu, do it again.
After opening the Blast app, it will ask to install Node.js runtime. Just click "Install" and wait for the installation to complete. It downloads node.js and extract it to ~/.blast/node.
The shortcut key to open the Blast window is ⌘;, Command + ;. It will be configurable in the future.
# Make sure you have pnpm v7 installed, then install dependencies with pnpm
pnpm install
# Start build
pnpm run watch
# Start front end in dev mode
pnpm run start:clienttail -f ~/.blast/logs/runtime.log
tail -f ~/.blast/logs/runtime.err.logJust run:
pnpm react-devtoolsThen start the application(The devtool must be run before the application started). It should automatically connect to the React DevTools.
- SunbeamLauncher: A frontend agnostic Launcher app, written in Go, and you can write extensions in any language.
- ⌘K, cmdk: A React.js Component to build Launcher app UI. The front end of Blast is based on this project. The author also provided several launcher themes, such as Linear, Raycast and Vercel,but they are only for demo purposes so you need to modify them to use.
- Sittly Launcher: Another project inspired by raycast! I discovered it while regularly searching for projects with the "raycast" keyword on GitHub. 😂 Oops, sorry for the early spoiler.
Our Chief Marketing Officer(nickname ChatGPT) gave me this idea.
I was asking him/her/it to come up with words similar to "raycast".
Blast（爆破）應該滿星爆的吧！但星爆氣流斬原文是 starburst stream。算了。
- Resources to learn how to build a custom React Renderer
- Jam Risser – Building a Custom React Renderer
- and the example code: https://github.com/clayrisser/create-react-renderer
- ReactDOM Reconciler Host config
- Jam Risser – Building a Custom React Renderer
- About Blast
- Blast Launcher introduction post(Written in Chinese): Blast：一個能執行 Raycast 擴充功能的 React.js 渲染器
MIT