<h1>Getting started with plugin development<aname="getting-started-with-plugin-development"href="#getting-started-with-plugin-development"class="heading-anchor">🔗</a></h1>
<p>In this article you will learn the basic steps to build and test a plugin in Joplin.</p>
<p>## Setting up your environment</p>
<p>First you need to setup your environment:</p>
<ul>
<li>Make sure you have <ahref="https://nodejs.org/">Node.js</a> and <ahref="https://git-scm.com">git</a> installed.</li>
<li>Install Joplin and run it in development mode.</li>
</ul>
<p>You will also need to have Joplin installed and running in development mode, which we'll describe later.</p>
<p>But first install Yeoman and the Joplin Plugin Generator:</p>
<pre><code>npm install -g yo generator-joplin
</code></pre>
<p>Then to create the plugin, run:</p>
<pre><code>yo joplin
</code></pre>
<p>This will create the basic scafolding of the plugin. At the root of it, there is a number of configuration files which you normally won't need to change. Then the <code>src/</code> directory will contain your code. By default, the project uses TypeScript, but you are free to use plain JavaScript too - eventually the project is compiled to plain JS in any case.</p>
<p>The <code>src/</code> directory also contains a <ahref="https://github.com/laurent22/joplin/blob/dev/readme/api/references/plugin_manifest/">manifest.json</a> file, which you can edit to set various information about the plugin, such as its name, homepage URL, etc.</p>
<h2>Building the plugin<aname="building-the-plugin"href="#building-the-plugin"class="heading-anchor">🔗</a></h2>
<p>The file <code>src/index.ts</code> already contain some basic code meant for testing the plugin. In particular it contains a call to <ahref="https://joplinapp.org/plugin/api/classes/joplinplugins.html">joplin.plugins.register</a>, which all plugins should call to register the plugin. And an <code>onStart()</code> event handler, which will be executed by Joplin when the plugin starts.</p>
<p>To try this basic plugin, compile the app by running the following from the root of the project:</p>
<pre><code>npm run dist
</code></pre>
<p>Doing so should compile all the files into the <code>dist/</code> directory. This is from here that Joplin will load the plugin.</p>
<h2>Testing the plugin<aname="testing-the-plugin"href="#testing-the-plugin"class="heading-anchor">🔗</a></h2>
<p>In order to test the plugin, you might want to run Joplin in <ahref="https://github.com/laurent22/joplin/blob/dev/readme/api/references/development_mode/">Development Mode</a>. Doing so means that Joplin will run using a different profile, so you can experiment with the plugin without risking to accidentally change or delete your data.</p>
<p>Finally, in order to test the plugin, open the Setting screen, then navigate the the <strong>Plugins</strong> section, and add the plugin path in the <strong>Development plugins</strong> text field. For example, if your plugin project path is <code>/home/user/src/joplin-plugin</code>, add this in the text field.</p>
<p>Restart the app, and Joplin should load the plugin and execute its <code>onStart</code> handler. If all went well you should see the test message in the plugin console: "Test plugin started!".</p>
<li>You might want to check the <ahref="https://github.com/laurent22/joplin/blob/dev/readme/api/tutorials/toc_plugin/">plugin tutorial</a> to get a good overview of how to create a complete plugin and how to use the plugin API.</li>
