CuteCode

Create beautiful images of your code

Open-source ray.so alternative with 45+ themes, snippet sharing, and more.
Small Tools – Big Impact ✨

Live Demo → · Quick Start · Contribute · Report Bug

✨ Features

• 🎨 45+ Beautiful Themes — Brand themes (Vercel, Stripe, Supabase, OpenAI, Claude, Gemini, etc.) + aesthetic themes (Aurora Nights, Neon Dreams, Golden Hour, etc.)
• 🖼️ Code Screenshot Generator — Turn code into stunning shareable images in seconds
• 📝 Snippet Sharing — Save, share, and explore public code snippets with unique URLs
• 🔄 Remix — Fork and remix any shared snippet with your own customizations
• 🌓 Dark & Light Mode — Full theme support with system preference detection
• 🎯 Syntax Highlighting — Powered by Shiki with 100+ language support
• 📤 Export Options — Copy to clipboard, download as PNG, or share via URL
• 🔐 Authentication — Supabase Auth (email + GitHub/Google OAuth) to save and manage your snippets
• 💎 Pro & Premium Plans — Unlimited HD/4K exports, premium themes, watermark-free images
• 📱 Responsive Design — Works beautifully on desktop and mobile
• ⚡ Built on Next.js 16 — React 19, App Router, Server Components, Edge-ready

🎨 Themes (45+)

CuteCode ships with 45+ hand-crafted themes across two categories:

Brand Themes (16)	Aesthetic Themes (28+)
Vercel	Bitmap
Supabase	Noir
Tailwind	Ice
OpenAI	Sand
Mintlify	Forest
Prisma	Mono
Clerk	Breeze
ElevenLabs	Candy
Resend	Crimson
Trigger.dev	Falcon
Nuxt	Meadow
Browserbase	Midnight
Cloudflare	Raindrop
Gemini	Sunset
Stripe	Roses
Claude	Retro Mac
	Love
	Valentine
	Coffee Date
	Sunset Chill
	PS6
	Aurora Nights
	Starry Night
	Strawberry Milk
	Frosted Glass
	Velvet Night
	Peachy Mood
	Neon Dreams
	Golden Hour
	Rabbit

Want to add a theme? Check the Contributing section below!

🛠️ Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
UI	React 19, Tailwind CSS 4, Base UI (coss)
Animation	Motion (Framer Motion)
Syntax Highlighting	Shiki
Authentication	Supabase Auth
Database	PostgreSQL + Prisma ORM
Payments	Dodo Payments
State Management	Jotai
Deployment	Vercel

🚀 Getting Started

Prerequisites

• Node.js 20+ (Next.js 16 requirement)
• PostgreSQL database
• Yarn (package manager)

1. Clone the repository

git clone https://github.com/simpleneeraj/cutecode.git
cd cutecode

2. Install dependencies

yarn install

3. Set up environment variables

cp .env.example .env.development

Fill in your environment variables (see .env.example for the full list with comments):

# App
NEXT_PUBLIC_BASE_URL="http://localhost:3000"

# Supabase Auth (https://supabase.com → Project Settings → API)
NEXT_PUBLIC_SUPABASE_URL="https://your-project.supabase.co"
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY="sb_publishable_..."
SUPABASE_SERVICE_ROLE_KEY="sb_secret_..."   # server only

# Dodo Payments (https://dodopayments.com)
DODO_PAYMENTS_API_KEY="your_api_key"
DODO_PAYMENTS_WEBHOOK_KEY="whsec_..."
DODO_PAYMENTS_RETURN_URL="http://localhost:3000/checkout/success"
DODO_PAYMENTS_ENVIRONMENT="test_mode"
NEXT_PUBLIC_DODO_PRODUCT_PRO="pdt_..."
NEXT_PUBLIC_DODO_PRODUCT_PREMIUM="pdt_..."

# Database (PostgreSQL)
DATABASE_URL="postgresql://user:password@localhost:5432/cutecode"

# Cron Security
CRON_SECRET="generate-with-openssl-rand-hex-32"

Auth setup: in the Supabase dashboard, enable the GitHub/Google OAuth providers, add <your-url>/auth/callback as a redirect URL, and set the sign-up + recovery email templates to include {{ .Token }} so the 6-digit code screens work.

4. Set up the database

yarn db:generate
yarn db:push

5. Run the development server

yarn dev

Open http://localhost:3000 — you're all set! 🎉

📁 Project Structure

cutecode/
├── prisma/              # Database schema & migrations
├── public/              # Static assets, backgrounds, icons
├── src/
│   ├── app/             # Next.js App Router pages
│   │   ├── (navigation)/ # Main app routes (editor, explore, snippets)
│   │   ├── api/         # API routes (tRPC, webhooks)
│   │   ├── account/     # Auth pages (sign-in, sign-up)
│   │   ├── pricing/     # Pricing page
│   │   └── legal/       # Terms, privacy, refund
│   ├── components/      # Reusable UI components
│   │   └── presets/     # 45+ theme preset frames
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility libraries
│   ├── server/          # Server-side logic (tRPC routers)
│   ├── store/           # Jotai state atoms
│   ├── styles/          # Global CSS & preset styles
│   └── utils/           # Helper functions
├── .env.example         # Environment variables template
├── next.config.js       # Next.js configuration
└── package.json

🤝 Contributing

Contributions are welcome! Here's how to get started:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Adding a New Theme

1. Create a new directory in src/components/presets/your-theme-name/
2. Add your theme configuration and frame component
3. Register it in src/components/presets/themes/index.ts
4. Submit a PR!

We love new themes — brand themes, aesthetic themes, seasonal themes, you name it!

💖 Sponsor

If CuteCode helps you create beautiful code screenshots, consider sponsoring to keep the project alive and growing:

🙏 Acknowledgements

• Special thanks to Raycast and ray.so — CuteCode started as a fork of the incredible ray.so project. We're grateful for the foundation they built and their commitment to open source.
• Shiki — Beautiful syntax highlighting
• Supabase — Authentication
• Vercel — Hosting & deployment

See CREDITS.md for the full list of technologies, libraries, and inspirations.

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Small Tools – Big Impact ✨

Built with ❤️ by simpleneeraj

Website · Twitter · Issues