RapidCanvas Docs
  • Welcome
  • GETTING STARTED
    • Quick start guide
    • Introduction to RapidCanvas
    • RapidCanvas Concepts
    • Accessing the platform
  • BASIC
    • Projects
      • Projects Overview
        • Creating a project
        • Reviewing the Projects listing page
        • Duplicating a Project
        • Modifying the project settings
        • Deleting Project(s)
        • Configuring global variables at the project level
        • Working on a project
        • Generating the about content for the project
        • Generating AI snippets for each node on the Canvas
        • Marking & Unmarking a Project as Favorite
      • Canvas overview
        • Shortcut options on canvas
        • Queuing the Recipes
        • Bulk Deletion of Canvas Nodes
        • AI Guide
      • Recipes
        • AI-assisted recipe
        • Rapid model recipe
        • Template recipe
        • Code Recipe
        • RAG Recipes
      • Scheduler overview
        • Creating a scheduler
        • Running the scheduler manually
        • Managing schedulers in a project
        • Viewing the schedulers in a project
        • Viewing the run history of a specific scheduler
        • Publishing the updated data pipeline to selected jobs from canvas
        • Fetching the latest data pipeline to a specific scheduler
        • Comparing the canvas of the scheduler with current canvas of the project
      • Predictions
        • Manual Prediction
        • Prediction Scheduler
      • Segments and Scenarios
      • DataApps
        • Model DataApp
        • Project Canvas Datasets
        • Custom Uploaded Datasets
        • SQL Sources
        • Documents and PDFs
        • Prediction Service
        • Scheduler
        • Import DataApp
    • Connectors
      • Importing dataset(s) from the local system
      • Importing Text Files from the Local System
      • Connectors overview
      • Connect to external connectors
        • Importing data from Google Cloud Storage (GCS)
        • Importing data from Amazon S3
        • Importing data from Azure Blob
        • Importing data from Mongo DB
        • Importing data from Snowflake
        • Importing data from MySQL
        • Importing data from Amazon Redshift
        • Importing data from Fivetran connectors
    • Workspaces
      • User roles and permissions
    • Artifacts & Models
      • Adding Artifacts at the Project Level
      • Adding Models at the Project Level
      • Creating an artifact at the workspace level
      • Managing artifacts at the workspace level
      • Managing Models at the Workspace Level
      • Prediction services
    • Environments Overview
      • Creating an environment
      • Editing the environment details
      • Deleting an environment
      • Monitoring the resource utilization in an environment
  • ADVANCED
    • Starter Guide
      • Quick Start
    • Setup and Installation
      • Installing and setting up the SDK
    • Helper Functions
    • Notebook Guide
      • Introduction
      • Create a template
      • Code Snippets
      • DataApps
      • Prediction Service
      • How to
        • How to Authenticate
        • Create a new project
        • Create a Custom Environment
        • Add a dataset
        • Add a recipe to the dataset
        • Manage cloud connection
        • Code recipes
        • Display a template on the UI
        • Create Global Variables
        • Scheduler
        • Create new scenarios
        • Create Template
        • Use a template in a flow notebook
      • Reference Implementations
        • DataApps
        • Artifacts
        • Connectors
        • Feature Store
        • ML model
        • ML Pipeline
        • Multiple Files
      • Sample Projects
        • Model build and predict
    • Rapid Rag
  • Additional Reading
    • Release Notes
      • May 14, 2025
      • April 21, 2025
      • April 01, 2025
      • Mar 18, 2025
      • Feb 27, 2025
      • Jan 27, 2025
      • Dec 26, 2024
      • Nov 26, 2024
      • Oct 24, 2024
      • Sep 11, 2024
        • Aug 08, 2024
      • Aug 29, 2024
      • July 18, 2024
      • July 03, 2024
      • June 19, 2024
      • May 30, 2024
      • May 15, 2024
      • April 17, 2024
      • Mar 28, 2024
      • Mar 20, 2024
      • Feb 28, 2024
      • Feb 19, 2024
      • Jan 30, 2024
      • Jan 16, 2024
      • Dec 12, 2023
      • Nov 07, 2023
      • Oct 25, 2023
      • Oct 01, 2024
    • Glossary
Powered by GitBook
On this page
  • DataApps developed through ReactJS or Streamlit
  • Importing DataApps developed through ReactJS or Streamlit
  • Editing the Code of Imported ReactJS DataApps
  1. BASIC
  2. Projects
  3. DataApps

Import DataApp

PreviousSchedulerNextConnectors

Last updated 1 month ago

DataApps developed through ReactJS or Streamlit

If you have DataApps developed using popular frameworks like ReactJS and Streamlit, you can use the Import DataApp functionality to seamlessly integrate them into your project. To ensure a smooth integration, it’s important to select the correct DataApp type during the import process. If the wrong type is chosen, the DataApp may not function as expected.

