{"_id":"@asciirender/asciir","_rev":"3-0facd7f867816b056bed9e5fecc5cbb5","name":"@asciirender/asciir","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.2":{"name":"@asciirender/asciir","version":"1.0.2","keywords":["ascii","ascii-art","image-processing","react","react-component","image-to-ascii","text-art","canvas","svg","typescript","image-converter"],"author":{"name":"dvinay"},"license":"MIT","_id":"@asciirender/asciir@1.0.2","maintainers":[{"name":"dvinay","email":"vinaydangodra28@gmail.com"}],"homepage":"https://github.com/ACIIRenderer/ASCIIR#readme","bugs":{"url":"https://github.com/ACIIRenderer/ASCIIR/issues"},"dist":{"shasum":"18abd4dc996191acfd3bab3cf4387272dfba76e5","tarball":"https://registry.npmjs.org/@asciirender/asciir/-/asciir-1.0.2.tgz","fileCount":6,"integrity":"sha512-zbbTWlhQ6bQKb8N2L+R83H2fpee3/9WWCA7iJrndfKhT246c76IXom26ffHFpB1tJdyLkGzkm92M1XIG/9ReIA==","signatures":[{"sig":"MEUCIEF4QmwhkSaem8Yzb6eEgZah3e9Xo+DTYTFeckXU00J9AiEAiD/DIU3nVby8mbtILpLJS6DV6BeD+rXuNWr1Fm+YKaQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42831},"main":"./dist/asciir.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/asciir.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/asciir.js","require":"./dist/asciir.umd.cjs"}},"gitHead":"58ba915f3edde8afe1cdf12b8885f90accd4316d","scripts":{"dev":"vite --config vite.demo.config.ts","size":"npm run build:lib && npx size-limit","build":"npm run build:lib","preview":"vite preview --config vite.demo.config.ts","build:lib":"tsc -p tsconfig.lib.json && vite build --config vite.config.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.demo.config.ts","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"dvinay","email":"vinaydangodra28@gmail.com"},"repository":{"url":"git+https://github.com/ACIIRenderer/ASCIIR.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful React component for converting images to beautiful ASCII art with customizable settings","directories":{},"sideEffects":false,"_nodeVersion":"22.17.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","react":"^19.2.3","react-dom":"^19.2.3","typescript":"~5.8.2","@types/node":"^22.14.0","@types/react":"^18.2.0","lucide-react":"^0.562.0","vite-plugin-dts":"^4.5.0","@types/react-dom":"^18.2.0","react-router-dom":"^7.12.0","@vitejs/plugin-react":"^5.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/asciir_1.0.2_1768287990253_0.7712112587946647","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@asciirender/asciir","version":"1.0.3","keywords":["ascii","ascii-art","image-processing","react","react-component","image-to-ascii","text-art","canvas","svg","typescript","image-converter"],"author":{"name":"dvinay"},"license":"MIT","_id":"@asciirender/asciir@1.0.3","maintainers":[{"name":"dvinay","email":"vinaydangodra28@gmail.com"}],"homepage":"https://asciir.vercel.app","bugs":{"url":"https://github.com/ASCIIRenderer/ASCIIR/issues"},"dist":{"shasum":"ad1b05f97a4bde9d5326d0a7f1c7ab2de451ead3","tarball":"https://registry.npmjs.org/@asciirender/asciir/-/asciir-1.0.3.tgz","fileCount":6,"integrity":"sha512-+dpxn/M9f1b8FE3pRnR7WTXvQZ9FLr9c5kCt8s4YW0MZuul2xP3p5I/Xb7Ksx9vU0jMigaD7+RSGRTH4U76Nzw==","signatures":[{"sig":"MEUCIQD2QFIVnkQqQpAmIh2inBIxocidRaJ1hfLSZdnu5K3++wIgGn9McukVtugo2eVpErP9Fzi82GfLp6zHYWtkbDCeEaE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42999},"main":"./dist/asciir.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/asciir.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/asciir.js","require":"./dist/asciir.umd.cjs"}},"gitHead":"d4af732922a539a86ccdc6d6b8811240df4f42fb","scripts":{"dev":"vite --config vite.demo.config.ts","size":"npm run build:lib && npx size-limit","build":"npm run build:lib","preview":"vite preview --config vite.demo.config.ts","build:lib":"tsc -p tsconfig.lib.json && vite build --config vite.config.ts","typecheck":"tsc --noEmit","build:demo":"vite build --config vite.demo.config.ts","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"dvinay","email":"vinaydangodra28@gmail.com"},"repository":{"url":"git+https://github.com/ASCIIRenderer/ASCIIR.git","type":"git"},"_npmVersion":"10.9.2","description":"A powerful React component for converting images to beautiful ASCII art with customizable settings","directories":{},"sideEffects":false,"_nodeVersion":"22.17.1","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.0","react":"^19.2.3","react-dom":"^19.2.3","typescript":"~5.8.2","@types/node":"^22.14.0","@types/react":"^18.2.0","lucide-react":"^0.562.0","vite-plugin-dts":"^4.5.0","@types/react-dom":"^18.2.0","react-router-dom":"^7.12.0","@vitejs/plugin-react":"^5.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/asciir_1.0.3_1768292498302_0.37429561110644927","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@asciirender/asciir","version":"1.0.4","description":"A powerful React component for converting images to beautiful ASCII art with customizable settings","author":{"name":"dvinay"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ASCIIRenderer/ASCIIR.git"},"homepage":"https://asciir.vercel.app","bugs":{"url":"https://github.com/ASCIIRenderer/ASCIIR/issues"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"keywords":["ascii","ascii-art","image-processing","react","react-component","image-to-ascii","text-art","canvas","svg","typescript","image-converter"],"type":"module","main":"./dist/asciir.umd.cjs","module":"./dist/asciir.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/asciir.js","require":"./dist/asciir.umd.cjs"}},"sideEffects":false,"scripts":{"dev":"vite --config vite.demo.config.ts","build":"npm run build:lib","build:lib":"tsc -p tsconfig.lib.json && vite build --config vite.config.ts","build:demo":"vite build --config vite.demo.config.ts","preview":"vite preview --config vite.demo.config.ts","typecheck":"tsc --noEmit","prepublishOnly":"npm run build:lib","size":"npm run build:lib && npx size-limit"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@types/node":"^22.14.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^5.0.0","lucide-react":"^0.562.0","react":"^19.2.3","react-dom":"^19.2.3","react-router-dom":"^7.12.0","typescript":"~5.8.2","vite":"^6.2.0","vite-plugin-dts":"^4.5.0"},"engines":{"node":">=18.0.0"},"_id":"@asciirender/asciir@1.0.4","gitHead":"f7a21cc8ef61ba25ba3da3a35b6de3b5bbcf4884","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NpsqLt90+Uf8AiNfNEv+Rkzc+iTpRln6NDVLGyO8+q1KjbZojIarOv3dE8EkPEylUt4DpMmQBXlto2MCvLgnzg==","shasum":"2de2a013375781732e40fc993a7bcaf5edb36056","tarball":"https://registry.npmjs.org/@asciirender/asciir/-/asciir-1.0.4.tgz","fileCount":6,"unpackedSize":42999,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDOA4cmnOkcgUm83Bm/eKToToK5Mygj4FRCFapAOnAMDgIhAITuReYK/o59OyuCjZq/536teOSc8/aZ0o+baxVkNDxo"}]},"_npmUser":{"name":"dvinay","email":"vinaydangodra28@gmail.com"},"directories":{},"maintainers":[{"name":"dvinay","email":"vinaydangodra28@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/asciir_1.0.4_1768294831042_0.7980623993863134"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-13T07:06:30.107Z","modified":"2026-01-13T09:00:31.417Z","1.0.2":"2026-01-13T07:06:30.390Z","1.0.3":"2026-01-13T08:21:38.452Z","1.0.4":"2026-01-13T09:00:31.198Z"},"bugs":{"url":"https://github.com/ASCIIRenderer/ASCIIR/issues"},"author":{"name":"dvinay"},"license":"MIT","homepage":"https://asciir.vercel.app","keywords":["ascii","ascii-art","image-processing","react","react-component","image-to-ascii","text-art","canvas","svg","typescript","image-converter"],"repository":{"type":"git","url":"git+https://github.com/ASCIIRenderer/ASCIIR.git"},"description":"A powerful React component for converting images to beautiful ASCII art with customizable settings","maintainers":[{"name":"dvinay","email":"vinaydangodra28@gmail.com"}],"readme":"# ASCIIR\n\n<p align=\"center\">\n  <img src=\"https://img.shields.io/npm/v/@asciirender/asciir?color=blue&label=npm\" alt=\"npm version\" />\n  <img src=\"https://img.shields.io/npm/dm/@asciirender/asciir?color=green\" alt=\"npm downloads\" />\n  <img src=\"https://img.shields.io/bundlephobia/minzip/@asciirender/asciir?color=orange\" alt=\"bundle size\" />\n  <img src=\"https://img.shields.io/github/license/ASCIIRenderer/ASCIIR?color=purple\" alt=\"license\" />\n  <img src=\"https://img.shields.io/npm/types/@asciirender/asciir?color=blue\" alt=\"TypeScript\" />\n</p>\n\n<p align=\"center\">\n  <strong>A powerful React component for converting images to beautiful ASCII art</strong>\n</p>\n\n<p align=\"center\">\n  <a href=\"#-installation\">Installation</a> •\n  <a href=\"#-quick-start\">Quick Start</a> •\n  <a href=\"#-api-reference\">API</a> •\n  <a href=\"#-examples\">Examples</a>\n</p>\n\n---\n\n## ✨ Features\n\n- 🎨 **Multiple Color Modes** - Monochrome, Original colors, or custom palettes\n- 📝 **Custom Character Sets** - Use preset or custom character ramps\n- 🎛️ **Image Filters** - Brightness, contrast, and saturation controls\n- 🔲 **Dithering** - Floyd-Steinberg dithering for better gradients\n- 📦 **Multiple Output Formats** - HTML, SVG, or Canvas\n- 💾 **Export Options** - Download as PNG, SVG, or TXT\n- 🎯 **TypeScript** - Full type definitions included\n- ⚡ **Lightweight** - ~5KB gzipped, zero runtime dependencies\n\n## 📦 Installation\n\n```bash\nnpm install @asciirender/asciir\n```\n\n```bash\nyarn add @asciirender/asciir\n```\n\n```bash\npnpm add @asciirender/asciir\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport { ASCIIR } from '@asciirender/asciir';\n\nfunction App() {\n  return (\n    <ASCIIR \n      src=\"/path/to/image.jpg\"\n      config={{ \n        resolutionWidth: 100,\n        colorMode: 'original' \n      }}\n    />\n  );\n}\n```\n\n## 📖 API Reference\n\n### `<ASCIIR />` Component\n\nThe main component for rendering ASCII art.\n\n```tsx\nimport { ASCIIR, useASCIIRender } from '@asciirender/asciir';\n\nfunction App() {\n  const asciiRef = useASCIIRender();\n  \n  return (\n    <div>\n      <ASCIIR \n        ref={asciiRef}\n        src={imageSource}\n        config={config}\n        output=\"html\"\n        onGenerate={(result) => console.log(result)}\n        onError={(error) => console.error(error)}\n      />\n      \n      <button onClick={() => asciiRef.current?.downloadPNG()}>\n        Download PNG\n      </button>\n    </div>\n  );\n}\n```\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `src` | `string \\| File \\| Blob \\| HTMLImageElement` | Required | Image source |\n| `config` | `Partial<ASCIIRenderConfig>` | `{}` | Configuration overrides |\n| `output` | `'html' \\| 'svg' \\| 'canvas'` | `'html'` | Output format |\n| `onGenerate` | `(result: ProcessingResult) => void` | - | Callback when ASCII is generated |\n| `onError` | `(error: Error) => void` | - | Error callback |\n| `className` | `string` | - | Container CSS class |\n| `style` | `CSSProperties` | - | Container inline styles |\n| `autoFit` | `boolean` | `false` | Auto-fit to container width |\n\n### Configuration Options\n\n```typescript\ninterface ASCIIRenderConfig {\n  resolutionWidth: number;      // Width in characters (default: 150)\n  characterSet: string;         // Character ramp (default: \" .:-=+*#%@\")\n  inverted: boolean;            // Invert character ramp (default: false)\n  contrastStretch: boolean;     // Auto contrast (default: true)\n  fontColor: string;            // Text color for mono mode (default: \"#FFFFFF\")\n  backgroundColor: string;      // Background color (default: \"#242424\")\n  lineHeight: number;           // Line height multiplier (default: 1.0)\n  scaleRatio: number;           // Vertical scale ratio (default: 0.55)\n  fontSize: number;             // Font size in px (default: 12)\n  transparentBackground: boolean; // Transparent bg (default: false)\n  dithering: boolean;           // Enable dithering (default: false)\n  colorMode: 'mono' | 'original' | 'palette'; // Color mode (default: 'mono')\n  fontFamily: string;           // Font family (default: \"'Fira Code', monospace\")\n  exportScale: number;          // PNG export scale (default: 2)\n  fillTransparency: boolean;    // Fill transparent areas (default: true)\n  brightness: number;           // Brightness 0-3 (default: 1.0)\n  contrast: number;             // Contrast 0-3 (default: 1.0)\n  saturation: number;           // Saturation 0-3 (default: 1.0)\n  colorPalette: string[];       // Color palette for palette mode\n}\n```\n\n### Ref Methods\n\n```typescript\ninterface ASCIIRenderRef {\n  getResult(): ProcessingResult | null;\n  downloadPNG(filename?: string): void;\n  downloadSVG(filename?: string): void;\n  downloadTXT(filename?: string): void;\n  copyToClipboard(): Promise<void>;\n  getCanvas(scale?: number): HTMLCanvasElement | null;\n  getSVGString(): string | null;\n  refresh(): void;\n}\n```\n\n### Presets\n\n```tsx\nimport { \n  CHAR_SETS,      // Character set presets\n  FONTS,          // Font presets\n  PALETTE_PRESETS // Color palette presets\n} from '@asciirender/asciir';\n\n// Character sets\nCHAR_SETS.default        // \" .:-=+*#%@\"\nCHAR_SETS.standard_short // \"@%#*+=-:. \"\nCHAR_SETS.blocks         // \"█▓▒░ \"\nCHAR_SETS.binary         // \"01 \"\nCHAR_SETS.matrix         // Matrix/Katakana style\n\n// Fonts\nFONTS.fira      // 'Fira Code', monospace\nFONTS.vt323     // 'VT323', monospace (retro)\nFONTS.roboto    // 'Roboto Mono', monospace\n\n// Color palettes\nPALETTE_PRESETS.cga       // CGA colors\nPALETTE_PRESETS.gameboy   // GameBoy green\nPALETTE_PRESETS.vaporwave // Vaporwave aesthetic\n```\n\n### Utility Functions\n\nFor advanced usage, you can use the core functions directly:\n\n```tsx\nimport { \n  generateAscii,\n  generateCanvasFromAscii,\n  generateSVG,\n  generateHTML,\n  loadImage \n} from '@asciirender/asciir';\n\n// Load and process an image\nconst img = await loadImage('/path/to/image.jpg');\nconst result = generateAscii(img, config);\n\n// Generate outputs\nconst svg = generateSVG(result, config);\nconst html = generateHTML(result, config);\nconst canvas = generateCanvasFromAscii(result, config, 2);\n```\n\n## 📋 Examples\n\n### Basic Usage\n\n```tsx\n<ASCIIR src=\"/image.jpg\" />\n```\n\n### Colored ASCII Art\n\n```tsx\n<ASCIIR \n  src=\"/image.jpg\"\n  config={{\n    colorMode: 'original',\n    resolutionWidth: 120\n  }}\n/>\n```\n\n### Custom Palette\n\n```tsx\nimport { ASCIIR, PALETTE_PRESETS } from '@asciirender/asciir';\n\n<ASCIIR \n  src=\"/image.jpg\"\n  config={{\n    colorMode: 'palette',\n    colorPalette: PALETTE_PRESETS.vaporwave\n  }}\n/>\n```\n\n### With Downloads\n\n```tsx\nimport { ASCIIR, useASCIIRender } from '@asciirender/asciir';\n\nfunction App() {\n  const ref = useASCIIRender();\n  \n  return (\n    <>\n      <ASCIIR ref={ref} src=\"/image.jpg\" />\n      <button onClick={() => ref.current?.downloadPNG('my-art.png')}>\n        Save as PNG\n      </button>\n    </>\n  );\n}\n```\n\n### File Upload\n\n```tsx\nimport { useState } from 'react';\nimport { ASCIIR } from '@asciirender/asciir';\n\nfunction App() {\n  const [file, setFile] = useState<File | null>(null);\n  \n  return (\n    <>\n      <input \n        type=\"file\" \n        accept=\"image/*\"\n        onChange={(e) => setFile(e.target.files?.[0] || null)}\n      />\n      {file && <ASCIIR src={file} />}\n    </>\n  );\n}\n```\n\n## 🛠️ Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/ASCIIRenderer/ASCIIR.git\ncd ASCIIR\n\n# Install dependencies\nnpm install\n\n# Run the demo app\nnpm run dev\n\n# Build the library\nnpm run build:lib\n\n# Type checking\nnpm run typecheck\n```\n\n## 📦 Building for Production\n\n```bash\n# Build library only (for npm publish)\nnpm run build:lib\n\n# Build demo application\nnpm run build:demo\n```\n\n## 📝 License\n\nMIT © Vinay\n\n## 🌟 Show Your Support\n\nGive a ⭐️ if this project helped you!\n","readmeFilename":"README.md"}