Official tsParticles SvelteJS component
npm install @tsparticles/svelteor
yarn add @tsparticles/svelte<script> import Particles, { particlesInit } from '@tsparticles/svelte'; //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url let particlesConfig = { particles: { color: { value: '#000' }, links: { enable: true, color: '#000' }, move: { enable: true }, number: { value: 100 } } }; let onParticlesLoaded = (event) => { const particlesContainer = event.detail.particles; // you can use particlesContainer to call all the Container class // (from the core library) methods like play, pause, refresh, start, stop }; void particlesInit(async (engine) => { // call this once per app // you can use main to customize the tsParticles instance adding presets or custom shapes // this loads the tsparticles package bundle, it's the easiest method for getting everything ready // starting from v2 you can add only the features you need reducing the bundle size //await loadFull(engine); await loadSlim(engine); }); </script> <Particles id="tsparticles" class="put your classes here" style="" options="{particlesConfig}" on:particlesLoaded="{onParticlesLoaded}" /> <!-- or --> <Particles id="tsparticles" class="put your classes here" style="" url="{particlesUrl}" on:particlesLoaded="{onParticlesLoaded}" />The particles component isn't built for SSR, so you have to force the component to be called client side with async import.
You can see a sample below:
<script> import { particlesInit } from '@tsparticles/svelte'; import { onMount } from 'svelte'; //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too. import { loadSlim } from '@tsparticles/slim'; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too. let ParticlesComponent; onMount(async () => { const module = await import('@tsparticles/svelte'); ParticlesComponent = module.default; }); let particlesUrl = 'http://foo.bar/particles.json'; // placeholder, replace it with a real url let particlesConfig = { particles: { color: { value: '#000' }, links: { enable: true, color: '#000' }, move: { enable: true }, number: { value: 100 } } }; let onParticlesLoaded = (event) => { const particlesContainer = event.detail.particles; // you can use particlesContainer to call all the Container class // (from the core library) methods like play, pause, refresh, start, stop }; void particlesInit(async (engine) => { // call this once per app // you can use main to customize the tsParticles instance adding presets or custom shapes // this loads the tsparticles package bundle, it's the easiest method for getting everything ready // starting from v2 you can add only the features you need reducing the bundle size //await loadFull(main); await loadSlim(engine); }); </script> <svelte:component this="{ParticlesComponent}" id="tsparticles" class="put your classes here" style="" options="{particlesConfig}" on:particlesLoaded="{onParticlesLoaded}" /> <!-- or --> <svelte:component this="{ParticlesComponent}" id="tsparticles" class="put your classes here" style="" url="{particlesUrl}" on:particlesLoaded="{onParticlesLoaded}" />A user reported me a TypeScript error (#3963), and that's because this Svelte component is built using TypeScript.
If someone is experiencing the same error, please follow these steps:
- install these packages:
typescript,svelte-preprocess. - add a
tsconfig.jsonfile to your project, following this sample: https://github.com/ivanhofer/sveltekit-typescript-showcase#configure-typescript (see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/tsconfig.json) - import
svelte-preprocessin your svelte configuration file, like this:import preprocess from 'svelte-preprocess'(see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L2) - use the
preprocessfunction in your svelte configuration file, like this:preprocess: preprocess(),(see this for example: https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/c824e45338ffc1a9c907c63d00a6a0af4884a0e9/svelte.config.js#L9)
After that, everything should work as expected.
If you have issues with SvelteKit, like you Cannot use import statement outside a module, change your vite.config.ts file like this:
import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; export default defineConfig({ plugins: [sveltekit()], ssr: { noExternal: ['tsparticles', '@tsparticles/slim', '@tsparticles/engine', '@tsparticles/svelte'] // add all tsparticles libraries here, they're not made for SSR, they're client only } });The demo website is here
There's also a CodePen collection actively maintained and updated here
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}
