{"id":82,"date":"2023-04-15T17:15:51","date_gmt":"2023-04-15T17:15:51","guid":{"rendered":"https:\/\/editor.mediahack.co.za\/databites\/?p=82"},"modified":"2025-11-17T17:42:01","modified_gmt":"2025-11-17T17:42:01","slug":"steps-to-create-a-svelte-component-library","status":"publish","type":"post","link":"https:\/\/outliereditor.co.za\/index.php\/2023\/04\/15\/steps-to-create-a-svelte-component-library\/","title":{"rendered":"10 steps to create a custom Svelte component library"},"content":{"rendered":"\n<p>Although creating complex sites with multiple components in <a href=\"https:\/\/kit.svelte.dev\/\">SvelteKit<\/a> is pretty simple already, creating a library for your most regularly used components adds even more power to your projects.<\/p>\n\n\n\n<p>With a set of common components set up as an NPM package you can easily import them into your projects, and when you change one component in the library it can easily be updated through all projects that use that particular component. <\/p>\n\n\n\n<p>Things like buttons, modals, subscription forms, header elements or SEO tags are prime candidates to be turned into a library for regular re-use. <\/p>\n\n\n\n<p>Setting up a Svelte-based library is not hard but the process has changed as Svelte, and particularly SvelteKit, has developed. <\/p>\n\n\n\n<p>The steps below currently work with SvelteKit 1.x. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>To create a Svelte library we need to: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a new SvelteKit library project<\/li>\n\n\n\n<li>Create our components in the &#8220;lib&#8221; directory<\/li>\n\n\n\n<li>Build the component package in the &#8220;dist&#8221; directory<\/li>\n\n\n\n<li>Publish to NPM<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Steps<\/h2>\n\n\n\n<p>1 &#8211; Create a new Svelte Library project: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create svelte@latest &lt;app name&gt;<\/code><\/pre>\n\n\n\n<p>Follow the prompts and create a &#8220;Library&#8221; project.<\/p>\n\n\n\n<p>Then install the dependencies: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>cd &lt;app name&gt;\nnpm install<\/code><\/pre>\n\n\n\n<p>2 &#8211; Create a component in the src\/lib directory. Everything in the &#8220;lib&#8221; directory will make up your final library release. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><strong><em>\/lib\/src\/Button.svelte<\/em><\/strong>\n\n&lt;script&gt;\n    console.log('Button Component');\n    \/\/ You would import props here\n&lt;\/script&gt;\n\n&lt;button&gt;My Button&lt;\/button&gt;\n\n&lt;style&gt;\n    button {\n        background: #000;\n        color: #fff;\n        padding: 10px;\n        border: none;\n        border-radius: 5px;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>3 &#8211; You can create a file in the &#8220;routes&#8221; directory to test your component and run it like a usual SvelteKit project. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><em><strong>\/routes\/+page.svelte<\/strong><\/em>\n\n&lt;script&gt;\n    import Button from '..\/lib\/Button.svelte';\n&lt;\/script&gt;\n\n&lt;h1&gt;MHC Components&lt;\/h1&gt;\n\nA collection of visual and web-design components.\n&lt;br\/&gt;\n&lt;br\/&gt;\n\n&lt;Button \/&gt;<\/code><\/pre>\n\n\n\n<p>4 &#8211; Edit the index.js file in src\/lib to import your component and then export it as a named export: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Button from '.\/Button.svelte';\nexport { Button };\n\n\/\/ If you multiple components, you can re-export them here:\n\/\/ import Card from '.\/Card.svelte';\n\/\/ export { Button, Card }<\/code><\/pre>\n\n\n\n<p>5 &#8211; Add package.json <s>and README.md <\/s> files to the src\/lib directory. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Copy the package.json file to the lib directory.<\/code><\/pre>\n\n\n\n<p>6 &#8211; You may need to Install &#8220;svelte2tsx&#8221; but with a default SvelteKit library project it is likely to be included.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install svelte2tsx<\/code><\/pre>\n\n\n\n<p>7 &#8211; Add a jsconfig.json (or tsconfig.json if you&#8217;re using Typescript) file to the root of your project. The file should be at the same level as the svelte.config.js file. A jsconfig.json file needs to look like this as a minimum: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"extends\": \".\/.svelte-kit\/tsconfig.json\"\n}<\/code><\/pre>\n\n\n\n<p>8 &#8211; Set up a GitHub project and push your first commit to the new respository. <\/p>\n\n\n\n<p>9 &#8211; At this point you should be able to build your library. If you set up a SvelteKit Library project you should be able to run either the &#8220;build&#8221; script or the &#8220;package&#8221; script: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build\n\nor\n\nnpm run package<\/code><\/pre>\n\n\n\n<p>The output should look something like this: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/editor.mediahack.co.za\/databites\/wp-content\/uploads\/sites\/3\/2023\/04\/svelte-component-build.png\" alt=\"\" class=\"wp-image-83\"\/><\/figure>\n\n\n\n<p>10 &#8211; Publish to NPM. You&#8217;ll need an <a rel=\"noreferrer noopener\" href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\">NPMJS.com<\/a> account for this. <\/p>\n\n\n\n<p>Log into NPM at the command line: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm login<\/code><\/pre>\n\n\n\n<p>Then publish your package: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm publish --access public<\/code><\/pre>\n\n\n\n<p>If you want to publish the package as part of an NPM organisation you need to include the NPM organisation name in the package.json file: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"@mediahackza\/graphic-components\",\n  \"version\": \"0.0.1\",\n...\n}<\/code><\/pre>\n\n\n\n<p>If you get this far you hopefully now have an NPM package set up. You can use the package in any of your projects like a normal package: <\/p>\n\n\n\n<p>Import the package: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @mediahackza\/graphic-components<\/code><\/pre>\n\n\n\n<p>Then import and use the components you need: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\nimport { Button } from @mediahackza\/graphic-components\n&lt;\/script&gt;\n\n&lt;Button \/&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Final notes<\/h2>\n\n\n\n<p>The process for building a Svelte-based package has changed a lot recently. It&#8217;s worth keeping an eye on the official <a href=\"https:\/\/kit.svelte.dev\/docs\/packaging\" target=\"_blank\" rel=\"noreferrer noopener\">packaging section in the Svelte docs<\/a> so more recent updates. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Although creating complex sites with multiple components in SvelteKit is pretty simple already, creating a library for your most regularly used components adds even more power to your projects.<\/p>\n","protected":false},"author":1,"featured_media":86692,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[447,448,1387],"tags":[469,449,470,468],"newsletter-post":[],"site":[],"class_list":["post-82","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-databites","category-how-to","category-the-outlier","tag-components","tag-how-to","tag-library","tag-svelte"],"acf":{"big_number":"","big_number_caption":"","big_number_link":"","big_number_background":"","big_number_text_colour":"#000000","big_number_icon":false,"big_number_wide":"yes","featured_chart":false,"flourish_chart_id":"","flourish_sub_title":"","flourish_chart_width":"medium","is_newsletter_post":"No","post_style":"bc","show_on_front":"Yes","link_through":"Yes","chart_url":"","background_colour":"#0089AA","text_colour":"#FFFFFF"},"_links":{"self":[{"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":2,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":89529,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/posts\/82\/revisions\/89529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/media\/86692"}],"wp:attachment":[{"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/tags?post=82"},{"taxonomy":"newsletter-post","embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/newsletter-post?post=82"},{"taxonomy":"site","embeddable":true,"href":"https:\/\/outliereditor.co.za\/index.php\/wp-json\/wp\/v2\/site?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}