A lightweight, modern web application for viewing and editing Google Sheets data through n8n workflows. Built with React and designed for simplicity, this tool provides a clean interface for managing spreadsheet data without the overhead of traditional spreadsheet applications.
- Lightweight Alternative: No need for heavy spreadsheet applications like Excel or Google Sheets web interface
- Custom Workflows: Leverage n8n's powerful automation capabilities for data operations
- Mobile-Friendly: Responsive design works seamlessly on desktop and mobile devices
- Real-time Updates: Direct integration with Google Sheets through n8n webhooks
- Customizable: Easy configuration for multiple documents and sheets
- Production Ready: Built-in error handling, validation, and deployment options
┌─────────────────┐ ┌──────────────┐ ┌─────────────────┐
│ React App │◄──►│ n8n │◄──►│ Google Sheets │
│ (Frontend) │ │ (Backend) │ │ (Database) │
└─────────────────┘ └──────────────┘ └─────────────────┘
- Frontend: React application with Tailwind CSS for styling
- Backend: n8n workflows handle API calls to Google Sheets
- Data Source: Google Sheets as the data storage layer
- n8n installed and running
- Google Sheets API access
- Node.js (for development)
For a step-by-step setup process, see our Complete Setup Checklist.
Quick Overview:
-
- Install n8n
- Configure Google Sheets credentials
- Set up OAuth2 authentication
- Configure environment variables
-
- Run the template generator (creates Fetch, Update, and Delete workflows)
- Import workflows to n8n
- Configure document IDs
-
- Install dependencies
- Start the development server
- Access the application
MD-Sheet-Editor/
├── README.md # This file - Main project overview
├── SETUP_CHECKLIST.md # Complete step-by-step setup guide
├── md-sheet-editor/ # React frontend application
│ ├── README.md # Frontend setup and usage
│ └── src/ # React source code
└── n8n_templates/ # n8n workflow templates
├── README-n8n-generator.md # n8n setup and template generation
├── generate-n8n-templates.sh # Template generation script
└── output/ # Generated n8n workflows
README.md- Main project overview, architecture, and configuration guideSETUP_CHECKLIST.md- Complete step-by-step setup processmd-sheet-editor/README.md- Frontend application setup and deploymentn8n_templates/README-n8n-generator.md- n8n installation and workflow generation
- React 18 - Modern UI framework with hooks
- Tailwind CSS - Utility-first CSS framework
- Axios - HTTP client for API calls
- PM2 - Process manager for production deployment
- n8n - Workflow automation platform
- Google Sheets API - Data storage and retrieval
- Webhooks - Real-time communication
- Node.js - JavaScript runtime
- npm - Package manager
- ESLint - Code linting
- PostCSS - CSS processing
- Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
- Dark Theme: Modern, eye-friendly interface with professional styling
- Touch-Friendly: Optimized for mobile interactions and touch gestures
- Inline Editing: Edit data directly in the table with modal dialogs
- Real-time Updates: Instant synchronization with Google Sheets
- Multi-Document Support: Switch between different Google Sheets documents
- Multi-Sheet Support: Navigate between sheets within documents
- Row Deletion: Delete rows with confirmation dialog for safe data removal
- Global Search: Search across all columns in the current sheet
- Smart Filtering: Real-time filtering as you type
- Pagination: Handle large datasets efficiently with page navigation
- Search History: Clear search functionality with visual feedback
- Truncated Text: Long content is truncated with click-to-expand functionality
- Full-Content Modal: Click truncated cells to view complete content with full-screen editing
- Clickable URLs: Automatic URL detection with clickable links
- Data Formatting: Clean, readable data presentation
- Environment Validation: Automatic configuration checking on startup
- Error Handling: Graceful error management with user-friendly messages
- Fallback Strategy: Multiple endpoint support with automatic failover
- Loading States: Visual feedback during data operations
- Safe Deletion: Confirmation dialogs and proper error handling for row deletion
See MD Sheet Editor in action! This demo shows the key features including document selection, sheet navigation, data editing, search functionality, and row deletion.
The demo showcases the responsive design, dark theme, and intuitive user interface for managing Google Sheets data. The application now includes full CRUD operations: Create, Read, Update, and Delete.
The application uses environment variables for configuration:
REACT_APP_N8N_LOCALHOST- For local developmentREACT_APP_N8N_CUSTOM_DOMAIN- For production deployment
REACT_APP_N8N_PORT- n8n port (default: 5678)REACT_APP_N8N_FETCH_WEBHOOK- Fetch webhook name (default: Fetch-Rows-Multi)REACT_APP_N8N_UPDATE_WEBHOOK- Update webhook name (default: Update-Row-Multi)REACT_APP_N8N_DELETE_WEBHOOK- Delete webhook name (default: Delete-Row)REACT_APP_DOC_SHEET_CONFIG- Document and sheet configurationGOOGLE_SHEETS_OAUTH2_API_ID- Google Sheets credential ID for n8n
Local Development Only:
REACT_APP_N8N_LOCALHOST=localhost
REACT_APP_N8N_PORT=5678Production Only:
REACT_APP_N8N_CUSTOM_DOMAIN=n8n.yourdomain.comBoth Local and Production (Recommended):
REACT_APP_N8N_LOCALHOST=localhost
REACT_APP_N8N_PORT=5678
REACT_APP_N8N_CUSTOM_DOMAIN=n8n.yourdomain.com
REACT_APP_N8N_DELETE_WEBHOOK=Delete-Row- URL Generation: Automatically builds webhook URLs like
http://localhost:5678/webhook/{webhookName} - Fallback Strategy: Tries localhost first, then custom domain if configured
- Validation: Checks configuration on startup and shows clear error messages if invalid
cd md-sheet-editor
npm install
npm startcd md-sheet-editor
npm testYou can also run specific tests:
# Run environment validation tests
node src/utils/envValidation.test.js
# Run tests in watch mode
npm test -- --watchcd md-sheet-editor
npm run build
pm2 start serve --name sheet-editor -- -s build -l 3001- Complete Setup Checklist - Step-by-step setup guide
- n8n Setup & Templates - n8n installation and workflow generation
- Frontend Setup - React application setup and usage
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
For issues and questions:
- Follow the Complete Setup Checklist to ensure proper setup
- Review the n8n Setup Guide for backend issues
- Check the Frontend Setup Guide for application issues
- Lightweight: Minimal resource usage compared to traditional spreadsheet applications
- Customizable: Easy to adapt for different use cases
- Modern: Built with current best practices and technologies
- Scalable: Can handle multiple documents and large datasets
- Reliable: Built-in error handling and validation
- Mobile-Ready: Responsive design works on all devices
- Full CRUD Operations: Complete Create, Read, Update, and Delete functionality
- Safe Data Management: Confirmation dialogs and proper error handling for data operations
This project is licensed under the MIT License. You are free to use, modify, and distribute it as you wish.