{"id":15690188,"url":"https://github.com/laudep/code-gif-generator","last_synced_at":"2025-06-27T15:07:08.891Z","repository":{"id":48271797,"uuid":"293577356","full_name":"laudep/code-gif-generator","owner":"laudep","description":"NPM package to generate scrolling GIFs from code snippets","archived":false,"fork":false,"pushed_at":"2021-08-03T19:45:14.000Z","size":15265,"stargazers_count":5,"open_issues_count":16,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-27T15:05:59.974Z","etag":null,"topics":["code-snippets","gif"],"latest_commit_sha":null,"homepage":"https://codetogif.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laudep.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-07T16:23:40.000Z","updated_at":"2024-08-29T10:04:01.000Z","dependencies_parsed_at":"2022-09-04T14:40:22.526Z","dependency_job_id":null,"html_url":"https://github.com/laudep/code-gif-generator","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/laudep/code-gif-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laudep%2Fcode-gif-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laudep%2Fcode-gif-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laudep%2Fcode-gif-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laudep%2Fcode-gif-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laudep","download_url":"https://codeload.github.com/laudep/code-gif-generator/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laudep%2Fcode-gif-generator/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262279106,"owners_count":23286548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-snippets","gif"],"created_at":"2024-10-03T18:08:11.825Z","updated_at":"2025-06-27T15:07:08.869Z","avatar_url":"https://github.com/laudep.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"250\" src=\"https://raw.githubusercontent.com/laudep/code-gif-generator/master/docs/img/generating.gif\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e code-gif-generator \u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eGenerate scrolling GIFs from code snippets 🚀\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href='https://www.npmjs.com/package/code-gif-generator'\u003e\n    \u003cimg src='https://img.shields.io/npm/v/code-gif-generator.svg' alt='npm version'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://codecov.io/gh/laudep/code-gif-generator'\u003e\n    \u003cimg src='https://codecov.io/gh/laudep/code-gif-generator/branch/master/graph/badge.svg' alt='code coverage'\u003e\n  \u003c/a\u003e\n  \u003ca href='https://github.com/laudep/code-gif-generator/actions'\u003e\n    \u003cimg src='https://img.shields.io/github/workflow/status/laudep/code-gif-generator/test' alt='CI status'\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Description\nCode-gif-generator is a tool for generating animated GIF files from code snippets.  \nUse them to spice up your blog posts, documentation, or README files.  \nBuilt on top of the CodeMirror editor, more than 150 programming languages are supported.\n\n- [Online demo](#online-demo)\n- [Installation](#installation)\n- [Usage](#usage)\n  * [Minimal example](#minimal-example)\n    + [Code](#code)\n    + [Output](#output)\n  * [Gif from this README file](#gif-from-this-readme-file)\n    + [Code](#code-1)\n    + [Output](#output-1)\n- [API](#api)\n  * [generateGif](#api)\n  * [Gif.save](#--gif--)\n  * [Gif.getBuffer](#--gif--)\n  * [Gif.getCompressedBuffer](#--gif--)\n  * [Presets](#presets)\n    + [default](#default)\n    + [fast](#fast)\n    + [smooth](#smooth)\n    + [ultra](#ultra)\n- [Built with](#built-with)\n- [License](#license)\n\n## Online demo\n\nCheck out the online demo:  \n[codetogif.io](https://codetogif.io/)\n\n## Installation\n\n```sh\nnpm install --save code-gif-generator\n```\n\n## Usage\n\n### Minimal example\n\n#### Code\n\n```js\nconst generateGif = require('code-gif-generator');\n\ngenerateGif(`console.log('Hello World!')`).then(gif =\u003e gif.save());\n```\n\n#### Output\n\nA single frame GIF in the current working directory:  \n\n![Screenshot: 'Hello World!](https://raw.githubusercontent.com/laudep/code-gif-generator/master/docs/img/helloworldjs.gif)\n\n\n### Gif from this README file\n\n#### Code\n\n```js\nconst generateGif = require('code-gif-generator');\n\nconst createReadmeGif = async () =\u003e {\n   // get the content of the README file\n   const readmeContent =  await fs.promises.readFile('../README.md', 'utf8');\n   // create a GIF from the readme file\n   const gif = await generateGif(readmeContent, {\n    preset: 'ultra',   // scroll slowly, up to 250 frames\n    mode: 'markdown',   // pass the snippet programming language\n    theme: 'monokai',   // theme for the code editor\n    lineNumbers: false, // hide line numbers\n  });\n   // save the GIF in the docs/img folder\n   const gifPath = await gif.save('readme-content', path.resolve(__dirname, '../docs/img'));\n   return gifPath;\n}\n\ncreateReadmeGif().then(gifPath =\u003e console.log(`Gif saved: ${gifPath}`));\n```\n\n#### Output\n\nA scrolling GIF in the docs/img folder:  \n\n\u003cimg alt=\"Screenshot: 'README.md'\" src=\"https://github.com/laudep/code-gif-generator/blob/master/docs/img/readme-content.gif?raw=true\" width=\"45%\"\u003e\n\n## API\n\n### generateGif(`code`: string, `options`: object): *Promise‹[Gif](#gif)›*\n\nGenerate an animated GIF for a code snippet\n\n**Parameters:**\n\n▪ **code**: *string*\n\nthe code snippet\n\n▪ **options**: *object*\n\nName | Type | Default | Description |\n------ | ------ | ------ | ------ |\n`mode` | string | \"javascript\" | code language |\n`theme` | string | \"material-darker\" | code editor theme |\n`preset` | string | \"default\" | [GIF preset](#presets) |\n`lineNumbers` | boolean | true | whether to show line numbers |\n\n**Returns:** *Promise‹[Gif](#gif)›*\n\nthe Gif instance object\n\n___\n\n### **Gif**\n\n### Gif.save(`filename`: string, `outDir`: string, `compression?`: undefined | \"lossy\" | \"losless\"): *Promise‹string›*\n\nSave the GIF to the filesystem\n\n**Parameters:**\n\nName | Type | Default | Description |\n------ | ------ | ------ | ------ |\n`filename` | string | mode + timestamp | the filename for the gif (excluding extension) |\n`outDir` | string | current working directory | the output directory for the GIF |\n`compression?` | undefined \u0026#124; \"lossy\" \u0026#124; \"losless\" | - | compression to be used on the file |\n\n**Returns:** *Promise‹string›*\n\nthe path of the saved GIF\n\n___\n\n### Gif.getBuffer(): *Promise‹Buffer›*\n\nGet the GIF's buffer\n\n**Returns:** *Promise‹Buffer›*\n\nthe buffer for the GIF\n\n___\n\n### Gif.getCompressedBuffer(`lossless`: boolean): *Promise‹Buffer›*\n\nGet the GIF's compressed buffer\n\n**Parameters:**\n\nName | Type | Description |\n------ | ------ | ------ |\n`lossless` | boolean | whether lossless compression is required |\n\n**Returns:** *Promise‹Buffer›*\n\nthe compressed buffer for the GIF\n\n___\n\n### Presets\n\nName | Scrolling |  Processing Time | Maximum Frames | Filesize | \n------ | ------ | ------ | ------ | ------ |\ndefault | default (10% each frame) |  default | 100 | small | \nfast | fast (20% each frame) |  fast | 100 | very small | \nsmooth | slow (2% each frame) |  slow | 100 | large | \nultra | slow (2% each frame) |  (very) slow | 250 | (very) large | \n\n## Built with\n- [CodeMirror](https://github.com/codemirror/CodeMirror)\n- [pngjs](https://github.com/lukeapage/pngjs)\n- [gif-encoder](https://github.com/twolfson/gif-encoder)\n- [Puppeteer](https://github.com/puppeteer/puppeteer)\n\n## License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaudep%2Fcode-gif-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaudep%2Fcode-gif-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaudep%2Fcode-gif-generator/lists"}