BananaJS Logo BananaJS v1.0.0
GitHub

BananaJS Browser Development Dashboard

BananaJS provides a comprehensive browser-based development environment that mirrors all CLI functionality through an intuitive graphical interface. This dashboard serves as a powerful alternative to the command line, offering visual controls for all BananaJS features.

Dashboard Overview

The browser dashboard provides: Real-time project visualization One-click scaffolding Interactive file management Visual configuration tools Integrated documentation Access the dashboard by running:

banana serve
Then open http://localhost:5000/dashboard in your browser.

Core Features

  1. Project Creation Wizard Project Creation Interface The visual interface guides you through: Template selection (React, Vue, Firebase, etc.) Project configuration Dependency management Initial file structure setup

  2. File System Operations File Management Panel Perform all CLI file operations through the UI: Create Files/Folders: With appropriate boilerplate templates Upload Manager: Drag-and-drop interface with previews Code Editor: Built-in editor for quick modifications Template Gallery: Pre-made component templates

  3. Development Tools Dev Tools Panel

Additional browser-exclusive features: Live Dependency Manager: Visualize and modify package dependencies Environment Configuration: GUI for environment variables API Testing Suite: Built-in endpoint tester Performance Monitor: Real-time bundle analyzer

  1. Project Analytics Analytics Dashboard Track project health with: Bundle size visualizations Dependency graphs Code quality metrics Performance benchmarks Unique Browser Features Visual CLI Command Builder: Assemble complex commands through UI controls See real-time command preview Save command presets for future use

Template Marketplace: (available soon)

Browse and install community templates Manage template versions Preview templates before application Collaboration Mode: Share project sessions with team members Real-time collaborative editing Commenting and annotation system

Getting Started

Install BananaJS globally:


```bash
npm install -g bananajs
Launch the development server:

banana serve
Open the dashboard in your browser at:

http://localhost:5000/dashboard
Keyboard Shortcuts
Shortcut	Action
Ctrl+Shift+N	New Project
Ctrl+Alt+F	New File
Ctrl+Alt+D	Open Dashboard
Ctrl+Space	Command Palette
Browser vs CLI Comparison
Feature	Browser Dashboard	CLI
Project Creation	Guided Wizard	Command-based
File Operations	Drag-and-Drop	Manual Commands
Configuration	Visual Editor	Config Files
Learning Curve	Beginner Friendly	Developer Familiar
Advanced Features	Limited	Full Access