Top Related Projects
:black_heart: Create and share beautiful images of your source code
📸 Polaroid for your code
📄 CLI that generates beautiful README.md files
:zap: Dynamically generated stats for your github readmes
:octocat: Improve your README.md profile with these amazing badges.
A curated list of awesome READMEs
Quick Overview
Ray.so is a web application and API that allows users to create beautiful images of their source code. It's designed to make sharing code snippets on social media or in presentations more visually appealing and easier to read.
Pros
- Easy to use interface for creating code images
- Customizable themes and styles for code presentation
- Supports multiple programming languages
- Offers an API for integration into other applications
Cons
- Limited to creating static images (no animation support)
- Requires internet connection to use the web app
- May not support all niche programming languages
- Free tier may have limitations on usage or features
Code Examples
This project is not a code library, so code examples are not applicable.
Getting Started
As this is not a code library, there are no specific code-based getting started instructions. However, to use Ray.so:
- Visit https://ray.so in your web browser
- Paste your code into the text area
- Customize the appearance using the options provided
- Click the "Copy Image" button to save or share your code image
Competitor Comparisons
:black_heart: Create and share beautiful images of your source code
Pros of Carbon
- More customization options for code appearance
- Supports a wider range of programming languages
- Has a web-based interface for easy access
Cons of Carbon
- Larger codebase, potentially more complex to maintain
- May have slower performance due to more features
Code Comparison
Carbon:
import { createTheme } from '@carbon/themes'
import { themes } from './themes'
const theme = createTheme(themes.g90)
Ray-so:
import { Theme } from '@raycast/api'
export const theme: Theme = {
appearance: 'dark',
color: '#FF6363'
}
Both projects aim to create beautiful code snippets, but they differ in their approach and feature set. Carbon offers more extensive customization and language support, making it suitable for a wider range of users. However, this comes at the cost of a larger codebase and potentially slower performance.
Ray-so, on the other hand, focuses on simplicity and integration with the Raycast ecosystem. It provides a streamlined experience for creating code snippets quickly, but with fewer customization options compared to Carbon.
The code comparison shows that Carbon uses a more complex theming system, while Ray-so has a simpler theme configuration. This reflects the overall design philosophy of each project, with Carbon offering more flexibility and Ray-so prioritizing ease of use.
📸 Polaroid for your code
Pros of Polacode
- Integrated directly into VS Code as an extension
- Supports customizable background colors and padding
- Allows for easy sharing of code snippets within the editor
Cons of Polacode
- Limited to VS Code environment
- Fewer styling options compared to Ray.so
- Less focus on social media sharing features
Code Comparison
Ray.so:
import { getHighlighter, renderToHtml } from 'shiki'
const highlighter = await getHighlighter({ theme: 'nord' })
const html = highlighter.codeToHtml(code, { lang: 'js' })
Polacode:
const html = await highlight(code, language)
const svg = await html2svg(html)
const pngData = await svg2png(svg)
Both projects use syntax highlighting libraries, but Ray.so leverages Shiki for more advanced rendering options, while Polacode focuses on converting highlighted code to images within VS Code.
Ray.so offers a web-based solution with more sharing options and customization features, making it suitable for a wider audience. Polacode, on the other hand, provides a seamless experience for VS Code users who want to quickly create and share code snippets without leaving their development environment.
📄 CLI that generates beautiful README.md files
Pros of readme-md-generator
- Specifically designed for generating README files, offering a more focused and tailored solution
- Interactive CLI tool that guides users through the README creation process
- Supports multiple languages and can generate badges automatically
Cons of readme-md-generator
- Limited to README file generation, lacking the versatility of ray-so for creating code snippets or images
- May require more manual input and customization for complex README structures
- Does not offer visual customization options like background colors or themes
Code Comparison
readme-md-generator:
const generateReadme = require('readme-md-generator');
generateReadme({
projectName: 'My Project',
projectDescription: 'A cool project',
// ... other options
});
ray-so:
import { createImage } from '@raycast/api';
export default async function Command() {
const image = await createImage({
code: 'console.log("Hello, World!");',
language: 'javascript',
theme: 'dark',
});
// ... handle the generated image
}
While readme-md-generator focuses on generating comprehensive README files through an interactive process, ray-so is designed for creating visually appealing code snippets and images. The code examples demonstrate their different purposes and usage patterns.
:zap: Dynamically generated stats for your github readmes
Pros of github-readme-stats
- Provides dynamic GitHub statistics for README files
- Supports customization of colors, themes, and layouts
- Offers a wider range of statistics and metrics
Cons of github-readme-stats
- Requires API calls to generate statistics, which may impact performance
- Limited to GitHub-specific data and metrics
- More complex setup process compared to ray-so
Code Comparison
ray-so:
import { getPreferredLanguage } from '@raycast/api';
import { getTheme } from './utils/theme';
export default async function Command() {
const language = await getPreferredLanguage();
const theme = getTheme(language);
github-readme-stats:
const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const {
name,
totalStars,
totalCommits,
totalIssues,
totalPRs,
contributedTo,
} = stats;
Both repositories serve different purposes, with ray-so focusing on creating beautiful code snippets and github-readme-stats generating dynamic GitHub statistics. The code comparison shows that ray-so deals with language preferences and themes, while github-readme-stats processes and renders various GitHub metrics.
:octocat: Improve your README.md profile with these amazing badges.
Pros of Badges4-README.md-Profile
- Extensive collection of pre-made badges for various technologies and platforms
- Easy to use with simple copy-paste functionality
- Regularly updated with new badges and improvements
Cons of Badges4-README.md-Profile
- Limited customization options for badge appearance
- Focused solely on badges, lacking other README enhancement features
- May require manual updates to keep badges current
Code Comparison
Ray-so:
import { getSelectedText } from "@raycast/api";
import { createImage } from "./utils/createImage";
export default async function Command() {
const selectedText = await getSelectedText();
await createImage(selectedText);
}
Badges4-README.md-Profile:
[![Windows](https://img.shields.io/badge/Windows-0078D6?style=for-the-badge&logo=windows&logoColor=white)](https://www.microsoft.com/windows/)
[![Linux](https://img.shields.io/badge/Linux-FCC624?style=for-the-badge&logo=linux&logoColor=black)](https://www.linux.org/)
[![macOS](https://img.shields.io/badge/macOS-000000?style=for-the-badge&logo=apple&logoColor=white)](https://www.apple.com/macos/)
The code comparison highlights the different focus of each project. Ray-so is a JavaScript-based tool for creating images from selected text, while Badges4-README.md-Profile provides ready-to-use markdown snippets for adding badges to README files.
A curated list of awesome READMEs
Pros of awesome-readme
- Comprehensive collection of README examples and resources
- Community-driven with contributions from many developers
- Covers a wide range of README styles and best practices
Cons of awesome-readme
- Not an interactive tool, requires manual implementation
- May be overwhelming for beginners due to the large number of examples
- Lacks specific code generation features
Code Comparison
ray-so:
export const getTheme = (theme: Theme) => {
switch (theme) {
case "breeze":
return breezeTheme;
case "candy":
return candyTheme;
default:
return defaultTheme;
}
};
awesome-readme:
# Project Name
> A brief description of your project.
## Installation
```bash
npm install your-project-name
Usage
const yourProject = require('your-project-name');
yourProject.doSomething();
ray-so is a tool for creating beautiful code snippets, while awesome-readme is a curated list of exemplary README files. ray-so offers an interactive experience for generating visually appealing code images, whereas awesome-readme provides a wealth of information and inspiration for creating effective project documentation. ray-so is more focused on presentation, while awesome-readme emphasizes content and structure. Both repositories serve different purposes but can be complementary in improving overall project presentation and documentation.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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:
- Code Images: Create beautiful images of your code.
- Icon Maker: Create beautiful icons for Raycast Extensions.
- Prompt Explorer: Explore AI Prompts for Raycast.
- Preset Explorer: Explore AI Presets for Raycast.
- Quicklink Explorer: Browse and import Raycast Quicklinks.
- Snippet Explorer: Browse and import Raycast Snippets.
- Theme Explorer: Browse and import Raycast Themes.
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. 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
- 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. Generate the theme OG image
- Make sure your local server running (
npm run dev
) - Open a new terminal session and run
npm run generate-themes-og-images -- --slug=username/themename
(replaceusername/themename
with your theme's folder and file name)
4. Commit and push your changes
- Create a Pull Request ð
Top Related Projects
:black_heart: Create and share beautiful images of your source code
📸 Polaroid for your code
📄 CLI that generates beautiful README.md files
:zap: Dynamically generated stats for your github readmes
:octocat: Improve your README.md profile with these amazing badges.
A curated list of awesome READMEs
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot