# Overview

### Features

**🧞  Plugins**

[**Plugins**](https://docs.mosaic.js.org/develop-an-extension/plugins) can easily stack onto one another, such way modifying the same place of the application multiple times. It is recommended to use the plugin system to implement functionality reusable among several projects.

Initial code

{% code title="@creator/application/src/index.js" %}

```javascript
/** @namespace Application/getData */
const getData = () => {
    return ['Initial data'];
}

const data = getData();
```

{% endcode %}

With this plugin

{% code title="@creator/extension/src/plugin/some.plugin.js" %}

```javascript
const plugin = (args, callback, context) => {
    const data = callback(...args);  // ['Initial data']

    return [
        ...data,
        'Data from the plugin'
    ];
};

module.exports = {
    'Application/getData': {
        function: plugin
    }
}
```

{% endcode %}

Produces this

```javascript
['Initial data', 'Data from the plugin']
```

{% content-ref url="hands-on-guides/quick-start" %}
[quick-start](https://docs.mosaic.js.org/hands-on-guides/quick-start)
{% endcontent-ref %}

**📔  Shadowing (Overrides)**

[**Overrides**](https://docs.mosaic.js.org/themes/parent-themes) of [**parent themes**](https://docs.mosaic.js.org/themes/extensions-and-themes) are the base of the theming mechanism. Use overrides to build your application on top of a parent application.

Initial code in the parent theme

{% code title="parent-ts-react-app/src/App.tsx" %}

```typescript
export class App extends PureComponent<{}, {}> {
  renderContent() {
    return <p>This is written in the parent theme in TS</p>;
  }

  render() {
    return (
      <div className="Application">
        { this.renderContent() }
      </div>
    );
  }
}

export default App;
```

{% endcode %}

With this override in the child theme

{% code title="react-app/src/App.js" %}

```javascript
import ParentApp from 'Parent/App';

export class App extends ParentApp {
  renderContent() {
    return (
      <>
        <p>This is written in the child theme in JS</p>
        { super.renderContent() }
      </>
    );
  }
}

export default App;
```

{% endcode %}

Produces this HTML output

```markup
<div class="Application">
  <p>This is written in the child theme in JS</p>
  <p>This is written in the parent theme in TS</p>
</div>
```

{% content-ref url="hands-on-guides/quick-start-1" %}
[quick-start-1](https://docs.mosaic.js.org/hands-on-guides/quick-start-1)
{% endcontent-ref %}

### Why use Mosaic?

**🔌  Make your application extensible**

By using Mosaic plugins, you may make any part of your project extensible and modifiable either from within the application itself or from installed Mosaic modules.

**🍇  Use granular micro-frontend architecture**

Make dependencies injected with plugins instead of importing them! This way, you keep ALL the logic related to the module WITHIN the module, even its use cases!

**🖌️  Theming**

Build your project by overriding an existing project's functionality! Have infinite amount of parent projects. Similar to straight up forking, but with actual core updating potential.

**🤝  Integrations with existing technologies**

No manual configuration tinkering required, we got you covered 🤝

There are several ways on how to get Mosaic in your application - we support [Next.js](https://docs.mosaic.js.org/getting-started/nextjs), [create-react-app](https://docs.mosaic.js.org/getting-started/create-react-app), and simple [Webpack](https://docs.mosaic.js.org/getting-started/webpack) installation. Some other technologies are coming soon, stay tuned 😎