flashot

Flashot is the blazing-fast image generation tool for code snippets, designed for flawless experience and speed.

Super fast: (generated in ~135ms)

✨ Features

• 💻 Inline code support: Easily convert inline code snippets to images
• 🌐 URL support: Fetch code snippets directly from URLs
• 🎨 Customizable styles: Choose from various options to match your style
• 🖼️ High-quality output: Generates crisp and clear images which keep the original code's formatting intact
• ⚡ Blazing fast: Optimized for speed, ensuring quick image generation
• 🛠️ Easy to use: Easy to integrate into your projects with a simple API
• 🪓 Multi-format support: Generate images in various formats (PNG, JPEG, WebP)
• 🔷 TypeScript support: Fully typed for better developer experience
• 🔍 Extensive testing: Thoroughly tested with a comprehensive suite of unit tests
• 🔋 Easy integration: Simple API for seamless integration into your projects
• 📦 Lightweight: Minimal dependencies to keep your project lean
• 📏 Line numbers: Support for displaying & customizing line numbers
• 🗂️ Cache management: Efficiently handles caching for improved performance (render, tokens, sizes, fonts)

📦 Installation

bun install flashot

npm install flashot

yarn add flashot

pnpm add flashot

🪔 Usage Example

For inline code

import { writeFile } from "node:fs/promises";
import { codeToImg } from "flashot";

const buffer = await codeToImg('console.log("hello, world!");', {
  /* add more options*/
});
await writeFile("output.webp", buffer);

For url has raw content

import { writeFile } from "node:fs/promises";
import { urlToImg } from "flashot";

const buffer = await urlToImg(
  "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json",
  {
    /* add more options*/
    format: OutputFormat.Png,
  }
);
await writeFile("output.png", buffer);

Then you can use the buffer to display the image or send it in a response.

⚙️ API Options (default is not needed)

const defaultOptions = {
  lang: "ts", // default is javascript
  theme: "ayu-dark", // default is github-dark
  font: "https://fonts.bunny.net/ubuntu-sans-mono/files/ubuntu-sans-mono-latin-400-normal.woff2", // default is bunny.net/jetbrains-mono.
  format: OutputFormat.Png, // default is OutputFormat.Webp (options: OutputFormat.Png, OutputFormat.Jpeg, OutputFormat.Webp)
  quality: 100, // default is 100 (1-100), only applies to JPEG formats
  width: 800, // default is system's width
  height: 400, // default is system's height
  bg: "transparent", // default is system's background
  gap: 1, // gap between lines (default is 1)
  style: {
    borderRadius: 10, // default is 8
    padding: 30, // default is 25
    // ... more custom styles
  },
  lineNumbers: {
    enabled: false,
    startFrom: 1,
    color: "#7b7f8b",
    marginRight: 0,
  },
};

Option	Description	Default
lang	Code language (supported)	"js"
theme	Rendering theme (supported)	"github-dark"
font	Font for rendering (URL or ArrayBuffer)	Jetbrains Mono
format	Output image format (OutputFormat.Png, OutputFormat.Jpeg, OutputFormat.Webp)	OutputFormat.Webp
quality	Image quality (1-100) for JPEG formats	100
width	Image width	System default
height	Image height	System default
bg	Background color	Theme's background
gap	Gap between lines	1
style	Additional container styles (docs)	{ borderRadius: 8, padding: 25 }
lineNumbers	Line number styles	{ enabled: false, color: '#7b7f8b', marginRight: 0 }

🧪 Code Coverage

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	99.17	81.25	100	99.17
core.ts	100	100	100	100
index.ts	100	100	100	100
shared.ts	100	100	100	100
utils.ts	98.36	78.57	100	98.36	67

🏁 Benchmarks

No	Task name	Latency avg (ns)	Latency med (ns)	Throughput avg (ops/s)	Throughput med (ops/s)	Samples
0	small code (10 lines)	201215722 ± 4.80%	186069100 ± 8369100	5 ± 3.54%	5 ± 0	64
1	medium code (100 lines)	349906927 ± 6.43%	317186800 ± 6326800	3 ± 3.95%	3 ± 0	64
2	large code (1000 lines)	1726190939 ± 0.46%	1715535300 ± 13138650	1 ± 0.45%	1 ± 0	64

📚 Technologies

• ⚡ Bun - Fast all-in-one JavaScript runtime and toolkit
• 🏗️ TypeScript - Type-safe development with strict mode enabled
• 📦 Vite - Lightning-fast build tool with optimized bundling
• 🪓 Tsdown - A powerful tool for TypeScript package
• 🧪 Vitest - Blazing fast unit testing & interactive test UI framework
• 🎨 Shiki and Takumi - Render container highlight
• 📝 Biome - Fast formatter and linter for consistent code style
• 🚀 Dual Module Support - ESM and CommonJS output with proper type definitions
• 🔥 ESLint - Advanced linting with TypeScript and SonarJS rules
• 🧩 Lefthook and Commitlint - Automated Git hooks for linting and formatting
• 🛠️ Tinybench - A tiny benchmarking library for measuring performance

🤝 Contributing

Contributions are welcome! This starter kit uses:

• Automated code formatting and linting
• Comprehensive test coverage requirements

Please ensure all tests pass and code quality checks succeed before submitting a PR.

Check CONTRIBUTING.md for more information.

💬 Discussions

Head over to the discussions to share your ideas.

📄 License

MIT License - Tran Nguyen Thuong Truong