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@latestiii. Install Git and run the installer.
Now follow the steps below !!
- Clone this repo
git clone https://github.com/MohamedAfraz/RayCode.git && cd RayCode- Install project dependecies
npm install- Build the project and start a local server
npm run build && npm run dev- Now open this link to open the project.
Hope you got it and all is working!! If not, feel free to start an Issue⚡