Typewriter Composer

To begin composing your "animation" type into the "Input" field. The "Preview" will then show your animation.If you plan to use multiple cursors, you should add them first.

If you plan to use multiple cursors, you should add them first.

Once you are done you can "export" your animation and begin styling it.

Back to the Typewriter documentation hub.


Whatever you type into the "Input" field will get recorded, this recording is the animation.

It will record: arrow keys, backspaces, mouse selections, and moving the cursor with the mouse.


Total time 0s

  • Add action

You can shift-click actions to select multiple actions, you can then merge actions, or remove actions in bulk.


    Click on the rows to change the active cursor, you can also use "shift+up or shift+down" to toggle activity via keyboard.

    You can also add a cursors via the shortcut code: "shift+esc".

    The initial position of a cursor must lie within the bounds of the initial text, in this case between 0 and 0.



    Configure the Typewriter here first.

    The text the typewriter will initialize with.

    Whether or not the animation starts playing as soon as the Typewriter is initialized. When not checked you must call play() to start the animation.

    By default the animation follows your typing speed. By entering a "fixed delay" the animation will happen at fixed intervals.

    A fixed delay will feel less "human" and more "robotic".

    When not using a "fixed delay" the "max delay" is the maximum value a "delay" between actions can be.

    This helps when you are not the fastest typist, or when you need some time to think!

    Note that you can always adjust the delays in the actions directly.

    Repeat animation:

    Note: the "Preview" will shown will not repeat, as it interferes to much with the creation of the animation.