htmltypist.js
Advanced tools
demonstration | GitHub | npm | donate | @craigbuckler | craigbuckler.com
typist.js shows a typing effect which can be applied to any HTML element or parent element.
Please use the code as you wish. Tweet me @craigbuckler if you find it useful and donate toward development if you use it commercially.
The page must load the CSS and JavaScript. It can be placed anywhere but, typically, the CSS is loaded in the <head> and the JS is loaded just before the closing </body> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.css">
<script src="https://cdn.jsdelivr.net/npm/htmltypist.js@1.0.1/dist/typist.js"></script>
CDN URLs are shown above but you can also npm i htmltypist.js to install via npm and use a bundler.
To apply a typing effect to any element, add a data-typist attribute:
<p data-typist="">Type and retype this paragraph forever!</p>
Pass a numeric value to the attribute to retype that number of times:
<p data-typist="1">This paragraph is typed once.</p>
When an element has two or more child elements, their text is typed in sequence:
<p data-typist="">
<span>This is typed first.</span>
<span>This is typed second.</span>
<span>This is typed third.</span>
</p>
"This is typed" is consistent across all sentences so it is never deleted.
typist.js can be dynamically applied in JavaScript by passing a single element in an option object:
new Typist({
element: document.getElementById('myelement')
});
The following options can be set as HTML5 attributes or JavaScript object options:
| HTML5 attribute | JS object option | description |
|---|---|---|
data-typist="" | element: node | set element(s) to type |
data-typist="N" | typist: N | repeat typing N times. Omit to repeat forever (the default). |
data-cursor="N" | cursor: N | set 0 for no cursor, 1 to show cursor until typing completes, or 2 to show cursor forever (default 1) |
data-delay-start="N" | delayStart: N | delay typing for N milliseconds or pass -1 to delay typing until the element is scrolled into view (default 0) |
data-delay-end="N" | delayEnd: N | pause for N milliseconds before typing the next item (default 2000) |
data-delay-type="N" | delayType: N | pause for N milliseconds between each character (default 80) |
data-delay-variance="N" | delayVariance: N | randomly vary the typing speed by N milliseconds (default 50 - each character therefore appears at 30ms to 130ms intervals) |
data-sequence="NAME" | delaySequence: NAME | elements with the same NAME are typed in order - each will complete one animation before the next element is typed |
The following named sequence example types each list item in turn when the first is scrolled into view:
<ul>
<li data-typist="1" data-sequence="mylist" data-delay-start="-1">item one</li>
<li data-typist="1" data-sequence="mylist">item two</li>
<li data-typist="1" data-sequence="mylist">item three</li>
</ul>
The following code types text three times using a delay of 300-500ms between characters once it appears in view:
<p
data-typist="3"
data-delay-start="-1"
data-delay-type="400"
data-delay-variance="100">This will be typed.</p>
This alternative is functionally identical:
<p id="myelement">This will be typed.</p>
<script>
new Typist({
element: document.getElementById('myelement'),
typist: 3,
delayStart: -1,
delayType: 400,
delayVariance: 100
});
</script>
typist.css is optional and only required for the cursor character and animation which can be configured as necessary.
A typist class is applied to all elements being typed, so global styles can be applied if required.
FAQs
web page typing effect animation
The npm package htmltypist.js receives a total of 7 weekly downloads. As such, htmltypist.js popularity was classified as not popular.
We found that htmltypist.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A large-scale campaign abused GitHub Actions in compromised repositories to exploit CVE-2026-41940 in cPanel and WHM and steal server credentials.
Security News
Five frontier LLMs generated the same nonexistent package names, leaving 53 available for potential slopsquatting across PyPI and npm.
Security News
The White House’s Gold Eagle Initiative aims to coordinate AI-discovered vulnerabilities, validate findings, and accelerate patching across critical software.