# 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 😎


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mosaic.js.org/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.