FabricJS Design Tool

A comprehensive, modern design tool built with Fabric.js and React - ready for production use in any JavaScript framework.

✨ Features

• 🎨 Rich Canvas Editing - Complete design tool with shapes, text, images
• 🔧 Framework Agnostic Core - Use with React, Vue, Angular, or vanilla JS
• ⚛️ React Components - Pre-built UI components for React apps
• 📱 Responsive Design - Works on desktop and mobile
• 🔒 TypeScript Support - Full type definitions included
• 🚀 Production Ready - Optimized builds and tree-shaking
• 📦 Modular Architecture - Import only what you need

🚀 Quick Start

Installation

npm install @rifrocket/fabricjs-design-tool

Basic Usage (Any Framework)

import { useCanvasManager, shapeFactory } from '@rifrocket/fabricjs-design-tool';

// Initialize canvas
const canvasManager = useCanvasManager();

// Create shapes
const rect = shapeFactory.createRectangle({
  left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 100
});

// Add to canvas
canvasManager.addObject(rect);

React Components

import React from 'react';
import { 
  CanvasWrapper, 
  Header, 
  LeftSidebar, 
  RightSidebar 
} from '@rifrocket/fabricjs-design-tool/ui';

function DesignApp() {
  return (
    <div className="design-app">
      <Header />
      <div className="design-layout">
        <LeftSidebar />
        <CanvasWrapper />
        <RightSidebar />
      </div>
    </div>
  );
}

📚 Documentation

• 📖 Getting Started - Installation, setup, and basic usage
• 🎨 Core API Reference - Framework-agnostic API documentation
• ⚛️ React Components - React UI components reference
• 🎨 Customization Guide - Theming, custom shapes, and plugins
• Troubleshooting - Common issues and solutions
• 🤝 Contributing - Complete setup guide and development workflow
• 📋 Changelog - Version history and changes

🎯 Architecture

This library provides two main packages from a single install:

Core Library (fabricjs-design-tool)

Framework-agnostic functionality that works everywhere:

• Canvas management hooks
• Shape creation utilities
• Export/import functions
• Type definitions

UI Components (fabricjs-design-tool/ui)

React-specific components for quick implementation:

• Complete design interface
• Customizable toolbar
• Property panels
• Drag-and-drop shapes

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for comprehensive details on:

🚀 Quick Setup

git clone https://github.com/YOUR_USERNAME/fabricjs-design-tool.git
cd fabricjs-design-tool
npm install
npm run dev

📋 Available Commands

• npm run dev - Start development server
• npm run build:lib - Build library for distribution
• npm run lint - Check code quality
• npm run lint:fix - Auto-fix linting issues
• npm run clean - Clean build artifacts

🚀 Automated Deployment

This project uses GitHub Actions for automated deployment:

• GitHub Pages: Auto-deploys documentation and demo on every push to main
• NPM Publishing: Auto-publishes to npm when package.json version changes
• Releases: Auto-creates GitHub releases with tags when version changes

To publish a new version:

1. Update the version in package.json
2. Push to main branch
3. GitHub Actions handles the rest automatically!

🏗️ Development Workflow

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

For detailed setup instructions, project structure, code style guidelines, and testing procedures, please read the Contributing Guide.

📄 License

MIT © [Your Name]

🔗 Links

• 📖 Documentation
• 🌐 Live Demo
• 🐛 Report Issues
• 📦 NPM Package

Built with ❤️ using Fabric.js and React