That way, the users don't always have to expand it just to see what they wrote. Now, you could write this on your own. You could use a bit of JavaScript. But you know what? What I always end up doing is reaching for a package called autosize. Now, we can download this through NPM. So let's grab that. And also, let's do a npm install just to pull in Laravel Elixir and all of that good stuff. Okay, great. So if we switch back to Sublime Text, we're going to go to our Gulp file.

Okay, great. So if we switch back to Sublime Text, we're going to go to our gulpfile.js. We can use Webpack or Browserify or Rollup. Laravel supports any of those. But this is fine. Let's switch to the app.js that Laravel includes. And you know what? Let's just get rid of all of it. We're going to import autosize that we just installed. And now it's very simple.

We're going to import autosize that we just installed. And now it's very simple. You have access to an autosize function. So why don't we just say document.querySelectorAll('textarea')? So hunt down all text areas on the page. In real life, you might want to limit that to a data attribute or something like that. Whatever you want to do. But in this case, yeah, give me all text areas and we will automatically size them. Okay, so let's go ahead and compile this down. Now as you know, that's going to save to public/js/app.js.

Okay, so let's go ahead and compile this down. Now as you know, that's going to save to public/js/app.js. So let's do that. Let's go to my layout file here. We'll do this at the bottom. <script src="js/app.js">. And I believe we should be all set to go. Let's go back to Chrome. And here's our text area. But if we give it a refresh, there we go.

see you get some extra space. But yeah, as you add more, it will expand, and as you reduce, it'll expand. But the main thing, of course, is when you refresh the page, regardless of how wide it is or how many lines of code or HTML it is, it will expand accordingly. And that's it. That's all there is to it. So you could even wrap this if you're using Vue.js. You could even wrap this within like a little component, or you could create a directive. So you could have something like v-auto-size. That might be a fun exercise.