loading...
Cover image for tsParticles Documentation Website

tsParticles Documentation Website

matteobruni profile image Matteo Bruni ・1 min read

Finally, the documentation website is shaping the way it should, or at least how I imagined it.

It's still far from being completed since many classes and interfaces need some documentation and more pages are needed, like how to create plugins, how to use react templates, or others.

Website Preview

If you want to see it working click the link below:

https://particles.js.org

The particle configurations are randomly picked so try refreshing the page.

If you have some cool ideas or want to contribute to adding documentation or fixing broken things you are welcome in the project.

GitHub logo matteobruni / tsparticles

tsParticles - Easily add particle animations to your website. Compatible also with React, Vue, Angular, Svelte, jQuery, Preact, Inferno

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code

Do you want to use it on your website?

This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🤩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from the old particles.js library.

If you like the typedoc template you can find it here

GitHub logo tsparticles / typedoc-particles-theme

TypeDoc template with tsParticles as animated background

Neo theme for TypeDoc

npm

This plugin contains a new theme for TypeDoc with tsParticles acting like an animated background.

preview

Visit the tsParticles reference to view this theme.

Visit http://typedoc.org/ to learn more about TypeDoc.

Theme

Build the theme by running npm run build .

After you install the module, you can use this theme in a build by running:

typedoc --theme ./node_modules/typedoc-particles-theme/bin/particles

Typedoc options

This plugin adds additional options that can be placed in your typedoc.json file.

Links

You may want to specify additional links to appear in your header that don't point to reference documentation but related documentation for your platform.

"particles": {
  "groups": [
    {
      "title": "Documentation"
      "pages": [
        {
          "title": "My Page"
          "source": "./markdown/index.md"
        }
      ]
    }
  ]
  "enableSearch"

You are welcome to contribute to that project too!

And remember to leave a star, the 1k star goal is really near!

Posted on by:

matteobruni profile

Matteo Bruni

@matteobruni

Full Stack Developer, mainly working in .NET with web technologies and mobile (Xamarin). WWDC14 Attendee, when Swift was presented, a bit rusty but can work in Swift too.

Discussion

pic
Editor guide
 

Very neat, and a great demonstration of the library! However, I'd recommend dramatically reducing speed of motion and animations on pretty much every demo - motion and changing colors are really distracting while trying to read docs.

 

Thanks!! I’ll fix that later, I didn’t try to read documentation, I was too busy checking transparency and particles 😅