{"id":20977363,"url":"https://github.com/ernestmarcinko/typewriter","last_synced_at":"2025-10-11T10:07:54.802Z","repository":{"id":167523097,"uuid":"642934809","full_name":"ernestmarcinko/typewriter","owner":"ernestmarcinko","description":"TypeWriter script written in native Javascript (ES6)","archived":false,"fork":false,"pushed_at":"2023-05-24T21:09:38.000Z","size":28,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-28T21:49:02.565Z","etag":null,"topics":["animation","effect","effects","script","typewriter"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ernestmarcinko.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-05-19T17:26:15.000Z","updated_at":"2024-06-19T08:54:51.000Z","dependencies_parsed_at":"2023-10-16T04:58:50.808Z","dependency_job_id":null,"html_url":"https://github.com/ernestmarcinko/typewriter","commit_stats":null,"previous_names":["anag0/typewriter","ernestmarcinko/typewriter"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/ernestmarcinko/typewriter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestmarcinko%2Ftypewriter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestmarcinko%2Ftypewriter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestmarcinko%2Ftypewriter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestmarcinko%2Ftypewriter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ernestmarcinko","download_url":"https://codeload.github.com/ernestmarcinko/typewriter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ernestmarcinko%2Ftypewriter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279006834,"owners_count":26084203,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["animation","effect","effects","script","typewriter"],"created_at":"2024-11-19T04:58:30.049Z","updated_at":"2025-10-11T10:07:54.737Z","avatar_url":"https://github.com/ernestmarcinko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TypeWriter javascript effect\n\nA super simple and very small TypeWriter javascript library, only about ~2KB.\n\n[Live examples](https://ernestmarcinko.com/typewriter/) | [YouTube](https://www.youtube.com/watch?v=SKs-_MSlSsE) | [npm](https://www.npmjs.com/package/@anag0/typewriter)\n\n## Installation\nUse npm or yarn to install TypeWriter with a single command\n\n```shell\n# with npm\nnpm i @anag0/typewriter\n\n# with yarn\nyarn add @anag0/typewriter\n```\n## Via CDN\n\nIf you prefer a build, use the CDN version\n\n```html\n\u003cscript src=\"https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n```javascript\n// Choose a node\nconst element = document.querySelectorAll('p')[0];\n\n// Do the thing\nconst typeWriter = new TypeWriter(element, {\n    keepBlinking: false\n});\ntypeWriter.wait(2000)\n        .write('Hi!')\n        .delete(3)\n        .write('This is a typewriter script!')\n        .wait(2000)\n        .config({pauseMin: 50, pauseMax:60})\n        .wipe()\n        .write('You can change the speed.');\n```  \n\n## Options\n\n| Name | Type | Default value | Description |\n| --- | --- | --- | --- |\n| cursor | String | '\\|' (Pipe) | The blinking cursor |\n| pauseMin | Integer | 170 | Mininum wait time before the next character |\n| pauseMax | Integer | 230 | Maximum wait time before the next character |\n| keepBlinking | Bool | true | Should the cursor remain after the text is printed |\n| autoStart | Bool | true | Should the tasks start right away. If false then use the ``start()`` method to start the tasks |\n| className | String | typewriter | The class name to be used for the element |\n| injectStyles | Bool | true | Should the typewriter CSS be injected to the header |\n\n## Methods\n\n| Method | Params | Description |\n| --- | --- | --- |\n| write | ``String`` Text to write | Writes a text to the node innerHTML property |\n| delete | ``Int`` Number of Characters to delete | Deletes number of characters a from the node innerHTML property |\n| wait | ``Int`` Milliseconds to wait | Waits for N milliseconds before continuing with the next task |\n| wipe | - | Deletes everything from the target node innerHTML property |\n| config | ``Object`` Configuration key =\u003e value pairs | Changes the configuration |\n\n## Callback functions\nThese are added via the arguments (options).\n\n```javascript\nconst typeWriter = new TypeWriter(node, {\n    onFinish: (node, params)=\u003e{\n        console.log(node, params);\n    },\n    onStart: (node, params)=\u003e{\n        console.log(node, params);\n    },\n    onTask: (task, node, params)=\u003e{\n        console.log(task, node, params);\n    },\n});\n``` \n\n| Name | Arguments | Description |\n| --- | --- | --- |\n| onStart | ``Element`` The Node, ``Object`` Options | Executes when the ``start()`` function is triggered |\n| onFinish | ``Element`` The Node, ``Object`` Options | Executes when no more tasks left in the queue |\n| onTask | ``Object`` Task, ``Element`` The Node, ``Object`` Options | Executes when a task is about to be executed from the queue |\n\n## Examples\n\n### Basic Usage\n\nAppends a text to the first paragraph node found\n\n```javascript\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);\ntypeWriter.write('This is a typewriter script!')\n```  \n\nDeletes the node contents after waiting 2 seconds, then types in the new text:\n\n```javascript\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0]);\ntypeWriter.wait(2000).wipe().write('This is a typewriter script!')\n```  \n\n### Advanced Usage\n\nDeletes the node contents after waiting 2 seconds, then types in the new text, deletes 7 characters, then changes the typing speed, then writes a new text.\n\n```javascript\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\n    pauseMin: 100,\n    pauseMax: 150,\n    keepBlinking: false\n});\ntypeWriter.wait(2000)\n    .wipe()\n    .write('This is a typewriter script!')\n    .wait(2000).\n    .delete(7)\n    .config({pauseMin: 50, pauseMax:100})\n    .write('example!');\n```  \n\n### Custom class name \u0026 styles injection\n\nBy default the styles are injected to the document header. You can skip that, and add the styles manually from the ``typewriter.css`` file, or:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@anag0/typewriter@latest/dist/typewriter.css\"\u003e\n```\n\nIn that case the ``injectStyles`` option has to be ``false``:\n\n```javascript\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\n    injectStyles: false\n});\n```  \n\nYou can also specify a custom wrapper class name:\n\n```javascript\nconst typeWriter = new TypeWriter(document.querySelectorAll('p')[0], {\n    className: \"myCustomTypewriter\"\n});\n```  \n\nIf injectStyles is enabled, the className is automatically changed within the injected styles.\n\n### Chaining multiple TypeWriters via callbacks\n\nUsing the ``onFinish`` and ``autoStart`` options you can chain the typewriter scripts together, so the next one is always started after the previous one finishes.\n\n```javascript\nconst node1 = document.querySelector('#node1');\nconst node2 = document.querySelector('#node2');\nconst node3 = document.querySelector('#node3');\n\nconst typeWriter1 = new TypeWriter(node1, {\n    autoStart: false,\n    keepBlinking: false,\n    onFinish: (node, params)=\u003e{\n        typeWriter2.start()\n    },\n});\nconst typeWriter2 = new TypeWriter(node2, {\n    autoStart: false,\n    keepBlinking: false,\n    onFinish: ()=\u003e{\n        typeWriter3.start()\n    }\n});\nconst typeWriter3 = new TypeWriter(node3, {\n    autoStart: false,\n    keepBlinking: false\n});\n\ntypeWriter1.write('This is the first typewriter writing..').start();\ntypeWriter2.write('..this is the second one..');\ntypeWriter3.write('..and this is the third.');\n``` ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernestmarcinko%2Ftypewriter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fernestmarcinko%2Ftypewriter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fernestmarcinko%2Ftypewriter/lists"}