Build a Customizable Canvas Editor with React, Vite, Tailwind CSS, and react-fabric-canvas-designer

If you've ever wanted to integrate a powerful design canvas in your React application, you're in luck. react-fabric-canvas-designer is a React wrapper around Fabric.js, built to offer an intuitive and customizable canvas editor with easy-to-use APIs and components.

In this blog, we'll walk through setting up a design editor using:

• Vite (for a fast build)

• Tailwind CSS (for styling)

• react-fabric-canvas-designer (for the core canvas functionality)

Let’s get started

Step 1: Setting Up the Project

Start by creating a new Vite + React project:

npm create vite@latest react-canvas-editor -- --template react-ts
cd react-canvas-editor

Then install the dependencies:

npm install

Step 2: Add Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then replace the contents of src/index.css with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import this CSS file in main.tsx:

import './index.css';

---

Step 3: Install react-fabric-canvas-designer

Now let’s install the design library:

npm install react-fabric-canvas-designer

---

Step 4: Create the Canvas Editor

Create a new component CanvasEditor.tsx:

import React from 'react';
import { observer, useGoogleFontsLoader, useReactFabricCanvas } from 'react-fabric-canvas-designer';

const CanvasEditor = observer(() => {
  const { fonts, loading } = useGoogleFontsLoader("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
  const { UIComponent, reactFabricStore } = useReactFabricCanvas({
    canvasWidth: 1000,
    canvasHeight: 500,
    backgroundColor: "#ffffff",
    fontList: fonts
  });

  if (loading || !reactFabricStore) return <p>Loading...</p>;

  return (
    <div className="grid grid-cols-12 grid-rows-12 gap-2 bg-gray-100 h-screen w-full p-4">
      <div className="row-span-7 col-start-1 row-start-3">
        <div className="grid grid-cols-2 justify-items-center gap-2">
          {reactFabricStore.availableTools.positionTools.map((tool, i) => (
            <span key={i}>{tool.UIComponent}</span>
          ))}
        </div>
        <div className="grid grid-cols-2 mt-5 justify-items-center gap-2">
          {reactFabricStore.availableTools.alignmentTools.map((tool, i) => (
            <span key={i}>{tool.UIComponent}</span>
          ))}
        </div>
      </div>

      <div className="overflow-auto justify-self-center self-center col-span-9 row-span-9 col-start-2 row-start-2">
        {UIComponent}
      </div>

      <div className="col-span-2 row-span-12 col-start-11 row-start-1 overflow-y-scroll p-2 space-y-2">
        {reactFabricStore.availableProperties.map((property, i) => (
          <div key={i}>
            <label className="block text-sm font-medium mb-1">{property.name}</label>
            {property.UIComponent}
          </div>
        ))}
      </div>

      <div className="col-span-7 col-start-3 row-start-11 flex justify-around">
        {reactFabricStore.availableTools.creationTools.map((tool, i) => (
          <span key={i}>{tool.UIComponent}</span>
        ))}
      </div>
    </div>
  );
});

export default CanvasEditor;

Then use it in your App.tsx:

import React from 'react';
import CanvasEditor from './CanvasEditor';

function App() {
  return <CanvasEditor />;
}

export default App;

---

Step 5: Run the App

Now launch the app with:

npm run dev

Visit http://localhost:5173 and you’ll see your canvas editor live!

---

How It Works

• Canvas & Tools: The hook useReactFabricCanvas gives you both the canvas component (UIComponent) and a store (reactFabricStore) with tools and object properties.

• Google Fonts: You can load custom fonts dynamically with useGoogleFontsLoader.

• Controls: Easily plug in UI controls for alignment, layer management, object creation, and more.

• Reactivity: Since the package uses MobX, be sure to wrap components using observer.

---

🧩 Bonus: Input Components

The library also provides handy form components like:

• InputText, InputNumber, InputRange

• InputColor, InputSelect

These are auto-wired to canvas object properties when using the store.

💬 Have questions or want to contribute?

Check out the GitHub repo or leave a comment below!