https://github.com/riccardoperra/codeimage

A tool to beautify your code screenshots. Built with SolidJS and Fastify.
https://github.com/riccardoperra/codeimage

beautiful code codesnippets editor fastify screenshot sharing snippets solid solid-js tweet typescript

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/riccardoperra/codeimage
• Owner: riccardoperra
• License: mit
• Created: 2022-01-31T20:25:57.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-02-07T12:52:28.000Z (2 months ago)
• Last Synced: 2025-04-04T11:37:25.153Z (13 days ago)
• Topics: beautiful, code, codesnippets, editor, fastify, screenshot, sharing, snippets, solid, solid-js, tweet, typescript
• Language: TypeScript
• Homepage: https://codeimage.dev
• Size: 15.1 MB
• Stars: 1,756
• Watchers: 6
• Forks: 102
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome-solid-js - Codeimage.dev - Create elegant screenshots of your source code. Built with SolidJS (Resources / Open Source)
• popular-dependents-lists - riccardoperra/codeimage - 🌟 970 (Solid / riccardoperra/codeimage)

README

        
![CodeImage logo](assets/banner.png?raw=true)

> Create elegant code screenshots of your source code.

![Latest release Version](https://img.shields.io/badge/dynamic/json?color=success&label=Version&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2Friccardoperra%2Fcodeimage%2Fmain%2Fpackage.json)

![Build workflow badge](https://img.shields.io/github/actions/workflow/status/riccardoperra/codeimage/prod-deploy.yml?branch=main)

[![Issues](https://img.shields.io/github/issues/riccardoperra/codeimage)](https://github.com/riccardoperra/codeimage/issues)

[![Built with SolidJS](https://img.shields.io/badge/Built%20with-SolidJS-blue)](https://github.com/solidjs/solid)

[![Built with Vanilla Extract](https://img.shields.io/badge/Built%20with-Vanilla%20Extract-ff69b4)](https://github.com/seek-oss/vanilla-extract)

![License](https://img.shields.io/github/license/riccardoperra/codeimage)

## Introduction

[CodeImage](https://codeimage.dev) 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.



#### Supported by



  



---

![CodeImage showcase](assets/showcase_1.png)

## 🤖 Tech stack

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

### Apps

#### [@codeimage/app](./apps/codeimage)

The front-end application, entirely built with SolidJS.

It currently also relies on these libraries:

- [vanilla-extract](https://github.com/seek-oss/vanilla-extract): Zero-runtime Stylesheets-in-TypeScript.

- [CodeMirror6](https://codemirror.net/6/): Extensible code editor

- [StateBuilder](https://github.com/riccardoperra/statebuilder): Composable state management

- [@codeui/kit](https://github.com/riccardoperra/codeui): Accessible UI Kit based

  on [Kobalte](https://github.com/kobaltedev/kobalte)

- [solid-primitives](https://github.com/solidjs-community/solid-primitives): SolidJS primitives library

#### [@codeimage/api](./apps/api)

The REST API layer built with [Fastify](https://github.com/fastify/fastify),

[Prisma ORM](https://github.com/prisma/prisma) and [Auth0](https://auth0.com/).

### Packages

- [@codeimage/ui](./packages/ui): contains the source code of the UI kit of CodeImage front-end application.

  > **Note** the UI kit is being moved to [@codeui/kit](https://github.com/riccardoperra/codeui) repository

- [@codeimage/config](./packages/config): contains the base configurations and interfaces for CodeImage

- [@codeimage/highlight](./packages/highlight): contains the custom editor and highlighting themes for CodeMirror

- [@codeimage/dom-export](./packages/dom-export): contains the [html-to-image](https://github.com/bubkoo/html-to-image)

  fork which includes several fix for image export

- [@codeimage/locale](./packages/locale): contains a wrapper

  of [@solid-primitives/i18n](https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n) which

  includes strict typing for i18n

- [@codeimage/vanilla-extract](./packages/vanilla-extract): contain

  the [Vanilla Extract](https://github.com/seek-oss/vanilla-extract) plugin fork which includes SolidJS and PNPM fixes

  to work under monorepo.

- [@codeimage/prisma-models](./packages/prisma-models): contains the Prisma ORM backend models shared across front-end

  and back-end application.

- [@codeimage/atomic-state](./packages/atomic-state): contain the source code of a small state manager which includes

  some utilities helper for RxJS and solid-js/store

## 🌏 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](./CONTRIBUTING.md) guide for more details.

---



  





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



## License

MIT © [Riccardo Perra](https://github.com/riccardoperra)