CalcPadJS

A Node.js test environment for JavaScript code with Vue 3 and editable data grids using Grid.js. This repository is specifically designed to work with Claude Code for rapid prototyping and development of Vue.js applications.

Features

• Vue 3 Integration: Modern reactive UI framework loaded via CDN
• Editable Data Grid: Interactive tables with Grid.js supporting inline editing
• Express Server: Simple web server for serving static assets
• Modular Components: CalcPad-style component structure with separated script blocks
• Docker Support: Containerized deployment with Node.js 24 Alpine
• Claude Code Ready: Optimized for AI-assisted development workflows

Quick Start

Prerequisites

• Node.js (v14 or higher recommended)
• npm

Installation

1. Clone the repository:

git clone https://github.com/imartincei/CalcPadJS.git
cd CalcPadJS

2. Install dependencies:

npm install

3. Start the server:

node app.js

4. Open your browser to http://localhost:8080

Docker Deployment

docker build -t calcpadjs .
docker run -p 8080:8080 calcpadjs

Project Structure

CalcPadJS/
├── app.js              # Express server configuration
├── package.json        # Node.js dependencies
├── views/              # Static HTML files
│   ├── index.html     # Home page with navigation
│   ├── VueTestSimple.html # Basic Vue components
│   ├── vuegrid.html   # Editable data grid
│   └── VueTest2.html  # Grid with dropdown filtering
├── Dockerfile          # Docker configuration
├── CLAUDE.md          # Claude Code development guidelines
└── README.md          # This file

Available Test Pages

Navigate to different test pages from the home page:

• Vue Test Simple (/simple) - Basic Vue 3 components with input fields, buttons, dropdowns, and checkboxes
• Vue Grid (/grid) - Editable data grid with search, sort, pagination, and inline editing
• Vue Test 2 (/test2) - Advanced grid with dropdown filtering and enhanced data management

Usage

Grid Features

• Search: Real-time filtering across all columns
• Sort: Click column headers to sort data
• Pagination: Navigate through large datasets
• Inline Editing: Click any cell to edit content
• Add Rows: Dynamic row addition with button
• Filtering: Dropdown-based data filtering

CalcPad Architecture

The application follows a modular Vue component structure where:

• Data objects are defined in separate script blocks
• Methods are stored in methodsObject
• Export variables are maintained in exportVars
• Components use CalcPad-style commenting for code generation

This architecture is optimized for:

• Claude Code Integration: Structured for AI-assisted development
• Rapid Prototyping: Easy component creation and modification
• WebView2 Compatibility: Code can run in embedded web components
• Modular Development: Self-contained component blocks

Development with Claude Code

This repository is specifically configured for use with Claude Code:

1. CLAUDE.md: Contains development guidelines and preferences
2. Modular Structure: Components are built in separate, identifiable blocks
3. CDN Dependencies: All libraries loaded via script tags for simplicity
4. CalcPad Format: Consistent commenting and structure for code generation

Recommended Workflow

1. Use Claude Code to generate new components
2. Test components in the existing test pages
3. Create new test pages for complex features
4. Use the home page navigation to organize tests

Technology Stack

• Backend: Node.js, Express.js
• Frontend: Vue 3, Grid.js
• Styling: CSS3, responsive design
• Architecture: CalcPad-style modular components
• Deployment: Docker, Node.js 24 Alpine

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes following the CalcPad structure
4. Test thoroughly using the test pages
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Development Notes

• No build process required - uses CDN for all dependencies
• Designed for WebView2 component compatibility
• All modules must be compatible with Vue.js
• Components are structured for code generation tools
• Optimized for Claude Code AI-assisted development