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

Image tinting at a glance

• Select any image to reveal Tint Color, Tint Strength (0–100%), and Remove Tint.
• Default tint strength starts at 0% so users can dial tint in progressively.
• Works on-canvas and in exported images (Konva filter-based).

🔔 What’s New

• Canvas size now supports Preset + Custom (mm): You can use standard presets or custom widthMm/heightMm, with backward compatibility for legacy pageSize.size templates.
• Custom size input UX updated: Width/Height fields now include explicit labels and mm units, and size updates apply automatically as soon as values are valid (no extra Apply click).
• Outside boundary preview tightened: Default outsideBoundaryPreviewPadding is reduced from 120 to 80 for a closer canvas boundary preview.
• Image tinting for photos: New Tint Color and Tint Strength controls appear only when an image is selected. Tint now starts at 0% and is adjustable to 100%, with a one-click Remove Tint.
• Auto-placement for QR ID: When enabled, the QR ID text is automatically positioned above the Location text (LOCATION_ELEMENT_ID).
  If the Location element doesn’t exist, it’s centered on the canvas.
• Persistent QR ID across template switches: If the QR ID was visible before switching templates, it stays visible and reflows for the new template.
• Configurable custom-template delete confirmation: New askDeleteConfirmation prop lets you decide whether deletion should prompt users first.
• No more “ghost selection”: Selection is cleared when the selected element no longer exists after a template/elements change.
• New imperative API: reflowQrId() lets you programmatically re-snap the QR ID above Location (or center) at any time.

Heads up: qrIdText no longer controls placement. Position is computed automatically from the Location element or canvas center. See the updated “QR ID Controls” section.

🎬 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/[email protected]

OR

yarn add @arbisoft/[email protected]

🚀 Quick Start

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

export default function MyComponent() {
  const studioRef = useRef<React.ElementRef<typeof Studio>>(null);

  return (
    <>
      {/* Optional: a button to re-snap QR ID above the Location text */}
      <button onClick={() => studioRef.current?.reflowQrId?.()}>
        Realign QR ID
      </button>

      <Studio
        ref={studioRef}
        defaultTemplatesList={[]}
        customTemplatesList={[]}
        defaultImages={[]}
        customImages={[]}
        uploadImageCallBack={async (file) => {
          // Upload logic here
          return 'https://your-cdn.com/uploaded-image.png';
        }}
        elementsList={[]}
        qrLink="https://example.com"
        showQrIdToggle
        qrId="LOT-22-7B"
        askDeleteConfirmation={true}
        disableWhiteLabel
        title="New Title"
        styleProps={{ primaryColor: 'red' }}
        defaultText="Your Default Text"
        onSave={async (data) => {
          console.log('Saved data:', data);
          // { elements: [...], image: 'data:image/png;base64,...' }
        }}
        saveButtonText="Save Progress"
        locale="en"
        zoomLevel={100}
        canvasSize={{ mode: 'preset', preset: 'A4' }}
        onCanvasSizeChange={(size) => {
          console.log('canvasSize changed:', size);
        }}
        showOutsideBoundaryPreview
        outsideBoundaryPreviewPadding={80}
      />
    </>
  );
}

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. askDeleteConfirmation (Boolean)

Controls whether the user sees a confirmation dialog before deleting a custom template from the sidebar.

• Default: true
• true: show confirmation prompt before delete
• false: delete immediately without confirmation

Example:

<Studio
  askDeleteConfirmation={false}
/>

20. 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} />

21. 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;
  }}
/>

22. showBackgroundImagePicker (Boolean)

Used to set background image on entire canvas

Example:

<Studio showBackgroundImagePicker={true} />

23. showOpacityPicker (Boolean)

Related to showBackgroundImagePicker and it's opacity value

Example:

<Studio showOpacityPicker={true} />

24. allowedFormats (Array)

Used to set configure allowed images formats for our gallert

Example:

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

25. canvasSize (Object)

Set the initial/controlled canvas size in either preset or custom mode.

• preset mode example: { mode: 'preset', preset: 'A4' }
• custom mode example: { mode: 'custom', widthMm: 100, heightMm: 100 }

Legacy templates with { type: 'pageSize', size: 'A4' } are still supported.

Example:

<Studio canvasSize={{ mode: 'custom', widthMm: 120, heightMm: 80 }} />

26. onCanvasSizeChange (Function)

Callback fired whenever canvas size changes from the editor (preset or custom).

Example:

<Studio
  onCanvasSizeChange={(size) => {
    // size is either:
    // { mode: 'preset', preset: 'A4' }
    // or { mode: 'custom', widthMm: 120, heightMm: 80 }
    console.log(size);
  }}
/>

27. showOutsideBoundaryPreview (Boolean)

Shows extra stage area around the page so users can preview outside-page objects.

Example:

<Studio showOutsideBoundaryPreview />

28. outsideBoundaryPreviewPadding (Number)

Controls the outside preview spacing in pixels when showOutsideBoundaryPreview is enabled.

• Default: 80

Example:

<Studio
  showOutsideBoundaryPreview
  outsideBoundaryPreviewPadding={64}
/>

🆕 (Updated) QR ID Controls

29. showQrIdToggle (boolean)

Shows the “Show QR ID” toggle in the sidebar.

<Studio showQrIdToggle />

30. qrId (String | Number)

The value rendered in the QR ID text when the toggle is ON.

Example:

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

31. qrIdText (deprecated for placement)

Deprecated for positioning.
The QR ID position is now computed automatically:

• If LOCATION_ELEMENT_ID (Location text) exists → QR ID is centered above it.
• Otherwise → QR ID is centered on the canvas.

You may still pass stylistic hints that your theme may read (e.g., color),
but x/y positioning fields are ignored for insert/reflow.

Example:

<Studio
  showQrIdToggle
  qrId="LOT-22-7B"
/>