🎨 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.55

OR

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

🚀 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. defaultQrLogo (String)

Sets a default logo image to appear inside the QR code when the Studio loads.

Example:

defaultQrLogo={'https://yourcdn.com/qr-logo.png'}

13. 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
}}

14. saveButtonText (String)

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

Example:

saveButtonText={'Save Progress'}

15. 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'}

16. ref (reference)

A reference to the Studio component.

const studioRef = useRef();

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

You can access the following properties via studioRef.current:

• onSave() – Manually trigger the save operation and retrieve the updated elements and image of the canvas, along with any other data.
• loading – Get the current loading state (boolean).
• setLoading(true | false) – Programmatically set the loading state of Studio.

Example:

const studioRef = useRef();

// Access loading state
const isLoading = studioRef?.current?.loading;

// Set loading state
studioRef?.current?.setLoading(true);

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

17. onCreateNewTemplate (Function)

A callback function that is triggered when a user clicks the "New Template" button from within the editor.
It receives the freshly generated array of canvas elements so you can store it in your own backend (e.g., as a custom template).

Example:

onCreateNewTemplate={(elements) => {
  // Save new custom template to backend
  axios.post('/api/templates', {
    template_name: 'New Custom Template',
    template_language_id: 2,
    json_data: elements,
  });
}}

18. onTemplateSelect (Function)

A callback function triggered whenever a user selects a template (default or custom) from the template sidebar. It receives the backend id of the selected template (if available), or null if the canvas was reset (e.g., for a new template).

Example:

onTemplateSelect={(templateId) => {
  console.log('User selected template ID:', templateId); // null if new template
  setSelectedTemplateId(templateId);
}}

19. zoomLevel (Number)

Sets the initial and externally controlled zoom level of the canvas.

• Accepts a number (percentage value, e.g., 100 for 100%)
• Dynamically updates canvas zoom level when the value changes

Example:

<Studio zoomLevel={80} />

20. uploadQRLogoImage (Async Function)

A separate callback for uploading QR code logos. This is useful when your QR logos follow a different upload flow than general images.

• Accepts a File
• Should return a URL string or an object with { url: string }

Example:

<Studio
  uploadQRLogoImage={async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    const res = await axios.post('/upload/logo', formData);
    return res.data.url;
  }}
/>

21. showBackgroundImagePicker (Boolean)

Used to set background image on entire canvas

Example:

<Studio showBackgroundImagePicker={true} />

22. showOpacityPicker (Boolean)

Related to showBackgroundImagePicker and it's opacity value

Example:

<Studio showOpacityPicker={true} />

23. allowedFormats (Array)

Used to set configure allowed images formats for our gallert

Example:

<Studio allowedFormats={['png', 'jpg']} />

(New) QR ID Controls

24. showQrIdToggle (Boolean)

Shows the “Show QR ID” toggle in the Templates sidebar.
If true, the user can add/remove a QR ID text element on the canvas.

Example:

<Studio showQrIdToggle />

25. qrId (String | Number)

The value to render as the QR ID when the “Show QR ID” toggle is enabled.

• If qrId is falsy (null, undefined, '', 0), enabling the toggle will not add the QR ID text.
• When toggled off and back on, the QR ID text is restored with the last used position/style (cached).

Example:

<Studio
  showQrIdToggle
  qrId="FA-98231"
/>

26. qrIdText (Object)

Controls the initial placement and appearance of the QR ID text only on first insert.
If the user later moves/edits it and toggles off/on, the element is restored from cache (last known position/style), so these options won’t re-apply until no cached version exists.

Coordinates are in base canvas units (unscaled page size, not affected by zoom).

Example:

<Studio
  showQrIdToggle
  qrId="LOT-22-7B"
  qrIdText={{
    x: 420,              // base canvas coords (unscaled)
    y: 760,
    width: 180,
    textAlign: 'right',
    color: '#FFFFFF',
    pill: true,
    pillColor: 'rgba(0,0,0,0.45)',
    outline: true,
  }}
/>