Convert Figma logo to code with AI

riccardoperra logocodeimage

A tool to beautify your code screenshots. Built with SolidJS and Fastify.

1,335
72
1,335
14

Top Related Projects

34,434

:black_heart: Create and share beautiful images of your source code

📸 Polaroid for your code

📄 CLI that generates beautiful README.md files

:zap: Dynamically generated stats for your github readmes

A curated list of awesome READMEs

:octocat: Improve your README.md profile with these amazing badges.

Quick Overview

CodeImage is an open-source tool for creating beautiful images of your source code. It allows users to customize the appearance of their code snippets, including themes, backgrounds, and various visual effects, making it ideal for sharing code on social media or in presentations.

Pros

  • User-friendly interface with real-time preview
  • Wide range of customization options for code appearance
  • Supports multiple programming languages and themes
  • Exports high-quality images suitable for various platforms

Cons

  • Limited to static code snippets (no animation or interactive features)
  • Requires internet connection for full functionality
  • May have a learning curve for users unfamiliar with code styling options

Getting Started

To use CodeImage, follow these steps:

  1. Visit the CodeImage website at https://codeimage.dev/
  2. Paste your code snippet into the editor
  3. Customize the appearance using the available options
  4. Click the "Export" button to download your image

No installation is required as CodeImage is a web-based tool.

Competitor Comparisons

34,434

:black_heart: Create and share beautiful images of your source code

Pros of Carbon

  • More established project with a larger community and contributor base
  • Offers a wider range of customization options for image generation
  • Supports more programming languages and themes out-of-the-box

Cons of Carbon

  • Slower performance compared to CodeImage, especially for larger code snippets
  • Less frequent updates and maintenance
  • More complex setup process for local development

Code Comparison

Carbon:

import { createHtmlImage } from '@carbon/sdk'

const image = await createHtmlImage({
  code: 'console.log("Hello, Carbon!")',
  language: 'javascript'
})

CodeImage:

import { CodeImage } from '@codeimage/sdk'

const image = await CodeImage.generate({
  code: 'console.log("Hello, CodeImage!")',
  lang: 'js'
})

Both projects aim to create beautiful code snippets as images, but CodeImage offers a more streamlined API and faster performance. Carbon, however, provides more customization options and supports a wider range of languages out-of-the-box. The choice between the two depends on specific needs, such as performance requirements, desired customization level, and preferred language support.

📸 Polaroid for your code

Pros of Polacode

  • Lightweight and simple to use, focusing solely on code screenshot functionality
  • Integrates seamlessly with Visual Studio Code as an extension
  • Supports a wide range of programming languages and themes

Cons of Polacode

  • Limited customization options for the generated images
  • Lacks advanced features like multi-file support or sharing capabilities
  • No web-based version, requiring VS Code installation

Code Comparison

Polacode (JavaScript):

vscode.window.showInformationMessage('Polacode: Copied to clipboard');

Codeimage (TypeScript):

export const copyImageToClipboard = async (dataUrl: string) => {
  const blob = await (await fetch(dataUrl)).blob();
  await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
};

While both projects aim to create code screenshots, Codeimage offers a more feature-rich experience with a web-based interface, extensive customization options, and multi-file support. Polacode, on the other hand, provides a simpler, more focused solution integrated directly into VS Code. The code comparison highlights the difference in complexity, with Codeimage using TypeScript and implementing more advanced clipboard functionality.

📄 CLI that generates beautiful README.md files

Pros of readme-md-generator

  • Focused specifically on generating README files, making it more specialized for this task
  • Interactive CLI tool that guides users through the README creation process
  • Supports multiple languages and integrates with package.json for npm projects

Cons of readme-md-generator

  • Limited to README generation, lacking broader code snippet or image creation capabilities
  • Less visually oriented, as it doesn't provide image output options
  • May require more manual customization for complex README structures

Code Comparison

readme-md-generator:

const answers = await prompts(questions, { onCancel });
const { projectName, projectDescription, ...rest } = answers;
const readme = generateReadme(answers);

codeimage:

export const createImage = async (config: ImageConfig): Promise<string> => {
  const canvas = createCanvas(config.width, config.height);
  const ctx = canvas.getContext('2d');
  // ... (drawing logic)
};

While readme-md-generator focuses on generating README content through user prompts, codeimage provides functionality for creating visual representations of code snippets. The code snippets illustrate their different purposes, with readme-md-generator handling user input and README generation, and codeimage dealing with image creation and canvas manipulation.