Once your DataApp is successfully uploaded, the platform will automatically generate the relevant graphs and visualizations to enhance your user experience. Additionally, you can extend the functionality of your DataApp by integrating AskAI capabilities directly into the code. This allows you to query and analyze the data within your DataApp, providing a more interactive and dynamic experience.

This feature not only makes it easier to bring in DataApps from external sources, but it also gives you the power of AI-driven queries to unlock deeper insights from your data, creating a more customized and flexible experience.

Importing DataApps developed through ReactJS or Streamlit

Follow these steps to import DataApps developed using ReactJS or Streamlit:

  1. Hover over the menu icon and select Projects.

  2. Select the project for which you want to create DataApps and click the DataApps icon from the project-level navigation.

  3. Click the plus icon and select Import DataApp (or) click Import DataApp if there are no DataApps created in the project. This opens the Create DataApp page.

  1. Specify the following information on the Details tab:

DataApp Name: Enter the name of the DataApp.

DataApp Description: Provide a description for the DataApp.

Environment: Choose the desired environment for running the DataApp.

Choose Image: Upload an image to display on the DataApp card.

  1. Click Upload and select a ZIP file containing your DataApp code. You can use sample ZIP files to test the import feature or get started quickly.

  2. Select the DataApp Type (Streamlit or ReactJS) based on the framework using which the DataApp has been developed.

  3. Select the Python version in which the Streamlit DataApp was developed. It supports only two versions of Python - 3.8 and 3.10. However, selecting Python 3.8 version may have slower launch times and limited SDK support.

  4. Add metadata details in JSON format (key-value pairs).

  5. Click Create to complete the process. The DataApp will now appear as a card on the DataApps page, where you can open it to view the graphs or interact with the DataApp.

Perform the following actions clicking the Actions drop-down:

  • Modify the code of the imported ReactJS DataApp, using the Edit Code Option. For more details, see Editing the Code of Imported ReactJS DataApps section.

  • Copy the dataapps URL to share with the other business users, using the Copy option.

  • Open the dataapps on a new tab, using the Open in New Tab option.

  • View logs of DataApps to debug issues, using the Logs option.

  • Download the code to edit, using the Download Code option.

  • Delete the DataApp that is no longer required, using the Delete option.

  • Customize the branding appearance of your DataApp, using the Branding option. This opens the Branding modal. Enter your desired title in the DataApp Title field, then use the Upload from Computer option to upload your logo. Once you have added the title and logo, click Save to apply the changes. The customized title and logo will now appear on the AskAI page and will also be visible when the DataApp is opened in a new tab.

Editing the Code of Imported ReactJS DataApps

You can directly edit the code of imported ReactJS DataApps within the platform using the Edit Code option available in the kebab menu of each externally developed DataApp card. This opens the Bolt Editor, a fully integrated development environment where you can:

  • Modify and preview changes in real time

  • Compare original and modified code

  • Download or sync files with your local directory

  • Publish updates or reset to the original version

This feature enables data scientists and other users to seamlessly customize, debug, and manage their DataApps within the platform.

Steps to Edit the Code

  1. Open the Project Navigate to the project containing the imported DataApp you want to edit. This opens the canvas page.

  2. Go to DataApps From the left navigation panel, select DataApps. This displays the list of available DataApp cards.

  3. Open the Bolt Editor Hover over the relevant DataApp card, click the kebab menu (three vertical dots), and select Edit Code. This opens the Bolt Editor.

  4. Bolt Editor Overview

The Bolt Editor provides three key tabs to support your development workflow:

  • Code Modify the source code of the imported ReactJS DataApp. The full codebase is accessible within the editor. You can update logic, layout, styles, or components.

    Click Save to apply changes. This option becomes available only after changes are made. Use Undo to revert unsaved changes.

  • Diff Review a side-by-side comparison of the current version and the original source code. This helps ensure version control and avoids unintended changes.

  • Preview View a live rendering of the updated DataApp directly within the editor. You can validate UI behavior, test interactions, and ensure the app works as expected—without publishing the changes.

Additional Editor Options

  • Download Code Download the complete codebase for offline editing.

  • Sync Files Sync DataApp files between the platform and your local directory.

  • Toggle Terminal Open a built-in terminal to view real-time logs, track errors, and monitor background processes.

  • Reset Code Revert to the last published version and discard all unpublished changes.

  1. Publishing Changes

Once your changes are complete, click Publish to apply them to the DataApp. The updates will be reflected in the deployed version of your app.

Modify the DataApp details, using the Edit option. For more details, see section.

Configure the shutdown time of the DataApp, using the Config option. See section for more details.

Editing a DataApp
configuring shutdown time of the DataApp