README.md

July 22, 2025 · View on GitHub

↕️ Alpine Autosize ↕️

A little Alpine.js plugin to automatically resize a textarea to fit its content.

🚀 Installation

CDN

Include the following <script> tag in the <head> of your document, just before Alpine.

<script src="https://cdn.jsdelivr.net/npm/@marcreichel/alpine-autosize@latest/dist/alpine-autosize.min.js" defer></script>

NPM

npm install @marcreichel/alpine-autosize

Add the x-autosize directive to your project by importing the package before starting Alpine.

import Alpine from 'alpinejs';
import Autosize from '@marcreichel/alpine-autosize';

Alpine.plugin(Autosize);

Alpine.start();

🪄 Usage

Directive

To let the textarea automatically resize, add the x-autosize directive to the <textarea>.

<textarea x-autosize></textarea>

Magic

If you want to "manually" update the size of the textarea – for example after updating its content programatically – you may use the $autosize Alpine magic:

<div x-data="{ text: '' }" x-init="$watch('text', () => { $nextTick(() => { $autosize($refs.input); }); })">
    <textarea x-ref="input" x-model="text"></textarea>
</div>

Just make sure, you call $autosize($refs.input) inside of a $nextTick for Alpine to update the DOM correctly.

📄 License

Licensed under the MIT license, see LICENSE for details.