# Customization for React.js

::references
  :::ref-guide{link="/docs/guides/renderers/react/#customization" title="Guide"}
  :::

  :::ref-example{link="/examples/basic/react" title="Basic"}
  :::

  :::ref-example{link="/examples/controls/react" title="Controls"}
  :::

  :::ref-github
  ---
  link: https://github.com/retejs/react-render-plugin
  title: Plugin
  ---
  :::

  :::ref-external{link="https://react.dev/" title="React.js"}
  :::
::

The following example demonstrates the implementation of custom nodes, sockets, and connections for **React.js**, allowing you to adapt them to your use cases. These elements can be dynamically configured based on the parameters of various objects (nodes, sockets, connections).

Additionally, a grid-like gradient background has been added using pure JS and CSS. Custom components visualized with **React.js** can be used independently of your tech stack, even [without JSX](https://react.dev/reference/react/createElement){rel="nofollow"}. Therefore, if your UI framework lacks integration, you can render parts of the editor using **React.js**, leveraging this example.

::kit
::

::example{#rete-js-v2-custom-node-jpwdh3 module="/src/editor.ts"}
::