[opensourcedex]

Ray.so is a free, open source design & visualization project written in TypeScript and released under MIT. It has 2,360 GitHub stars, 348 forks and 28 open issues, and was last pushed 3 days ago. On this registry it ranks #6 of 7 tracked projects in Design & Visualization, with 5 head-to-head comparisons available. It gained 7 stars over the last 6 tracked days.

What is Ray.so?

What it is

Ray.so is the open-source codebase behind ray.so, a collection of small web tools built by Raycast. The repository holds the source for a Next.js application that ships seven separate utilities under one roof: Code Images for turning source code into shareable pictures, Icon Maker for producing icons for Raycast Extensions, and five explorer tools that let visitors browse and import AI Prompts, AI Presets, Quicklinks, Snippets, and Themes. The project is written in TypeScript and released under the MIT license, and it lives in the JavaScript and React ecosystem, built on top of the Next.js framework.

The concrete problem it solves is distribution and creation. Developers who want a polished image of a snippet usually reach for a screenshot or a design tool, and Raycast users who want to find or share a prompt, preset, snippet, or theme have no single browsable place to do it. Ray.so packages those tasks into a hosted site, and this repository exposes the same tools as readable, forkable source. Because the content for the explorers lives in plain data files inside the repo, the catalogue is not locked behind a proprietary backend.

Key capabilities

  • Generates images of code through the Code Images tool.
  • Produces icons for Raycast Extensions through the Icon Maker tool.
  • Provides a Prompt Explorer for browsing AI Prompts built for Raycast.
  • Provides a Preset Explorer for browsing AI Presets.
  • Provides a Quicklink Explorer that lets users browse and import Quicklinks.
  • Provides a Snippet Explorer and a Theme Explorer for browsing and importing Snippets and Themes.
  • Accepts community contributions in the form of new presets, prompts, snippets, themes, and bug fixes.

Who uses it and how

  • Developers who want a presentable image of a code snippet open the hosted Code Images tool rather than assembling one by hand.
  • Extension authors use the Icon Maker to create icons that match Raycast Extension conventions.
  • Raycast users browse the Prompt, Preset, Quicklink, Snippet, and Theme explorers to find items and import them into their own setup.
  • Content contributors add entries to prompts.ts, presets.ts, snippets.ts, or quicklinks.ts, filling every field with unique values and an author name, then open a pull request.
  • Theme authors copy a theme as JSON from Raycast Theme Studio, add a folder named after their Raycast username, place a file named after the theme inside it, and open a pull request.

Getting started

Clone the repository, then run npm install followed by npm run dev to start the Next.js development server. The published tools are also available directly at https://ray.so.

When to use it — and when not to

This is a good fit for anyone who wants the ray.so tools running locally, or who

project readme (upstream, from github) — read inline

ray.so

Built by Raycast

Create code snippets, browse AI prompts, create extension icons and more.

About

This repository contains the source code for ray.so, a collection of tools built by Raycast. It includes:

Setup

This is a Next.js project. If you're unfamiliar with it, check out the Next.js Documentation.

To get started, download the repo, install dependencies and run the development server:

npm install
npm run dev

Contributing

We welcome contributions primarily in the form of new presets, prompts, snippets, themes, and bug fixes.

[!NOTE] If you're interested in creating a new code theme we recommend forking the project to run your own version. However, certain partner themes may be considered. Please reach out by creating an issue or contacting us first.

If you're interested in contributing, follow the steps below:

Presets, Prompts, Quicklinks & Snippets

  • Open prompts.ts or presets.ts or snippets.ts or quicklinks.ts
  • Add your data to the relevant category
    • Ensure it includes all fields, and that they're unique within their category
  • Add your name and (optional) website url to the author field
  • Create a pull request

Themes

1. Copy the Theme JSON from Raycast
  • Open Theme Studio in Raycast
  • Right click on your Theme and select "Copy as JSON"
2. Add the theme to repo
  • In themes, create a folder with your Raycast username, ie: peduarte
  • In that folder, create a file with the theme name, ie: red.json
  • In that file, paste the theme JSON you copied from Raycast's Theme Studio
3. Commit and push your changes
  • Create a Pull Request 🚀

Frequently asked questions

Is Ray.so free to use?

Ray.so is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does Ray.so do?

Create beautiful images of your code

What is Ray.so written in?

Ray.so is primarily written in TypeScript. Its source is publicly available at https://github.com/raycast/ray-so, and it has 2,360 GitHub stars.