Svelte textarea auto size

A lightweight Svelte component to get a textarea that automatically adjusts its height.

version 1.0.6

Warning: only version 1.0.4 is stable

Installation

npm i @theprimebuilder/svelte-textarea-autosize

or

bun i @theprimebuilder/svelte-textarea-autosize

Information

The Svelte Textarea Auto-size component accepts 3 main props:

1. Value

• Description: The value are the data (string) type you want to pass to your textarea for modification. It supports Svelte 5 $bindable().

2. Placeholder

• Description: The default text displayed when the textarea is empty.

3. Class

• Description: Used for custom CSS styling.

Additional: It also supports all standard attributes (maxlength, disabled, rows, etc.) via rest props. For more information, refer to the <a target="_blank" rel="nofollow noreferrer noopener external" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea" title="svelte theme">Developper Mozila docs</a></p> <h1 id="basic-usage">Basic usage</h1> <pre><code class="language-svelte"><script lang="ts"> // Import the component import { TextArea } from "../lib/index.ts"; // The value we want to transmit to the textarea let message = $state<string>("Hello, here is The Prime Builder"); </script> <div> <h1>Demo of<br /> @theprimebuilder/textarea</h1> <TextArea value={message} class="textarea" placeholder={"Type something"} /> </div> <style> div { box-sizing: border-box; width: 100%; min-height: 100dvh; margin-inline: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: var(--s-large); } h1 { font-size: var(--header); color: var(--primary); } /* Declarig a global style with a specific style to target our textarea */ :global(.textarea) { box-sizing: border-box; max-width: 90%; max-height: 50dvh; font-size: var(--body); padding: var(--p-small); border-radius: var(--r-small); overflow-x: hidden; overflow-y: auto; /* Scrollbar hiding optional */ &::-webkit-scrollbar { display: none; } scrollbar-width: none; -ms-overflow-style: none; } @media screen and (min-width: 650px) { :global(.textarea) { max-width: 50%; } } </style> </code></pre> <h2 id="development">Development</h2> <p>If you want to contribute or test the component locally:</p> <ol> <li><p>Clone the repo: <code>git clone https://github.com/theprimebuilder/svelte-textarea-autosize.git</code></p> </li> <li><p>Install dependencies: <code>bun install</code></p> </li> <li><p>Start the dev server: <code>bun run dev</code></p> </li> </ol> <p>Open your browser at <code>http://localhost:5173</code> to see the demo page.</p> <h1 id="links">Links</h1> <p><a target="_blank" rel="nofollow noreferrer noopener external" href="https://www.npmjs.com/package/@theprimebuilder/svelte-textarea-autosize" title="svelte theme">NPM</a></p> <p><a target="_blank" rel="nofollow noreferrer noopener external" href="https://github.com/theprimebuilder/svelte-textarea-autosize" title="svelte theme">Github repo</a></p> <p><a target="_blank" rel="nofollow noreferrer noopener external" href="https://github.com/theprimebuilder" title="svelte theme">Github profile</a></p> <h1 id="note">Note</h1> <p>If you encounter any issues, please report them on the GitHub repository. Thank you!</p> <!----><!--]--></div> <div><h2 class="text-xl font-bold">Top categories</h2> <div class="categories grid grid-cols-1 md:grid-cols-3 gap-1 lg:grid-cols-4 mt-3"><!--[--><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/tailwind">tailwind</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/daisyui">daisyui</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/admin template">admin template</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/popup">popup</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/mdsvex">mdsvex</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/portfolio">portfolio</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/blog">blog</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/form">form</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ecommerce">ecommerce</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/ui">ui</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/carousel">carousel</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/auth">auth</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/dark">dark</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/seo">seo</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/image">image</a><a data-sveltekit-prefetch="" class="relative grid place-items-center bg-red-400 hover:bg-red-600 text-white p-4" href="/category/routing">routing</a><!--]--></div></div> <!--[!--><!--]--><!----> <!--[!--><!--]--><!----><!--]--><!----> <footer class="border-t border-gray-400 mt-20 py-4"><ul class="md:flex items-center"><!--[--><li class="mr-3"><a class="underline hover:text-red-500" href="/" title="Themes">Themes</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/resources" title="Resources">Resources</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/jobs" title="Jobs">Jobs</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="https://1.envato.market/4Pe0Br" title="Premium Templates">Premium Templates</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/category" title="Categories">Categories</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/blog" title="Blog">Blog</a></li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit" title="Submit">Submit</a></li><li class="mr-3"><a data-sveltekit-reload="true" class="underline hover:text-red-500" href="/submit?hire=true" title="Hire">Hire</a></li><li class="mr-3"><a class="underline hover:text-red-500" href="/sitemap.xml" title="Sitemap">Sitemap</a></li><!--]--></ul></footer><!----></div> <!--[--><div class="loader-animation svelte-p14toz"><img src="/loader.svg" alt="Loading Svelte Themes"/></div><!--]--> <!--[!--><!--]--><!----> <div hidden><div class="notifications no-print svelte-1420bpk"><!--[--><!--]--></div><!----></div><!----> <!----><!----><!--]--> <!--[!--><!--]--><!--]--> <script type="application/json" data-sveltekit-fetched data-url="/api/theprimebuilder/svelte-textarea-autosize.json" data-ttl="2592000">{"status":200,"statusText":"","headers":{},"body":"{\"id\":\"R_kgDORkqJ4w\",\"stargazerCount\":1,\"updatedAt\":\"2026-03-12T07:01:34Z\",\"homepageUrl\":\"\",\"openGraphImageUrl\":\"https://opengraph.githubassets.com/261fcf71aa88a243d12bf075b4f4b82d28bd6cf6a7f298c76f1be7df4eeb5911/theprimebuilder/svelte-textarea-autosize\",\"description\":\"A textarea version that enable auto size for svelte.\",\"descriptionHTML\":\"\u003Cdiv>A textarea version that enable auto size for svelte.\u003C/div>\",\"forkCount\":0,\"url\":\"https://github.com/theprimebuilder/svelte-textarea-autosize\",\"nameWithOwner\":\"theprimebuilder/svelte-textarea-autosize\",\"name\":\"svelte-textarea-autosize\",\"readme1\":{\"text\":\"# Svelte textarea auto size\\nA lightweight Svelte component to get a textarea that automatically adjusts its height.\\n\\n\\n\\n\\n\\n\\n**version 1.0.6**\\n\\n# Warning: only version 1.0.4 is stable\\n\\n# Installation \\n\\n```bash\\nnpm i @theprimebuilder/svelte-textarea-autosize\\n```\\nor \\n\\n```bash\\nbun i @theprimebuilder/svelte-textarea-autosize\\n```\\n# Information\\n\\nThe Svelte Textarea Auto-size component accepts 3 main props:\\n\\n1. Value \\n- Description: The value are the data (string) type you want to pass to your textarea for modification. It supports Svelte 5 $bindable().\\n\\n2. Placeholder\\n- Description: The default text displayed when the textarea is empty.\\n\\n3. Class\\n- Description: Used for custom CSS styling.\\n\\nAdditional: It also supports all standard \u003Ctextarea> attributes (maxlength, disabled, rows, etc.) via rest props. For more information, refer to the [Developper Mozila docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea)\\n\\n# Basic usage\\n```svelte\\n\u003Cscript lang=\\\"ts\\\">\\n // Import the component\\n import { TextArea } from \\\"../lib/index.ts\\\";\\n\\n // The value we want to transmit to the textarea\\n let message = $state\u003Cstring>(\\\"Hello, here is The Prime Builder\\\");\\n\u003C/script>\\n\\n\u003Cdiv>\\n \u003Ch1>Demo of\u003Cbr /> @theprimebuilder/textarea\u003C/h1>\\n \u003CTextArea value={message} class=\\\"textarea\\\" placeholder={\\\"Type something\\\"} />\\n\u003C/div>\\n\\n\u003Cstyle>\\n div {\\n box-sizing: border-box;\\n width: 100%;\\n min-height: 100dvh;\\n margin-inline: auto;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n row-gap: var(--s-large);\\n }\\n\\n h1 {\\n font-size: var(--header);\\n color: var(--primary);\\n }\\n /* Declarig a global style with a specific style to target our textarea */\\n :global(.textarea) {\\n box-sizing: border-box;\\n max-width: 90%;\\n max-height: 50dvh;\\n font-size: var(--body);\\n padding: var(--p-small);\\n border-radius: var(--r-small);\\n overflow-x: hidden;\\n overflow-y: auto;\\n\\n /* Scrollbar hiding optional */\\n &::-webkit-scrollbar {\\n display: none;\\n }\\n scrollbar-width: none;\\n -ms-overflow-style: none;\\n }\\n\\n @media screen and (min-width: 650px) {\\n :global(.textarea) {\\n max-width: 50%;\\n }\\n }\\n\u003C/style>\\n\\n```\\n\\n## Development\\n\\nIf you want to contribute or test the component locally:\\n\\n1. Clone the repo: `git clone https://github.com/theprimebuilder/svelte-textarea-autosize.git`\\n\\n2. Install dependencies: `bun install`\\n\\n3. Start the dev server: `bun run dev`\\n\\nOpen your browser at `http://localhost:5173` to see the demo page.\\n\\n\\n# Links\\n[NPM](https://www.npmjs.com/package/@theprimebuilder/svelte-textarea-autosize)\\n\\n[Github repo](https://github.com/theprimebuilder/svelte-textarea-autosize)\\n\\n[Github profile](https://github.com/theprimebuilder)\\n\\n# Note\\nIf you encounter any issues, please report them on the GitHub repository. Thank you!\"},\"readme2\":null,\"readme3\":null,\"readme4\":null,\"readme5\":null,\"repositoryTopics\":{\"nodes\":[{\"topic\":{\"name\":\"component\"}},{\"topic\":{\"name\":\"svelte\"}},{\"topic\":{\"name\":\"sveltecomponent\"}},{\"topic\":{\"name\":\"sveltekit\"}},{\"topic\":{\"name\":\"textarea\"}},{\"topic\":{\"name\":\"textarea-autoresize\"}}]},\"owner\":{\"avatarUrl\":\"https://avatars.githubusercontent.com/u/266182891?s=30&u=1deb9e962c403374416f1101f86223cc2164bd9e&v=4\",\"url\":\"https://github.com/theprimebuilder\",\"login\":\"theprimebuilder\"},\"htmlContent\":\"\u003Ch1 id=\\\"svelte-textarea-auto-size\\\">Svelte textarea auto size\u003C/h1>\\n\u003Cp>A lightweight Svelte component to get a textarea that automatically adjusts its height.\u003C/p>\\n\u003Cp>\u003Ca rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://img.shields.io/badge/Svelte-5-ff3e00?logo=svelte&logoColor=white\\\" target=\\\"_blank\\\">\u003Cimg src=https://img.shields.io/badge/Svelte-5-ff3e00?logo=svelte&logoColor=white title=\\\"Svelte\\\" loading=\\\"lazy\\\" />\u003C/a>\\n\u003Ca rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white\\\" target=\\\"_blank\\\">\u003Cimg src=https://img.shields.io/badge/TypeScript-007ACC?logo=typescript&logoColor=white title=\\\"TypeScript\\\" loading=\\\"lazy\\\" />\u003C/a>\\n\u003Ca rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://img.shields.io/badge/Bun-000000?logo=bun&logoColor=white\\\" target=\\\"_blank\\\">\u003Cimg src=https://img.shields.io/badge/Bun-000000?logo=bun&logoColor=white title=\\\"Bun\\\" loading=\\\"lazy\\\" />\u003C/a>\u003C/p>\\n\u003Cp>\u003Cstrong>version 1.0.6\u003C/strong>\u003C/p>\\n\u003Ch1 id=\\\"warning-only-version-104-is-stable\\\">Warning: only version 1.0.4 is stable\u003C/h1>\\n\u003Ch1 id=\\\"installation\\\">Installation\u003C/h1>\\n\u003Cpre>\u003Ccode class=\\\"language-bash\\\">npm i @theprimebuilder/svelte-textarea-autosize\\n\u003C/code>\u003C/pre>\\n\u003Cp>or \u003C/p>\\n\u003Cpre>\u003Ccode class=\\\"language-bash\\\">bun i @theprimebuilder/svelte-textarea-autosize\\n\u003C/code>\u003C/pre>\\n\u003Ch1 id=\\\"information\\\">Information\u003C/h1>\\n\u003Cp>The Svelte Textarea Auto-size component accepts 3 main props:\u003C/p>\\n\u003Col>\\n\u003Cli>Value\u003C/li>\\n\u003C/ol>\\n\u003Cul>\\n\u003Cli>Description: The value are the data (string) type you want to pass to your textarea for modification. It supports Svelte 5 $bindable().\u003C/li>\\n\u003C/ul>\\n\u003Col start=\\\"2\\\">\\n\u003Cli>Placeholder\u003C/li>\\n\u003C/ol>\\n\u003Cul>\\n\u003Cli>Description: The default text displayed when the textarea is empty.\u003C/li>\\n\u003C/ul>\\n\u003Col start=\\\"3\\\">\\n\u003Cli>Class\u003C/li>\\n\u003C/ol>\\n\u003Cul>\\n\u003Cli>Description: Used for custom CSS styling.\u003C/li>\\n\u003C/ul>\\n\u003Cp>Additional: It also supports all standard \u003Ctextarea> attributes (maxlength, disabled, rows, etc.) via rest props. For more information, refer to the \u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea\\\" title=\\\"svelte theme\\\">Developper Mozila docs\u003C/a>\u003C/p>\\n\u003Ch1 id=\\\"basic-usage\\\">Basic usage\u003C/h1>\\n\u003Cpre>\u003Ccode class=\\\"language-svelte\\\"><script lang="ts">\\n // Import the component\\n import { TextArea } from "../lib/index.ts";\\n\\n // The value we want to transmit to the textarea\\n let message = $state<string>("Hello, here is The Prime Builder");\\n</script>\\n\\n<div>\\n <h1>Demo of<br /> @theprimebuilder/textarea</h1>\\n <TextArea value={message} class="textarea" placeholder={"Type something"} />\\n</div>\\n\\n<style>\\n div {\\n box-sizing: border-box;\\n width: 100%;\\n min-height: 100dvh;\\n margin-inline: auto;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n row-gap: var(--s-large);\\n }\\n\\n h1 {\\n font-size: var(--header);\\n color: var(--primary);\\n }\\n /* Declarig a global style with a specific style to target our textarea */\\n :global(.textarea) {\\n box-sizing: border-box;\\n max-width: 90%;\\n max-height: 50dvh;\\n font-size: var(--body);\\n padding: var(--p-small);\\n border-radius: var(--r-small);\\n overflow-x: hidden;\\n overflow-y: auto;\\n\\n /* Scrollbar hiding optional */\\n &::-webkit-scrollbar {\\n display: none;\\n }\\n scrollbar-width: none;\\n -ms-overflow-style: none;\\n }\\n\\n @media screen and (min-width: 650px) {\\n :global(.textarea) {\\n max-width: 50%;\\n }\\n }\\n</style>\\n\u003C/code>\u003C/pre>\\n\u003Ch2 id=\\\"development\\\">Development\u003C/h2>\\n\u003Cp>If you want to contribute or test the component locally:\u003C/p>\\n\u003Col>\\n\u003Cli>\u003Cp>Clone the repo: \u003Ccode>git clone https://github.com/theprimebuilder/svelte-textarea-autosize.git\u003C/code>\u003C/p>\\n\u003C/li>\\n\u003Cli>\u003Cp>Install dependencies: \u003Ccode>bun install\u003C/code>\u003C/p>\\n\u003C/li>\\n\u003Cli>\u003Cp>Start the dev server: \u003Ccode>bun run dev\u003C/code>\u003C/p>\\n\u003C/li>\\n\u003C/ol>\\n\u003Cp>Open your browser at \u003Ccode>http://localhost:5173\u003C/code> to see the demo page.\u003C/p>\\n\u003Ch1 id=\\\"links\\\">Links\u003C/h1>\\n\u003Cp>\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://www.npmjs.com/package/@theprimebuilder/svelte-textarea-autosize\\\" title=\\\"svelte theme\\\">NPM\u003C/a>\u003C/p>\\n\u003Cp>\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://github.com/theprimebuilder/svelte-textarea-autosize\\\" title=\\\"svelte theme\\\">Github repo\u003C/a>\u003C/p>\\n\u003Cp>\u003Ca target=\\\"_blank\\\" rel=\\\"nofollow noreferrer noopener external\\\" href=\\\"https://github.com/theprimebuilder\\\" title=\\\"svelte theme\\\">Github profile\u003C/a>\u003C/p>\\n\u003Ch1 id=\\\"note\\\">Note\u003C/h1>\\n\u003Cp>If you encounter any issues, please report them on the GitHub repository. Thank you!\u003C/p>\\n\"}"}</script> <script> { __sveltekit_1udw3dg = { base: new URL("..", location).pathname.slice(0, -1) }; const element = document.currentScript.parentElement; Promise.all([ import("../_app/immutable/entry/start.BPDTrh-Y.js"), import("../_app/immutable/entry/app.BJZlvkUp.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 6], data: [null,null], form: null, error: null }); }); if ('serviceWorker' in navigator) { addEventListener('load', function () { navigator.serviceWorker.register('../service-worker.js'); }); } } </script> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" crossorigin="anonymous" ></script> </div> </body> </html>