Skip to content

Lachsokhour/kbach.io

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Kbach.io — ក្បាច់ 🎨

The minimalist, high-speed HTML-to-PNG engine.

Kbach.io is a powerful, web-based tool designed for creators and developers who need to generate high-quality images from HTML and CSS. Whether you're making Open Graph (OG) cards, social media posts, or printable assets, Kbach.io provides a real-time environment to design and export with precision.

Kbach Logo


✨ Key Features

  • ⚡ Real-time Live Preview: See your HTML/CSS changes instantly as you type.
  • 📱 Social Media Presets: One-click dimensions for Twitter/X, Instagram, LinkedIn, and more.
  • 📐 Custom Dimensions: Set your own width and height, or use Auto-Height to let the content define the size.
  • 💎 Retina-Ready Export: Export at 1x, 2x (Retina), 3x, or 4x (Ultra HD) for crystal-clear results.
  • 🛠️ Built-in Templates: Start fast with professionally designed templates for Quotes, Profile Cards, Tickets, and Receipts.
  • 🌗 Dark Mode Driven: A premium, developer-focused interface with full dark/light mode support.
  • ↩️ Contextual Undo: Instantly recover accidentally cleared code with a smart, morphing Undo button.
  • 📋 Clipboard Integration: Quickly copy your HTML code or export directly to PNG.

🚀 How to Use

  1. Pick a Template: Select from one of the chips in the editor header (e.g., OG Card, Quote Card).
  2. Edit HTML/CSS: Use the built-in editor to customize your design.
  3. Adjust Settings: Choose your target dimensions or scale in the top bar.
  4. Export: Click Export PNG to download your finalized design at your chosen resolution.

🛠️ Technology Stack

  • Core: Vanilla HTML5, CSS3, and JavaScript (ES Module architecture).
  • Editor: CodeJar for a lightweight, performant code editing experience.
  • Syntax Highlighting: Prism.js for real-time markup highlighting.
  • Icons: Lucide Icons for a consistent and professional icon set.
  • Engine: html2canvas for high-fidelity DOM-to-Canvas rendering.
  • Typography: Inter, JetBrains Mono, Nunito, and Kantumruy Pro.

🎨 Local Development

Since Kbach.io is built as a highly portable single-page application, you can run it locally by simply opening the index.html file in any modern web browser.


Created with ❤️ by Sokhour LACH

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors