Gravit Designer discussion

Plugin creation help


I’m interested in creating a plugin. The goal is to allow students to export a PDF file with the parameters we want. I will list them below, and you could tell me which ones you support.

  • Button in a menu
  • Basic UI (text and button)
  • Check if files only contains red and black
  • Trim canvas
  • Export as PDF

The purpose of all this is to prepare the file for laser cutting in one button!


Hi @DesjFe2, thanks for your interest in our plugin architecture. Yes, is perfectly possible to create such plugin.

  • Button in a menu
  • Basic UI
  • Export as PDF

Yes, we support that and all can be done within a plugin. About

  • Check if files only contains red and black - you mean you want to check if the only colors used in the document are red and black, right?
  • Trim canvas - you want to be able to export just part of the canvas instead of all of it, am I right?

Yes, perfect red (#FF0000) and perfect black (#000000). Also, the opacity must be 100%. This is a requirement for the software, and we have to ensure documents have these settings. This feature is not the priority, optional.

The plugin would resize the Canvas to be big only for what the document need. In Gravit <img src=’//’">


@DesjFe2 you can do all of these with the plugin architecture. Any question you may have on how to start or implement something please let me know, I will be glad to help.
We are working on start a API docs soon aswell, which will make it easier to everyone to develop a plugin.

1 Like

Hi @DesjFe2 just checking how is it going with your plugin? If you need any help on it, as we still don’t have API documentation, please let us know and we will help you on it.


I have been working on the plugin lately and I only need the documentation for the API reference to finish. The plugin needs to be ready for september, so I’ll wait for the documentation!

In the meantime, I have found two problem. The first one is building a UI. How can I display content of an HTML file (like src/template/dialog.html) in a gDialog instead of building the HTML with javascript, like here.

Also, my plugin is currently in french, because we are a french school. How can I translate it? I guess it will be in the docs.


Hi @DesjFe2, for your first problem, you can load external html using jQuery. Using gDialog, you can do something like this:

this._dialog = $('<div></div>');
$.get(process.cwd() + "/path/to/your/file.html", function(data) {

and after that instantiate your gDialog normally. That will load the html of the file directly into the gDialog. You can do this to any component you want, aswell with Gravit Designer UI, by selecting elements by class name.

About the translation, you want to provide both French and English languages, or just one of them? If you just want to use one language, you can hardcode the translation directly on the components.

Note: This is not available on the browser version right? Is there any cross-platform way to load html files @denner.erthal?

True. There should be a function that load files from the plugin directory. Ex : plugin.dir + "/path/to/your/file.html"

And @denner.erthal, your code is working! And I want to provide both languages.

@alex right, is not available. Browser version actually cannot even load files from hard drive because of CORS restrictions, that’s the main reason why we use the native version for the plugin architecture. But @DesjFe2 is right, I will improve it by using a function to get the relative path instead of nodeJS process.cwd(). For the browser version, we will have to implement a way to load the plugins from a .zip (or similar), so a function to the relative path would be better to package the plugins for publishing on the future.

@denner.erthal yes absolutely, the idea is that plugins will be uploaded / installed on our domain then so it can load fine. @DesjFe2 for now are you ok using jQuery directly like we do in designer code?

Yes it will be easier. Can you tell me what I can do for translating my plugin?

I’m currently evaluating the best way to translate plugins, as we have our own API for translations and we need to make sure there are no conflicts with the plugin translation and Gravit Designer language. I will provide you a sample as soon as I have it done.

@DesjFe2 in our next release of Gravit Designer (that should be about by the end of next week) we will introduce a few changes that will make translating plugins available. You need to wait for the release, but you can already check how to do it on this example:

Hello @denner.erthal

I just read your message, I was in vacation. I’ll take a look at this later this week and give you feedback.


@denner.erthal I’ve just tried to get the plugin-template to work on linux but with no luck. Downloading the zip failed and even if I downloaded it manually and placed it into node_modules/gravit-designer it will tell me that there is no electron app to connect to.

@OndrejBrinkel what happened when downloading the file? Also, did you extract the contents of the zip after place it into node_modules/gravit-designer?

@denner.erthal Sorry for the late reply:
This is the output of npm install:

~/gravit-designer-plugin-starter$ npm install
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update     to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.

> electron@1.7.9 postinstall /home/ondrej/gravit-designer-plugin-starter/node_modules/electron
> node install.js

> gravit-designer-plugin-starter@1.0.0 install /home/ondrej/gravit-designer-plugin-starter
> node build.js

Downloading Gravit Designer...

        throw Utils.Errors.INVALID_FORMAT;
Invalid or unsupported zip format. No END header found
npm ERR! errno 1
npm ERR! gravit-designer-plugin-starter@1.0.0 install: `node build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the gravit-designer-plugin-starter@1.0.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ondrej/.npm/_logs/2017-11-27T10_54_43_487Z-debug.log

Then I downloaded it manually, unzipped it manually to node_modules/gravit-designer and run npm run gulp start
and magically it worked!

Glad you were able to find a solution. We will keep track on the issues you had to improve our package.