{"id":43144526,"url":"https://github.com/humanbydefinition/textmode.js","last_synced_at":"2026-02-06T21:04:57.171Z","repository":{"id":304681799,"uuid":"1019649473","full_name":"humanbydefinition/textmode.js","owner":"humanbydefinition","description":"textmode.js is a lightweight creative coding library for creating real-time ASCII art on the web.","archived":false,"fork":false,"pushed_at":"2026-01-31T21:30:39.000Z","size":2225,"stargazers_count":82,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-01T08:59:27.958Z","etag":null,"topics":["art","ascii","canvas","creative-coding","design","graphics","petscii","textmode","webgl"],"latest_commit_sha":null,"homepage":"https://code.textmode.art","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/humanbydefinition.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"humanbydefinition","patreon":null,"open_collective":null,"ko_fi":"humanbydefinition","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":null,"thanks_dev":null,"custom":["https://code.textmode.art/support"]}},"created_at":"2025-07-14T16:48:48.000Z","updated_at":"2026-01-31T21:06:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"f6fd9832-74c3-4dd7-b426-d8ef8b3013f6","html_url":"https://github.com/humanbydefinition/textmode.js","commit_stats":null,"previous_names":["humanbydefinition/textmode.js"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/humanbydefinition/textmode.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanbydefinition%2Ftextmode.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanbydefinition%2Ftextmode.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanbydefinition%2Ftextmode.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanbydefinition%2Ftextmode.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/humanbydefinition","download_url":"https://codeload.github.com/humanbydefinition/textmode.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/humanbydefinition%2Ftextmode.js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29175852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T20:14:21.878Z","status":"ssl_error","status_checked_at":"2026-02-06T20:14:21.443Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["art","ascii","canvas","creative-coding","design","graphics","petscii","textmode","webgl"],"created_at":"2026-01-31T23:26:07.951Z","updated_at":"2026-02-06T21:04:57.152Z","avatar_url":"https://github.com/humanbydefinition.png","language":"TypeScript","funding_links":["https://github.com/sponsors/humanbydefinition","https://ko-fi.com/humanbydefinition","https://code.textmode.art/support","https://ko-fi.com/V7V8JG2FY"],"categories":["Libraries"],"sub_categories":["To draw using canvas"],"readme":"# textmode.js (✿◠‿◠)\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg alt=\"textmodejs_banner\" src=\"https://github.com/user-attachments/assets/f03c2d74-7dc3-45cf-a0a5-043f9438231e\" /\u003e\n\n| [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/) [![WebGL](https://img.shields.io/badge/WebGL1-990000?logo=webgl\u0026logoColor=white)](https://www.khronos.org/webgl/) [![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite\u0026logoColor=white)](https://vitejs.dev/) | [![docs](https://img.shields.io/badge/docs-vitepress-646cff?logo=vitepress\u0026logoColor=white)](https://code.textmode.art/) [![Discord](https://img.shields.io/discord/1357070706181017691?color=5865F2\u0026label=Discord\u0026logo=discord\u0026logoColor=white)](https://discord.gg/sjrw8QXNks) | [![ko-fi](https://shields.io/badge/ko--fi-donate-ff5f5f?logo=ko-fi)](https://ko-fi.com/V7V8JG2FY) [![GitHub-sponsors](https://img.shields.io/badge/sponsor-30363D?logo=GitHub-Sponsors\u0026logoColor=#EA4AAA)](https://github.com/sponsors/humanbydefinition) |\n|:-------------|:-------------|:-------------|\n\n\u003c/div\u003e\n\ntextmode.js is a free, lightweight, and framework-agnostic creative-coding library for real‑time ASCII and textmode graphics in the browser. It combines a grid‑based API with a modern [`WebGL2`](https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext) pipeline, multiple render targets, and aggressive instanced rendering to deliver smooth, high‑performance rendering.\n\nThe library is designed to be easy to use and accessible to developers of all skill levels. Whether you're a seasoned developer or just starting out, `textmode.js` provides a simple and intuitive API that makes it easy to create stunning textmode art and animations.\n\n## Features\n\n- Real‑time* ASCII/textmode rendering with a simple drawing API\n- Font system with runtime font loading and dynamic sizing *(supports TTF/OTF/WOFF)*\n- Dynamic layering system with blend modes and opacity for multi‑layered textmode scenes\n- Filter system with built-in filters and support for custom filter shaders\n- Load images and videos as sources and render them in customizable textmode styles\n- Author custom filter shaders in [`GLSL ES 3.00`](https://registry.khronos.org/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf) for advanced effects\n- Flexible exporting: TXT, SVG, raster images *(PNG/JPG/WebP)*, animated GIFs, and video *(WebM)* via [`textmode.export.js`](https://github.com/humanbydefinition/textmode.export.js)\n- Animation loop control: `frameRate`, `loop`/`noLoop`, `redraw`, `frameCount`, etc.\n- Framework-agnostic: Use `textmode.js` with any canvas-based framework or library\n- Zero dependencies, written in TypeScript, with comprehensive type definitions\n\n\u003e [!NOTE]\n\u003e *Performance depends on the complexity of your scene and device capabilities. Consider authoring filter shaders for complex effects at low cost.\n\n## Try it online first\n\nBefore installing anything locally, you can try `textmode.js` directly in your browser using our dedicated web editor:\n\n🌐 **[editor.textmode.art](https://editor.textmode.art)**\n\nThe web editor is specifically designed for `textmode.js` and provides:\n\n- ✨ **Zero setup required** - Start coding immediately\n- 🚀 **Live preview** - See your creations in real-time  \n- 💾 **Save \u0026 share** - Export your sketches and share with others\n- 📚 **Built-in examples** - Learn from interactive examples\n- 🔧 **Full API access** - All `textmode.js` features available\n\nThe web editor is perfect for learning, prototyping, or creating quick experiments without any local setup!\n\n## Installation\n\n### Prerequisites\n\nTo get started with `textmode.js`, you'll need:\n\n- A **modern web browser** with `WebGL2` support *(Chrome, Firefox, Safari, Edge, etc.)*\n- A [`\u003ccanvas\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) in your project *(optional, otherwise the library will create one for you)*\n- [Node.js 16+](https://nodejs.org/) and `npm` *(optional, for ESM installation)*\n\n\u003e [!IMPORTANT]\n\u003e `textmode.js` is currently fully dependent on `WebGL2`. Ensure your target browsers support it. You can check compatibility on [caniuse.com](https://caniuse.com/webgl2).\n\n### Importing `textmode.js`\n\n#### UMD\n\nTo use `textmode.js` in a UMD environment, download the latest `umd` build from the [**GitHub releases page**](https://github.com/humanbydefinition/textmode.js/releases/) or import it directly from a CDN like [**jsDelivr**](https://www.jsdelivr.com/package/npm/textmode.js). The library is distributed as a single JavaScript file, which you can include in your project by adding the following script tag to your HTML file:\n\n```html\n\u003c!-- index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003etextmode.js sketch\u003c/title\u003e\n\n    \u003c!-- Standard bundle (with embedded UrsaFont) --\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/textmode.js@latest/dist/textmode.umd.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cscript src=\"sketch.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n// sketch.js\nconst t = textmode.create({\n    width: window.innerWidth,\n    height: window.innerHeight,\n    fontSize: 16,\n    frameRate: 60\n});\n\nt.setup(() =\u003e {\n    // Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')\n});\n\nt.draw(() =\u003e {\n    t.background(32); // Dark gray background\n\n    t.char('A');\n\n    // Set drawing color to red\n    t.charColor(255, 0, 0);\n\n    // Draw a rectangle of 'A's in the top-left quarter\n    t.translate(-t.grid.cols / 4, -t.grid.rows / 4);\n    t.rect(t.grid.cols / 2, t.grid.rows / 2);\n\n    // ...add your drawing code here!\n});\n\nt.windowResized(() =\u003e {\n    t.resizeCanvas(window.innerWidth, window.innerHeight);\n});\n```\n\n#### ESM\n\nTo use `textmode.js` in an ESM environment, you can install it via `npm`:\n\n```bash\nnpm install textmode.js\n```\n\nThen, you can import it in your JavaScript or TypeScript files:\n\n```html\n\u003c!-- index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003etextmode.js sketch\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cscript type=\"module\" src=\"./sketch.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```javascript\n// sketch.js\n// Standard bundle (with embedded UrsaFont)\nimport { textmode } from 'textmode.js';\n\nconst t = textmode.create({\n    width: window.innerWidth,\n    height: window.innerHeight,\n    fontSize: 16,\n    frameRate: 60\n});\n\nt.setup(() =\u003e {\n    // Optional setup code here (e.g., load fonts/shaders, initialize variables that access 't')\n});\n\nt.draw(() =\u003e {\n    t.background(32); // Dark gray background\n\n    t.char('A');\n\n    // Set drawing color to red\n    t.charColor(255, 0, 0);\n\n    // Draw a rectangle of 'A's in the top-left quarter\n    t.translate(-t.grid.cols / 4, -t.grid.rows / 4);\n    t.rect(t.grid.cols / 2, t.grid.rows / 2);\n\n    // ...add your drawing code here!\n});\n\nt.windowResized(() =\u003e {\n    t.resizeCanvas(window.innerWidth, window.innerHeight);\n});\n```\n\n## Next steps\n\nNow that you have `textmode.js` set up, you can start creating your textmode art projects! Going forward, here are some resources to help you get the most out of the library:\n\n📚 **[Visit the Official Documentation](https://code.textmode.art/)** for detailed guides, interactive examples, complete API reference, tips and tricks, and much more to unlock the full potential of `textmode.js` in your creative coding projects.\n\n🎨 **[Try the Web Editor](https://editor.textmode.art)** to experiment with `textmode.js` without setting up a local environment.\n\n## Acknowledgements\n\n`textmode.js` uses a custom-made TypeScript rewrite and minified version of [`Typr.js`](https://github.com/photopea/Typr.js) by [**Photopea**](https://github.com/photopea) for font loading and parsing, containing only the necessary components for our use case. `Typr.js` is licensed under the [**MIT License**](https://github.com/photopea/Typr.js/blob/main/LICENSE).\n\n`textmode.js` ships with [`UrsaFont`](https://ursafrank.itch.io/ursafont) as the default font, created by [**UrsaFrank**](https://ursafrank.itch.io/). This font is available under the [**CC0 (Creative Commons Zero) license**](https://creativecommons.org/publicdomain/zero/1.0/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbydefinition%2Ftextmode.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhumanbydefinition%2Ftextmode.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhumanbydefinition%2Ftextmode.js/lists"}