readme-typing-svg: Open Source Design & Prototyping

What is readme-typing-svg?

Readme Typing SVG is a dynamically generated, customizable SVG service that renders text with the appearance of being typed and then deleted, and it is aimed at developers who want an animated element on a GitHub profile page, a repository, or a website.

What it is

Readme Typing SVG is a PHP project, released under the MIT licence, that produces an SVG image on demand and returns it over the web. The image is not drawn by hand and not committed to a repository; it is generated at the moment the URL is requested. The project is catalogued under Miscellaneous / Design & Prototyping and carries the topics animation, dynamic, svg, typing, php, github, readme, profile-readme and hacktoberfest. Its public repository has reached 9,370 stars and 1,612 forks, with 32 open issues, and the most recent push was on 17 September 2026.

The ecosystem it lives in is the GitHub profile README: the topic list names profile-readme, readme and github directly, and the quick setup in the README is written for pasting a Markdown snippet into a profile README. The concrete problem is that rendered Markdown cannot run scripts or animate text, so the line of text a developer uses to introduce themselves normally sits frozen. Readme Typing SVG fills that space with an animated SVG where a static line of text or a static image would otherwise go, and the same endpoint can be used on a repository page or an external website, as the tagline states.

Key capabilities

Dynamically generated SVG served from the hosted endpoint at https://readme-typing-svg.demolab.com and requested through a URL.
The displayed text is set entirely through the ?lines= query parameter, where semicolons separate lines and + or %20 stands in for spaces.
A width parameter can be adjusted so the SVG fits the full width of the text.
The animation gives the appearance of typing and then deleting text, matching the typing and animation topics.
A demo site at https://readme-typing-svg.demolab.com/demo/ provides a live preview for customizing the SVG before it is used.
Drop-in Markdown usage, as shown in the README snippet .
Implemented in PHP and licensed under MIT, with the hacktoberfest topic indicating participation in that event.

Who uses it and how

Individual developers who maintain a GitHub profile README and want an animated line of text at the top of it.
The README links a long roster of example profiles, among them 8BitJonny, Carol42, PROxZIMA, jcs090218 and many others, showing the pattern working in real profiles.
Public-facing organisations appear in that roster too: Jini by Rentalz.com is listed alongside the individual examples.
Embedding beyond profiles, since the tagline covers repositories and websites as well, so the same URL can be placed outside GitHub.
Users who are tuning appearance rather than writing code work through the demo site's live preview and only then paste the snippet.

Getting started

The README's setup is a copy-and-paste: place the Markdown snippet in a GitHub profile README, replace the value after ?lines= with your own text, and adjust the width parameter to match. The demo site at https://readme-typing-svg.demolab.com/demo/ provides a live preview while that is done.

How it compares

The facts provided name no comparable or competing tools, and no list of paid products that this project replaces is given. Readme Typing SVG therefore stands alone in this registry, catalogued under Miscellaneous / Design & Prototyping.

When to use it — and when not to

Choose it when a GitHub profile README, repository or page needs a light animated touch and the copy-paste snippet is enough. Avoid it if relying on a third-party hosted URL is unacceptable, or if a static image would serve the same purpose, because the animation is the entire point of the project. The material available here is thin beyond the quick setup, the demo site and the example profiles: it does not describe self-hosting the PHP service, so anyone who needs to run it on their own domain is working without documented instructions.

project readme (upstream, from github) — read inline

⌨️ Readme Typing SVG

⚡ Quick setup

Copy-paste the markdown below into your GitHub profile README
Replace the value after ?lines= with your text. Separate lines of text with semicolons and use + or %20 for spaces.
Adjust the width parameter (see below) to fit the full width of your text.

[![Typing SVG](https://readme-typing-svg.demolab.com/?lines=First+line+of+text;Second+line+of+text)](https://git.io/typing-svg)

Star the repo 😄

⚙ Demo site

Here you can easily customize your Typing SVG with a live preview.

🚀 Example usage

Below are links to profiles where you can see Readme Typing SVGs in action!

Feel free to open a PR and add yours!

🔧 Options

Parameter	Details	Type	Example
`lines`	Text to display with lines separated by `;` and `+` for spaces	string	`First+line;Second+line;Third+line`
`height`	Height of the output SVG in pixels (default: `50`)	integer	Any positive number
`width`	Width of the output SVG in pixels (default: `400`)	integer	Any positive number
`size`	Font size in pixels (default: `20`)	integer	Any positive number
`font`	Font family (default: `monospace`)	string	Any font from Google Fonts
`color`	Color of the text (default: `36BCF7`)	string	Hex code without # (eg. `F724A9`)
`background`	Background color of the text (default: `00000000`)	string	Hex code without # (eg. `FEFF4C`)
`center`	`true` to center text or `false` for left aligned (default: `false`)	boolean	`true` or `false`
`vCenter`	`true` to center vertically or `false`(default) to align above the center	boolean	`true` or `false`
`multiline`	`true` to wrap lines or `false` to retype on one line (default: `false`)	boolean	`true` or `false`
`duration`	Duration of the printing of a single line in milliseconds (default: `5000`)	integer	Any positive number
`pause`	Duration of the pause between lines in milliseconds (default: `0`)	integer	Any non-negative number
`repeat`	`true` to loop around to the first line after the last (default: `true`)	boolean	`true` or `false`
`separator`	Separator used between lines in the lines parameter (default: `;`)	string	`;`, `;;`, `/`, etc.
`letterSpacing`	Letter spacing (default: `normal`)	string	Any css values for the letter-spacing property

📤 Deploying it on your own

If you can, it is preferable to host the files on your own server.

Doing this can lead to better uptime and more control over customization (you can modify the code for your usage).

You can deploy the PHP files on any website server with PHP installed or as a Heroku app.

Step-by-step instructions for deploying to Heroku

Sign in to Heroku or create a new account at
Click the "Deploy to Heroku" button below

On the page that comes up, click "Deploy App" at the end of the form
Once the app is deployed, click "Manage App" to go to the dashboard
Scroll down to the Domains section in the settings to find the URL you will use in place of readme-typing-svg.demolab.com

🤗 Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.

Make sure your request is meaningful and you have tested the app locally before submitting a pull request.

Refer to CONTRIBUTING.md for more details on contributing, installing requirements, and running the application.

🙋‍♂️ Support

💙 If you like this project, give it a ⭐ and share it with friends!

☕ Buy me a coffee

Made with ❤️ and PHP

This project uses Twemoji, published under the CC-BY 4.0 License

Frequently asked questions

Is readme-typing-svg free to use?

readme-typing-svg is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does readme-typing-svg do?

⚡ Dynamically generated, customizable SVG that gives the appearance of typing and deleting text for use on your profile page, repositories, or website.

What is readme-typing-svg written in?

readme-typing-svg is primarily written in PHP. Its source is publicly available at https://github.com/DenverCoder1/readme-typing-svg, and it has 9,370 GitHub stars.