@arbisoft/react-design-tool v1.0.16

🎨 React Design Tool (by @arbisoft)

A React component for creating and editing designs with templates, images, and customizable elements.
A JavaScript framework for building your own Canva-like design editors.

With this tool, you can:

• Add and manipulate shapes, images, QR codes, and text
• Load and switch between multiple templates
• Customize and edit elements on the canvas
• Save the final design data and image output

Perfect for integrating into applications that require user-driven visual content creation.

🎬 Studio Preview

Live Walkthrough (GIF)

🖥️ Demo

Check out the live demo here:

📦 Installation( react >= 19 )

npm install @arbisoft/react-design-tool

OR

yarn add @arbisoft/react-design-tool

⚠️ Important: Installation Guide for React 18 and Below

npm install @arbisoft/react-design-tool@1.0.15

OR

yarn add @arbisoft/react-design-tool@1.0.15

🚀 Quick Start

import React, { useRef } from 'react';
import { Studio } from '@arbisoft/react-design-tool';

function MyComponent() {
  const studioRef = useRef(null);

  return (
    <Studio
      ref={studioRef}
      defaultTemplatesList={[]}
      customTemplatesList={[]}
      defaultImages={[]}
      customImages={[]}
      uploadImageCallBack={async (file) => {
        // Upload logic here
        return 'url_of_uploaded_image';
      }}
      elementsList={[]}
      qrLink={'http://example.com'}
      disableWhiteLabel={true}
      title={'New Title'}
      styleProps={{
          primaryColor: 'red',
      }}
      defaultText={'Your Default Text'}
      onSave={async (data) => {
        console.log('Saved data:', data);
      }}
      saveButtonText={'Save Progress'}
      locale={'en'}
    />
  );
}

export default MyComponent;

Props Configuration

1. defaultTemplatesList (Array of templates)

Pre-loaded default templates provided by the system.
Format: Array of template objects
Example:

defaultTemplatesList={[
  { 
    title: 'Business Card', 
    image: 'url', 
    elements: [...] 
  }
]}

2. customTemplatesList (Array of templates)

Format: Array of template objects
Example:

customTemplatesList={[
  { 
    title: 'Custom template', 
    image: 'url', 
    elements: [...] 
  }
]}

3. defaultImages (Array of URLs)

System-provided stock images.

Format: Array of image urls
Example:

defaultImages={[
  "https://example.com/stock1.jpg",
  "https://example.com/stock2.png"
]}

4. customImages (Array of URLs)

User-uploaded or organization-specific images.

Format: Array of image urls
Example:

customImages={[
  "https://example.com/stock1.jpg",
  "https://example.com/stock2.png"
]}

5. uploadImageCallBack (Async function)

User-defined function to handle file uploads and return a hosted URL.
By default, the component handles images as base64, which may not be ideal for storage.
To avoid large payloads and for better performance, it's recommended to upload the file and return the hosted URL.

Example:

uploadImageCallBack={async (file) => {
  // Upload logic here
  return 'https://yourcdn.com/uploaded-image.png';
}}

6. elementsList (Array of elements)

An array of design elements to be rendered on the canvas by default.
If you pass an elementsList, the Studio will initialize with these elements already placed on the canvas.

Example:

elementsList={[
  {...},{...},{...}
]}

7. qrLink (URL String)

A URL string used to generate a QR code element on the canvas.
When scanned, the QR will redirect to this link.

Example:

qrLink={'https://somelink.com'}

8. disableWhiteLabel (Boolean)

Boolean flag to hide the white-label (branding) section from the sidebar.
Set to true if you want to remove branding options from the sidebar.

Example:

disableWhiteLabel={true}

9. title (String)

Sets the title for the current template being edited in the Studio.

Example:

title={'New Title'}

10. styleProps (Object)

Use this to customize the styling of the Studio, including elements like the sidebar pills.
For example, by providing a primaryColor, you can change the color of the sidebar pills to match your branding color.

Example:

styleProps={{
  primaryColor: 'red',
}}

11. defaultText (String)

Overrides the predefined text content in the text section of the Studio.
There is a list of predefined texts that can be added to the canvas by clicking on them, each with predefined fonts and styles.
By providing this prop, you can change the default content for these texts.

Example:

defaultText={'Your Default Text'}

12. onSave (Async function)

By providing this function, a "Save" Call-to-Action (CTA) button will appear in the Studio.
When the user clicks on this button, the function will be executed, and you will receive the current design data.
This data includes an array of elements and the image of the canvas. You can then use this data as needed, such as storing the elements and image.

Example:

onSave={async (data) => {
  console.log('Saved data:', data); 
  // { elements: [array of elements],image:canvas image }
  // You can store this data or perform any actions you'd like
}}

13. saveButtonText (String)

Overrides the text for the Call-to-Action (CTA) button that appears in the Studio.

Example:

saveButtonText={'Save Progress'}

14. locale (String)

Sets the locale for the Studio to provide multilingual support.
You can set the locale prop to one of the supported languages: "fr", "en", "ru", "pl", "de", "es", or "it".
The default locale is "en".

Example:

locale={'fr'}

15. ref (reference)

A reference to the Studio component.

const studioRef = useRef();

<Studio
  ref={studioRef}
  ...
/>  

You can use this reference to call the onSave function whenever you want, and retrieve the updated elements and image of the canvas, along with any other data.

Example:

const handleSave = async () => {
  const data = await studioRef?.current?.onSave();
  console.log('Saved data:', data); 
  // { elements: [array of elements], image: canvas image }
};