# Plugin overview

**There are numerous ways you can add functionality to the . This guide will give you an understanding of what a plugin is and the basic structure of a plugin.**

Most of what you can see in the are plugins. Even text styles are small plugins. In the image below you can see a basic overview of the different parts of the UI and where plugins can be added.

![](https://content.gitbook.com/content/PV331j1GMgm7C2hJ6722/blobs/nFBeZVvZgo3a9h0cyEuq/content-article-full.png)

## Anatomy of a simple sidebar plugin

_For a more practical step by step instructions on how to get started using the skeleton DevKit plugin see_ [_the quickstart guide_](https://github.com/Infomaker/dw-documentation/tree/89ef316ecc2545f627b27987592a99f910ebd089/quickstart.md)_._

The skeleton plugin will add a plugin to the sidebar with a few simple UI components. If you look at our Devkit skeleton plugin you will find the main plugin source in the `src` directory.

```
src/
    scss/
        index.scss
    index.js
    DevKitPackage.js
    DevKitComponent.js
```

### index.js

The index.js file is the starting point. When loaded this file will call `registerPlugin()` in the which register the plugin package.

```javascript
import {DevkitPackage} from './DevKitPackage'
import {registerPlugin} from 'writer'

(() => {
    // Register the plugin with the Writer when registerPlugin() is available
    if (registerPlugin) {
        registerPlugin(DevkitPackage)
    }
    else {
        console.error('Register method not yet available')
    }
})()
```

### DevKitPackage.js

The package defines a `configure()` function. This function is called by the after the plugin has been loaded and registered successfully. As parameters you get a `config` object which has all the methods you need to register components, commands, tools, keyboard shortcuts, translation labels and what not. In essences, the `config` object is what allows you to define all the bits and pieces of your plugin and define where they should go in the .

The DevKit skeleton package imports a sass/css file and a its own UI component, the `DevKitComponent`, which is added to the sidebar using `config.addToSidebar()`. It also registers a translation label using `config.addLabel()`.

```javascript
import './scss/index.scss'
import {DevKitComponent} from './DevKitComponent'

const DevKitPackage = {
    name: 'npwriterdevkit',
    id: 'se.infomaker.npwriterdevkit',
    configure: function(configurator, pluginConfig) {

        configurator.addToSidebar('main', pluginConfig, DevKitComponent)

        configurator.addLabel('Devkit plugin loaded', {
            en: 'Devkit plugin loaded',
            sv: 'Devkit plugin inläst'
        })
    }
}

export {DevKitPackage}
```

[Read more about the Package file and configurator.](../writer-plugin-building-blocks/package)

### DevKitComponent.js

User interface components are built using the React like Substance components. You will see this again and again in both tools, content objects, popovers and all other UI components you will define. The provides a few basic UI components and an API to manipulate most aspects of the and article data.

The DevKit skeleton plugin imports a `Component` from the `substance` module which all UI components inherit from. It also imports a `UIButton` and the `api` from the `writer` module.

The most important method is the `render()` method. See the DevKit skeleton for the complete source.

```javascript
import {Component} from 'substance'
import {UIButton, api} from 'writer'

class DevKitComponent extends Component {
    render($$) {
        const el = $$('div').addClass('devkit')

        const button = $$(UIButton, {
            label: 'Click me'
        })
        .on('click', () => {
            this.increaseClickCount()
        })

        el.append([
            $$('h2').append(
                this.getLabel('Devkit plugin loaded')
            ),
            $$('p').append(
                `You have clicked ${this.state.clickCount} times`
            ),
            button
        ])

        return el
    }

    increaseClickCount() {
        // ...
    }

    export {DevKitComponent}
}
```
