Carbon Clone

A beautiful code snippet generator inspired by Carbon. Create stunning images of your code snippets with customizable themes, backgrounds, and export options.

Features

• Live Code Editor - Edit code in real-time with syntax highlighting
• Multiple Languages - Support for JavaScript, TypeScript, Python, Java, C, C++, Go, Rust, SQL, Bash, and more
• Theme Selection - Choose from various syntax highlighting themes
• Customizable Backgrounds - Transparent or custom background colors
• Window Controls - Optional macOS-style window decorations
• Adjustable Padding - Control the spacing around your code
• Dark/Light Mode - Toggle between dark and light interface modes
• Multiple Export Formats - Export as PNG, SVG, or copy directly to clipboard
• Responsive Design - Works seamlessly on desktop and mobile devices

Tech Stack

• Framework: Next.js 16 with React 19
• Styling: Tailwind CSS v4
• UI Components: Radix UI
• Syntax Highlighting: Prism.js
• Image Export: html-to-image
• Notifications: Sonner
• Language: TypeScript

Getting Started

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm

Installation

1. Clone the repository:

git clone https://github.com/yourusername/carbon-clone.git
cd carbon-clone

2. Install dependencies:

pnpm install

3. Run the development server:

pnpm dev

4. Open http://localhost:3000 in your browser

Build for Production

pnpm build
pnpm start

Usage

1. Edit Your Code: Type or paste your code into the editor
2. Choose a Language: Select the programming language for proper syntax highlighting
3. Customize Appearance:
   • Pick a syntax theme
   • Adjust padding
   • Toggle window controls
   • Set background color/transparency
   • Switch between dark and light modes
4. Export: Download as PNG/SVG or copy directly to clipboard

Project Structure

carbon-clone/
├── src/
│   ├── app/              # Next.js app router pages
│   ├── components/       # React components
│   │   ├── ui/          # Reusable UI components
│   │   ├── code-editor.tsx
│   │   ├── controls.tsx
│   │   └── preview-frame.tsx
│   ├── hooks/           # Custom React hooks
│   ├── lib/             # Utility functions
│   ├── styles/          # Global styles and themes
│   └── types/           # TypeScript type definitions
├── public/              # Static assets
└── package.json

Supported Languages

• JavaScript
• TypeScript
• Python
• Java
• C
• C++
• Go
• Rust
• SQL
• Bash
• CSS
• JSON

Available Themes

Multiple syntax highlighting themes are available through Prism.js, providing options for different aesthetic preferences and readability needs.

License

This project is open source and available under the MIT License.

Acknowledgments

• Inspired by Carbon
• Built with modern web technologies and best practices

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

Development

To run the project locally with hot reloading:

pnpm dev

To check for linting issues:

pnpm lint

---

Made with ❤️ using Next.js and TypeScript