:zap: Dynamically generated stats for your github readmes

Pros of github-readme-stats

  • Provides dynamic GitHub statistics for README files
  • Supports multiple themes and customization options
  • Easy to implement with a single line of markdown

Cons of github-readme-stats

  • Limited to GitHub-specific data visualization
  • Requires external API calls, which may slow down README loading
  • Less flexibility for creating custom code snippets or images

Code Comparison

github-readme-stats:

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

codeimage:

import { createEditor } from "@codeimage/react";

const Editor = createEditor();

export default function App() {
  return <Editor />;
}

github-readme-stats focuses on generating GitHub statistics using a simple markdown snippet, while codeimage provides a more flexible React-based editor for creating custom code snippets and images. github-readme-stats is easier to implement for quick GitHub stats, but codeimage offers more control over the visual representation of code snippets and supports various programming languages.

A curated list of awesome READMEs

Pros of awesome-readme

  • Curated list of exemplary README files, providing inspiration and best practices
  • Covers a wide range of project types and styles
  • Community-driven with contributions from various developers

Cons of awesome-readme

  • Static content, not an interactive tool
  • Requires manual browsing and implementation of ideas
  • Limited to README files, doesn't address other aspects of code presentation

Code comparison

Not applicable, as awesome-readme is a curated list and doesn't contain executable code.

codeimage, on the other hand, is an interactive tool for creating code screenshots. Here's a sample of its configuration code:

export const config: Config = {
  name: 'codeimage',
  theme: 'github-dark',
  language: 'typescript',
  fontFamily: 'Fira Code',
  fontSize: 14,
  lineNumbers: true,
  padding: 32,
};

Summary

awesome-readme serves as a valuable resource for developers looking to improve their project documentation, offering a collection of well-crafted README examples. It's particularly useful for those seeking inspiration and best practices in project presentation.

codeimage, in contrast, is a tool focused on creating visually appealing code screenshots, which can be used to enhance documentation, social media posts, or presentations. While not directly comparable in functionality, both projects contribute to improving code and project presentation in different ways.

:octocat: Improve your README.md profile with these amazing badges.

Pros of Badges4-README.md-Profile

  • Extensive collection of pre-made badges for various technologies and platforms
  • Easy to use with simple copy-paste functionality
  • Regularly updated with new badges and improvements

Cons of Badges4-README.md-Profile

  • Limited to static badge creation, lacks dynamic image generation
  • No customization options for existing badges
  • Focused solely on badges, doesn't offer other README enhancements

Code Comparison

Badges4-README.md-Profile:

[![Windows](https://img.shields.io/badge/Windows-0078D6?style=for-the-badge&logo=windows&logoColor=white)](https://www.microsoft.com/windows)

CodeImage:

import { createSignal } from 'solid-js';
import { Editor } from '@codeimage/ui';

export const CodeEditor = () => {
  const [code, setCode] = createSignal('');
  return <Editor value={code()} onChange={setCode} />;
};

The code snippets highlight the different focus of each project. Badges4-README.md-Profile provides ready-to-use markdown for adding badges, while CodeImage offers a more complex setup for creating customizable code snippets and images.

CodeImage provides a full-fledged application for creating and customizing code snippets, offering features like syntax highlighting, theme selection, and export options. In contrast, Badges4-README.md-Profile is a simpler repository focused on providing a wide variety of pre-made badges for enhancing GitHub profiles and project READMEs.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

CodeImage logo

Create elegant code screenshots of your source code.

Latest release Version Build workflow badge Issues Built with SolidJS Built with Vanilla Extract License

Introduction

CodeImage is the newest tool to help developers to create beautiful screenshots of their code, providing several features to speed up the process to post in social media.

CodeImage - A tool to manage and beautify your code screenshots | Product Hunt

CodeImage showcase

🤖 Tech stack

CodeImage architecture consist of a PNPM monorepo, currently subdivided in packages and apps.

Apps

@codeimage/app

The front-end application, entirely built with SolidJS.

It currently also relies on these libraries:

@codeimage/api

The REST API layer built with Fastify, Prisma ORM and Auth0.

Packages

🌏 Contributions

Warning Read this before opening any PR!

When contributing, it's better to first discuss the change you wish to make via issue or discussion, or any other method with the owners of this repository before making a change.

See the CONTRIBUTING.md guide for more details.


CodeImage is the winner of SolidHack 2022 for the Best Application category!

License

MIT © Riccardo Perra