Create beautiful screenshots of your code in seconds.
Open-source alternative to ray.so and carbon.now.sh.

• Token-based Syntax Highlighting — Powered by Shiki for accurate, beautiful code rendering
• 18+ Languages — JavaScript, TypeScript, Python, Rust, Go, Java, C++, HTML, CSS, SQL, Bash, JSON, YAML, Markdown, PHP, Ruby, Swift, Kotlin
• 8+ Code Themes — One Dark, Dracula, Night Owl, GitHub Dark, Solarized Dark, Catppuccin Mocha, Monokai, Tokyo Night
• 22+ Backgrounds — Gradient presets, solid colors, and custom gradient builder with angle control
• Export Options — PNG (2x retina), SVG, and clipboard copy
• Window Styles — macOS, Windows, or no window controls
• 6+ Fonts — JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Cascadia Code, Victor Mono
• Full Customization — Font size, padding, border radius, opacity, line numbers, watermark
• Shareable Links — All settings encoded in URL for easy sharing
• Keyboard Shortcuts — Ctrl+S (PNG), Ctrl+Shift+S (SVG), Ctrl+Shift+C (copy)
• Dark/Light Mode — System-aware UI theme (code themes are independent)
• Responsive Design — Works on desktop, tablet, and mobile
• Noise Texture — Optional grain overlay for extra style
• Open Graph — Dynamic OG image generation for social sharing

CodeTarz uses a feature-based architecture where each feature is self-contained with its own components, hooks, types, and constants. Features communicate through a shared Zustand store — never importing directly from each other.

features/
  editor/       — Code input, tab handling, language selection
  preview/      — Live preview canvas, syntax highlighting, window controls
  controls/     — Settings panel (background, theme, style tabs)
  export/       — PNG/SVG export, clipboard copy
  url-state/    — URL query param serialization
  keyboard-shortcuts/ — Global keyboard shortcuts

shared/
  store/        — Zustand store with slice pattern
  components/   — Header, Footer, UI primitives
  hooks/        — Reusable hooks (useDebounce)
  utils/        — Utilities (cn)
  types/        — Global type definitions

# Clone the repository
git clone https://github.com/codetarz/codetarz.git
cd codetarz

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

Open http://localhost:3000 to see the app.

codetarz/
├── app/
│   ├── layout.tsx              — Root layout, fonts, providers
│   ├── page.tsx                — Main page composition
│   ├── globals.css             — Global styles
│   └── api/og/route.tsx        — OG image generation
├── features/
│   ├── editor/                 — Code editor feature
│   ├── preview/                — Live preview feature
│   ├── controls/               — Settings panel feature
│   ├── export/                 — Export feature
│   ├── url-state/              — URL state sync feature
│   └── keyboard-shortcuts/     — Keyboard shortcuts feature
├── shared/
│   ├── components/             — Shared UI components
│   ├── hooks/                  — Shared hooks
│   ├── store/                  — Zustand store + slices
│   ├── types/                  — Global types
│   └── utils/                  — Utilities
├── public/                     — Static assets
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── next.config.ts

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Follow the feature-based architecture — keep feature code isolated
4. Never import directly between features — use the shared store
5. Run npm run lint and npm run build before submitting
6. Submit a pull request