[Help Wanted] tsParticles Options GUI Editor

#html #css #javascript #showdev

The tsParticles options are becoming huge and I think a GUI editor that can be easily added could help a lot find the right configuration for everyone.

I started with dat.GUI but it didn't fit very well because it handles array really bad, and undefined too.

So I restarted from scratch but it needs a lot of work for creating the right editor components, if you want to start contributing here it's a good place to start because you'll explore all the options combinations.

You can find the editor project here:

https://github.com/matteobruni/tsparticles/tree/dev/core/editor

(/core/editor from this project root folder, for now only in dev and staging branch)

This issue for now it's not scheduled for a deadline, but it has a requirement: No UI frameworks like React, Angular, Vue, jQuery or others, this must be easily added to all tsParticles installations.

This is also a good first issue for everyone because it's not requiring many skill, just some DOM manipulation and creativity to create good looking editor.

Top comments (6)

Ben Halpern • Jul 8 '20

I've been messing around with tsParticles for a possible landing page for forem.com.

(The real one is better than a 1 second gif)

I just have it on my local machine as a concept after seeing your posts about it here.

Michael Schmerbeck • Jul 9 '20 • Edited

Nice man! Now the normal js particles will still run just fine in a TypeScript enabled app correct? (all of mine are backwards compatible)...so this is just for fun but really for API Autocomplete?

That is my favorite aspect/feature of TypeScript, api discovery!

Matteo Bruni • Jul 9 '20

It's more than a TS porting of the old particles.js library. I fixed some bugs and some incomplete behaviours like collisions.
I've also added many new features to create many more configurations.
This library still support all the existing particles.js config out there but a tsParticles config won't work in particles.js