Import Custom React Components

Orvanta already provides over sixty components for its users, accessible with a simple drag-and-drop. For more control and standardization with your existing stack, you might want to import your own components in React.

React & Orvanta

If you’re looking for a way to:

Build a complete React or Svelte app with Orvanta backend runnables, see Full-code apps.
Import whole React apps to Orvanta, see React app import.
Integrate Orvanta applications into a React-based project, see the Orvanta React SDK.

Once imported to Orvanta, custom React components will be able to interact with the rest of the app.

There are 3 main benefits of using your own components:

Reusing React components you’ve already written in other codebases.
Controlling the component fully, including theming, inputs, and outputs, allowing for more complex components and interactions.
Embedding very complex components such as a code editor.

If that’s not sufficient, you can even build your own app in React, or use full-code apps to build a complete React or Svelte frontend connected to Orvanta backend runnables.

How to import React components to the App editor

Clone the template project.
Install the dependencies:
Terminal window
```
npm install
```
Start the development server:
Terminal window
```
npm run dev
```
Open your browser to see the live result.
Start editing the src/Component.tsx file to start building your component.
Edit COMPONENT_NAME in vite.config.ts to match your component name. It will be useful later.
Build the IIFE using:
Terminal window
```
npm run build
```
Upload the dist/cc.iife.js to Orvanta and name the component as it has been named in vite.config.ts.