Typewriter Text

{"@webstudio/instance/v0.1":{"instanceSelector":["VF6LB8Cmeq9NCchUpD1jB","eqgjog-pen0nNwUu1XqpE","hSsF5ZgqtLN1vWsbeuCKY","0d_8XFxMpYgbl6jaTVGzJ"],"children":[{"type":"id","value":"VF6LB8Cmeq9NCchUpD1jB"}],"instances":[{"type":"instance","id":"VF6LB8Cmeq9NCchUpD1jB","component":"Box","label":"Typewriter Component","children":[{"type":"id","value":"evjbK2XMKMTMUJdxhYyA2"},{"type":"id","value":"qu21RkaSUY0JPA5l4Yh-f"}]},{"type":"instance","id":"evjbK2XMKMTMUJdxhYyA2","component":"Paragraph","children":[{"type":"text","value":"When you see this text, "},{"type":"id","value":"cn0tQXg_qP9b76avNC1Tu"}]},{"type":"instance","id":"cn0tQXg_qP9b76avNC1Tu","component":"Span","children":[{"type":"text","value":"magic happens.|innovation begins.|creativity flows.|ideas spark."}]},{"type":"instance","id":"qu21RkaSUY0JPA5l4Yh-f","component":"HtmlEmbed","label":"JS","children":[]}],"styleSourceSelections":[{"instanceId":"VF6LB8Cmeq9NCchUpD1jB","values":["UTVH1SbNdehGaMwfLLMEw"]},{"instanceId":"evjbK2XMKMTMUJdxhYyA2","values":["1ydy_KNjDG4jIvJGeVzF9"]}],"styleSources":[{"type":"local","id":"UTVH1SbNdehGaMwfLLMEw"},{"type":"local","id":"1ydy_KNjDG4jIvJGeVzF9"}],"breakpoints":[{"id":"2AQJrSP7PN3cvLY9d2vK-","label":"Base"}],"styles":[{"breakpointId":"2AQJrSP7PN3cvLY9d2vK-","styleSourceId":"UTVH1SbNdehGaMwfLLMEw","property":"fontSize","value":{"type":"unit","unit":"rem","value":2.5}}],"dataSources":[],"resources":[],"props":[{"id":"E-6YtUfjSZYd10AVAeRkB","instanceId":"qu21RkaSUY0JPA5l4Yh-f","name":"code","type":"string","value":"<script src=\"https://drevo.b-cdn.net/Library/Custom%20Components/Typewriter%20Text/typewriter-v1.1.js\" type=\"module\"></script>"},{"id":"DIEVlLRhpvO2O0PLU57ZB","instanceId":"qu21RkaSUY0JPA5l4Yh-f","name":"clientOnly","type":"boolean","value":true},{"id":"d0vf0DEJ9kw7Qf-wbkgvm","instanceId":"qu21RkaSUY0JPA5l4Yh-f","name":"executeScriptOnCanvas","type":"boolean","value":false},{"id":"8j_yOBP3pq12ANLYabXoC","instanceId":"cn0tQXg_qP9b76avNC1Tu","name":"dv-typewriter","type":"string","value":"auto duration-100 delete-100 before-delete-2000 before-type-100 loop"},{"id":"ED_O0pMe78UPxlveBftKk","instanceId":"qu21RkaSUY0JPA5l4Yh-f","name":"data-ws-show","type":"boolean","value":true}],"assets":[]}}

Typewriter Text

Instructions

Overview

Add dynamic typewriter text animations to your website with customizable speeds, delays, and trigger options.

Getting Started

Quick Start

Click the Copy Component button on the top of the page.
Paste the component into your Webstudio site.

Manual Start

Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Typewriter%20Text/typewriter-v1.1.js"></script>[/code-block]

Add the Attribute: Add the dv-typewriter attribute to any text element you want to animate: <p dv-typewriter="auto">First text|Second text|Third text</p>

typewriter text attributes

Customization Options

Trigger Types

Use these options in the dv-typewriter attribute:
- auto = Starts typing immediately when loaded (default)
- inview = Starts typing when scrolled into view
Example: dv-typewriter="inview"

Animation Settings

duration-X = Typing speed in milliseconds (default: 50)
delete-X = Deleting speed in milliseconds (default: 50)
before-delete-X = Delay before deleting text in milliseconds (default: 2000)
before-type-X = Delay before typing next text in milliseconds (default: 500)
loop = Continuously cycles through all text variations
Example: dv-typewriter="auto duration-100 delete-80 before-delete-3000 loop"

Text Content

Separate different text variations with the pipe character |
Example: <span dv-typewriter="auto">Hello|Bonjour|Hola</span>

Notes

The cursor blinks automatically during typing and pauses
Without the loop option, animation stops after typing the last text variation
For best results, keep text variations similar in length
Works with any text element including headings, paragraphs, and spans