https://github.com/mdfarhankc/sharemycode
Create beautiful images of your code and share them. A code-to-image tool built with Next.js, React, and Tailwind CSS.
https://github.com/mdfarhankc/sharemycode
code-screenshot code-to-image developer-tools nextjs open-source radix-ui react shadcn-ui sharing typesc zustand
Last synced: 11 days ago
JSON representation
Create beautiful images of your code and share them. A code-to-image tool built with Next.js, React, and Tailwind CSS.
- Host: GitHub
- URL: https://github.com/mdfarhankc/sharemycode
- Owner: mdfarhankc
- Created: 2026-03-08T17:44:45.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-08T17:48:59.000Z (3 months ago)
- Last Synced: 2026-03-08T21:35:05.256Z (3 months ago)
- Topics: code-screenshot, code-to-image, developer-tools, nextjs, open-source, radix-ui, react, shadcn-ui, sharing, typesc, zustand
- Language: TypeScript
- Homepage: https://share-my-code-nu.vercel.app
- Size: 101 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShareMyCode
A web application for creating beautiful images of your code to share.
## Features
- **Code Editor** — Write or paste code directly in the preview card
- **10 Gradient Themes** — Candy, Midnight, Sunset, Ocean, Forest, Breeze, Flamingo, Crimson, Arctic, Noir
- **Customizable Padding** — 6 padding options (16–128px)
- **Dark/Light Mode** — Toggle between dark and light themes
- **Line Numbers** — Show or hide line numbers
- **Export Options** — Copy code, copy as image, or save as PNG
- **Editable Title** — Click the filename in the title bar to rename
- **Persistent State** — Settings and code are saved to localStorage
- **Reset** — One-click reset to defaults when changes are made
- **Responsive** — Works on desktop and mobile
## Tech Stack
- **Next.js 16** with App Router
- **React 19**
- **TypeScript**
- **Tailwind CSS 4**
- **shadcn/ui** (Radix UI primitives)
- **Zustand** for state management
- **next-themes** for dark/light mode
- **html-to-image** for PNG export
- **JetBrains Mono** font
## Getting Started
```bash
# Install dependencies
bun install
# Run development server
bun dev
```
Open [http://localhost:3000](http://localhost:3000) to start creating code images.
## Project Structure
```
src/
app/ # Next.js pages and layout
components/
code-preview # Main code preview card
common/ # Header, Footer, Logo, controls
theme/ # Theme provider and toggle
ui/ # shadcn/ui components
data/ # Themes and padding constants
store/ # Zustand editor store
lib/ # Utilities
```