A fully functional and powerful tool for sharing code snippets with Professional features. Share beautiful screenshots of your code on your social media platforms.

Try it at: https://raycode.netlify.app/

• 10+ elegant themes (light + dark theme included).
• 15+ font styles (popular monospace fonts).
• Support for all popuplar languages with auto-detection and syntax highlighting.
• Multiple export options: save as SVG/PNG, copy to clipboard and copy link.
• Other customization options like: font size, padding, background etc.

• React - Front-End JavaScript library.
• Tailwind CSS - A utility-first CSS framework.
• ShadCN UI - Re-usable components built using Radix UI and Tailwind CSS.
• Vite - Frontend Tooling
• Zustand - Bear necessities for state management in React.
• Highlight.js - Syntax highlighter.
• React Simple Code Editor - Browser based code editor.
• HTML to Image - Generates an image from a DOM node using HTML5 canvas and SVG.
• React Hot Toast - Toast notifications for React.
• React Hotkeys Hook - A React hook for using keyboard shortcuts in components in a declarative way.
• Resizable - A resizable component for React.

i. Have Node.js installed on your machine.

ii. Update npm to the latest version. Run:

npm install -g npm@latest

iii. Install Git and run the installer.

Now follow the steps below !!

1. Clone this repo

git clone https://github.com/MohamedAfraz/RayCode.git && cd RayCode

2. Install project dependecies

npm install

3. Build the project and start a local server

npm run build && npm run dev

4. Now open this link to open the project.

Hope you got it and all is working!! If not, feel free to start an Issue⚡