{"id":15022460,"url":"https://github.com/tsparticles/svelte","last_synced_at":"2025-04-05T09:04:57.430Z","repository":{"id":103337817,"uuid":"564555092","full_name":"tsparticles/svelte","owner":"tsparticles","description":"Svelte tsParticles official plugin","archived":false,"fork":false,"pushed_at":"2025-03-24T11:51:03.000Z","size":1192,"stargazers_count":54,"open_issues_count":14,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T08:04:25.462Z","etag":null,"topics":["hacktoberfest","javascript","svelte","tsparticles","typescript"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tsparticles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"matteobruni,tsparticles"}},"created_at":"2022-11-11T00:52:34.000Z","updated_at":"2025-02-28T21:44:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"c6f12e9c-3598-49a0-a8dc-847f8ae06eb6","html_url":"https://github.com/tsparticles/svelte","commit_stats":{"total_commits":58,"total_committers":5,"mean_commits":11.6,"dds":0.4655172413793104,"last_synced_commit":"248cb363d9c6d582477822fc2bc459931237fcd6"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fsvelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fsvelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fsvelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsparticles%2Fsvelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsparticles","download_url":"https://codeload.github.com/tsparticles/svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","javascript","svelte","tsparticles","typescript"],"created_at":"2024-09-24T19:57:59.091Z","updated_at":"2025-04-05T09:04:57.336Z","avatar_url":"https://github.com/tsparticles.png","language":"Svelte","funding_links":["https://github.com/sponsors/matteobruni,tsparticles","https://github.com/sponsors/matteobruni","https://www.buymeacoffee.com/matteobruni","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":[],"sub_categories":[],"readme":"[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)\n\n# @tsparticles/svelte\n\n[![npm](https://img.shields.io/npm/v/@tsparticles/svelte)](https://www.npmjs.com/package/@tsparticles/svelte) [![npm downloads](https://img.shields.io/npm/dm/@tsparticles/svelte)](https://www.npmjs.com/package/@tsparticles/svelte) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)\n\nOfficial [tsParticles](https://github.com/matteobruni/tsparticles) SvelteJS component\n\n[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)\n\n[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113\u0026theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-tsparticles\") \u003ca href=\"https://www.buymeacoffee.com/matteobruni\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a beer\u0026emoji=🍺\u0026slug=matteobruni\u0026button_colour=5F7FFF\u0026font_colour=ffffff\u0026font_family=Arial\u0026outline_colour=000000\u0026coffee_colour=FFDD00\"\u003e\u003c/a\u003e\n\n## Installation\n\n```shell\nnpm install @tsparticles/svelte\n```\n\nor\n\n```shell\nyarn add @tsparticles/svelte\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\n    import Particles, { particlesInit } from '@tsparticles/svelte';\n    //import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\n    import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n\n    let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url\n\n    let particlesConfig = {\n        particles: {\n            color: {\n                value: '#000'\n            },\n            links: {\n                enable: true,\n                color: '#000'\n            },\n            move: {\n                enable: true\n            },\n            number: {\n                value: 100\n            }\n        }\n    };\n\n    let onParticlesLoaded = (event) =\u003e {\n        const particlesContainer = event.detail.particles;\n\n        // you can use particlesContainer to call all the Container class\n        // (from the core library) methods like play, pause, refresh, start, stop\n    };\n\n    void particlesInit(async (engine) =\u003e {\n        // call this once per app\n        // you can use main to customize the tsParticles instance adding presets or custom shapes\n        // this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n        // starting from v2 you can add only the features you need reducing the bundle size\n        //await loadFull(engine);\n        await loadSlim(engine);\n    });\n\u003c/script\u003e\n\n\u003cParticles\n        id=\"tsparticles\"\n        class=\"put your classes here\"\n        style=\"\"\n        options=\"{particlesConfig}\"\n        on:particlesLoaded=\"{onParticlesLoaded}\"\n/\u003e\n\n\u003c!-- or --\u003e\n\n\u003cParticles\n        id=\"tsparticles\"\n        class=\"put your classes here\"\n        style=\"\"\n        url=\"{particlesUrl}\"\n        on:particlesLoaded=\"{onParticlesLoaded}\"\n/\u003e\n```\n\n### SSR\n\nThe particles component isn't built for SSR, so you have to force the component to be called client side\nwith `async import`.\n\nYou can see a sample below:\n\n```html\n\u003cscript\u003e\n\timport { particlesInit } from '@tsparticles/svelte';\n\timport { onMount } from 'svelte';\n\t//import { loadFull } from \"tsparticles\"; // if you are going to use `loadFull`, install the \"tsparticles\" package too.\n\timport { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the \"@tsparticles/slim\" package too.\n\n\tlet ParticlesComponent;\n\n\tonMount(async () =\u003e {\n\t\tconst module = await import('@tsparticles/svelte');\n\n\t\tParticlesComponent = module.default;\n\t});\n\n\tlet particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url\n\n\tlet particlesConfig = {\n\t\tparticles: {\n\t\t\tcolor: {\n\t\t\t\tvalue: '#000'\n\t\t\t},\n\t\t\tlinks: {\n\t\t\t\tenable: true,\n\t\t\t\tcolor: '#000'\n\t\t\t},\n\t\t\tmove: {\n\t\t\t\tenable: true\n\t\t\t},\n\t\t\tnumber: {\n\t\t\t\tvalue: 100\n\t\t\t}\n\t\t}\n\t};\n\n\tlet onParticlesLoaded = (event) =\u003e {\n\t\tconst particlesContainer = event.detail.particles;\n\n\t\t// you can use particlesContainer to call all the Container class\n\t\t// (from the core library) methods like play, pause, refresh, start, stop\n\t};\n\n\tvoid particlesInit(async (engine) =\u003e {\n\t\t// call this once per app\n\t\t// you can use main to customize the tsParticles instance adding presets or custom shapes\n\t\t// this loads the tsparticles package bundle, it's the easiest method for getting everything ready\n\t\t// starting from v2 you can add only the features you need reducing the bundle size\n\t\t//await loadFull(main);\n\t\tawait loadSlim(engine);\n\t});\n\u003c/script\u003e\n\n\u003csvelte:component\n\tthis=\"{ParticlesComponent}\"\n\tid=\"tsparticles\"\n\tclass=\"put your classes here\"\n\tstyle=\"\"\n\toptions=\"{particlesConfig}\"\n\ton:particlesLoaded=\"{onParticlesLoaded}\"\n/\u003e\n\n\u003c!-- or --\u003e\n\n\u003csvelte:component\n\tthis=\"{ParticlesComponent}\"\n\tid=\"tsparticles\"\n\tclass=\"put your classes here\"\n\tstyle=\"\"\n\turl=\"{particlesUrl}\"\n\ton:particlesLoaded=\"{onParticlesLoaded}\"\n/\u003e\n```\n\n### TypeScript errors\n\nA user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.\n\nIf someone is experiencing the same error, please follow these steps:\n\n- install these packages: `typescript`, `svelte-preprocess`.\n- add a `tsconfig.json` file to your project, following this sample: \u003chttps://github.com/ivanhofer/sveltekit-typescript-showcase#configure-typescript\u003e (see this for example: \u003chttps://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/tsconfig.json\u003e)\n- import `svelte-preprocess` in your svelte configuration file, like this: `import preprocess from 'svelte-preprocess'` (see this for example: \u003chttps://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L2\u003e)\n- use the `preprocess` function in your svelte configuration file, like this: `preprocess: preprocess(),` (see this for example: \u003chttps://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L9\u003e)\n\nAfter that, everything should work as expected.\n\n### SvelteKit\n\nIf you have issues with SvelteKit, like you _Cannot use import statement outside a module_, change your `vite.config.ts` file like this:\n\n```ts\nimport { sveltekit } from '@sveltejs/kit/vite';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n    plugins: [sveltekit()],\n    ssr: {\n        noExternal: ['tsparticles', '@tsparticles/slim', '@tsparticles/engine', '@tsparticles/svelte'] // add all tsparticles libraries here, they're not made for SSR, they're client only\n    }\n});\n```\n\n## Demos\n\nThe demo website is [here](https://particles.js.org)\n\n\u003chttps://particles.js.org\u003e\n\nThere's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)\n\n\u003chttps://codepen.io/collection/DPOage\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Fsvelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsparticles%2Fsvelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsparticles%2Fsvelte/lists"}