Try it out!


You can get the code from Github, by cloning the repository, like so:

$ git clone

If you'd rather like to download a .zip, check out the releases.


To use autogrow in you project, include the stylesheet and javascript file that comes with it.

Add this line inside your <head>

<link rel="stylesheet" href="path/to/autogrow.css">

And this one before </body>

<script src="path/to/autogrow.js"></script>

As an alternative you could just copy-and-paste the following code into your existing project files.

After you have linked to the autogrow files, you'll need to wrap your textareas in a container, a div for example, but anything works, and set the containers class to .autogrow-container. You can also set your own class on the container, see customization options below. This is what it should look like with the default container class-name:

<div class="autogrow-container">

Lastly, call autogrow.init() from your script.


autogrow gives you options to set different class-names to the elements that get generated by the script. These are the options that you can set:

  containerClass: 'your-container-class',
  spanClass: 'your-span-class',
  mirrorClass: 'your-mirror-class',
  activeClass: 'your-active-class',
  areaClass: 'your-area-class'


autogrow is based on code from “Expanding Text Areas Made Elegant” by Neil Jenkins. You can read some more background in this blog post.