litttley / codeimage

Create elegant screenshots of your source code. Built with SolidJS

Create elegant code screenshots of your source code.

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.

🚀 Features

✅ Customizable terminal window, editor and frame style
✅ 15+ custom themes for code editor
✅ Highlighting support for 10+ programming languages
✅ Tab name with customizable icons
✅ Web share api support
✅ Keyboard shortcuts support
✅ Mobile view support
✅ Multi-language support
✅ Light and dark mode support

💻 Run locally

To run the project locally, you must have in your local machine pnpm >= 6.23.2 and node >= 14.x;

1. Install dependencies

$ pnpm install

2. Build core libraries

$ pnpm libs:build

3. Run @codeimage/app

• Development mode:

$ pnpm dev

• Production mode (no reload, serve static files):

$ pnpm build:prod && pnpm serve --filter=@codeimage/app

🤖 Tech stack

CodeImage front-end app currently relies on these technologies:

• SolidJS: UI framework
• CodeMirror6: Code Editor
• vanilla-extract: Design system and app theme
• HeroIcons: Icons
• solid-headless: Headless WAI-ARIA widgets for SolidJS
• @ngneat/elf + RxJS: Reactive state management

Other libraries:

• solid-primitives: SolidJS primitives library
• solid-use: Collection of solid-js utilities
• material-icon-theme: Icons for custom terminal tabs
• floating-ui: Utilities for positioning floating elements
• Lion: White label web components in Lit (used for custom combobox)

🌏 Contributions

⚠️ 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