Supercharge Vecta's Functionality with JavaScript Based Plugins

August 23, 2018 ·  Thomas Yip
Software Development Director · Success Stories · How to Vecta

Vecta is more than just a normal browser-based SVG editor, it's especially powerful when you have all the flexibility you need to make the most out of the platform.

Plugins can drastically change the way you work, saves time and enhances productivity by eliminating repetitive work and human errors. It's like drawing with superpowers!

With plugins, you can programmatically customize certain functionalities and features to cater to your own needs and usage.

To get started, we test drive Vecta's plugins firsthand ourselves and did cool stuffs like this:

Welcome to Vecta's plugins
Welcome to Vecta's plugins

And some other useful plugins below. All these plugins are available in your editor by default so feel free to try them out.

1. Material Design and Font Awesome icons

Doing a quick mockup in Vecta? Select from 932 icons from Material.io font icons or 1147 icons from Font Awesome icons to import directly into your drawing, and start moving them around!

Access to over thousands of icons use them directly in your drawing
Access to over thousands of icons use them directly in your drawing

2. Sharpener

Want your SVG graphics to always stay sharp and crisp? Forget about tweaking your shapes manually, all you need is a Sharpener! It automatically snap your shapes to the nearest grid to ensure that your shapes are always on grid, so your shapes stay perfectly sharp and crisp even when displayed on websites!

Use sharpener to ensure your shapes are crisp
Use sharpener to ensure your shapes are crisp

3. JSON to Tree

JSON is a great data format especially for a JavaScript developer. However, it's not easy to describe data in JSON format. Wouldn't it be great if you could just drop a JSON file in Vecta and a tree visualization is created. Using this plugin, you could just drag and drop a JSON file and have it converted to tree view for easy navigation, to analyze and validate JSON.

Drag and drop JSON file to get a tree view
Drag and drop JSON file to get a tree view

4. Pie Chart and Line Chart

Easily create pie chart and line chart in Vecta to convey data to your readers in presentations. With a click, your pie chart and line chart will be ready for you to tell your stories!

Use line chart to better visualize your data
Use line chart to better visualize your data
Input your data and get a pie chart done
Input your data and get a pie chart done

5. TSV to table

TSV is widely portable since it is universally accepted by Google Sheets and Excel, and now you can even show your data in Vecta drawing. Drag and drop a TSV file into your drawing and this plugin will automatically tabulate a table for you.

Drag and drop TSV file onto your drawing
Drag and drop TSV file onto your drawing

6. Scatterer

Scatterer randomly distribute shapes to make patterns on your drawing. Sometimes it's just hard for us to intentionally randomize shapes to make nice patterns, but now with scatterer, you can easily make a simple and pretty background for your website or even desktop wallpaper.

Snowflakes pattern
Snowflakes pattern

Ready to build yourself a tailor-made superpower on Vecta? Here's our API documentation to help you get started! Share to us what you've got, as we're excited to hear about your badass plugins!

AUTHOR

Thomas Yip
Software Development Director

As the creator and founder of Electra Cloud, which is now known as Capital Electra X, he introduced the market to an innovative, disruptive, and fully cloud-native electrical CAD solution. The driving force behind Capital Electra X, he is committed to shaping the future of easy-to-use Electrical CAD software development. Find him on Linkedin.

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

vecta.io Early Access