# Presets

A preset is a set of pre-built functionality that typically forms the foundation of an editor but can be replaced with another preset from the same category or a custom one.

::diagram{caption="Architecture" name="presets/architecture"}
::

## Data structures

For example, there is a classic editor preset that provides classes such as Node, Connection, Input, Output, and Socket.

```ts
import { ClassicPreset } from 'rete';

const { Node, Connection, Socket, Input, Output, Control } = ClassicPreset
```

## Rendering

In addition, each render plugin has preset for displaying classic nodes based on the data structures mentioned above.

```ts
import { ReactPlugin, Presets as ReactPresets } from 'rete-react-plugin'

const reactPlugin = new ReactPlugin<Schemes, AreaExtra>({ createRoot })

reactPlugin.addPreset(ReactPresets.classic.setup())
reactPlugin.addPreset(ReactPresets.contextMenu.setup())
```

## Interaction

`rete-connection-plugin` comes with presets, one of which replicates the connection interaction functionality from framework v1. Additionally, an alternative preset with a simpler way to interact with connections has been included.

```ts
import { ConnectionPlugin, Presets as ConnectionPresets } from 'rete-connection-plugin'

const connection = new ConnectionPlugin<Schemes, AreaExtra>()

connection.addPreset(ConnectionPresets.classic.setup())
```

## Conclusion

In essence, the presets can be used in any scenario that involves the need to implement a particular functionality through the use of one or more alternative approaches.