Canvas & Widget Desktop Application

This project is a cross-platform desktop application built with Electron, React, and TypeScript, implementing a basic canvas and widget management system.

Live Demo

Watch demo video on Loom

Features

1. Canvas System

• Create, name, search and manage multiple canvases
• Visual indication of the active canvas
• Add, arrange, and manage widgets within each canvas

2. Widget System

Text Editor Widget

• Simple rich text editor for writing and formatting content

Image Display Widget

• Displays images with basic URL controls

Data Table Widget

• Basic row and column table for organizing information
• Add/remove rows and columns
• Edit cell values
• Editable column names

All widgets are:

• Resizable and draggable within the canvas
• Configurable with properties/settings

Tech Stack

• Electron (Desktop Application Framework)
• React + TypeScript (Frontend UI)
• Zustand (Global State Management)
• Tailwind CSS (Styling)
• React-RND (Drag & Resize Functionality)
• React-Quill (Rich Text Editor)
• Framer motion (Animation)

Installation

1. Clone the repository:

git clone https://github.com/devdignesh/next99-electron-app.git
cd next99-electron-app

2. Install dependencies:

npm install

3. Run the development server:

npm run dev