Code Screenshot

A fully functional Ray.so clone (a powerful tool for sharing code snippets) with additional features. Share beautiful screenshots of your code on your social media platforms.

Project live at: https://code-ss.pages.dev/

Complete tutorial/walkthrough available on my Youtube channel:

Features

• 10+ elegant themes (light + dark theme included).
• 12+ 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.

Technologies used

• React - Front-End JavaScript library.
• Tailwind CSS - A utility-first CSS framework.
• ShadCN UI - Re-usable components built using Radix UI and Tailwind CSS.
• 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.
• Vite - Frontend Tooling

Build steps

1. Clone this repo

git clone https://github.com/nimone/code-screenshot && cd code-screenshot

2. Install project dependecies

npm install

3. Build the project and start a local server

npm run build && npm run serve