psychic-meme

lightsabers

Try it!

=> lightsabers.html

why “lightsabers”

“There are your father’s parentheses. Elegant weapons for a more… civilized age.” – [[https://xkcd.com/297/]]

[generated docs Mobile Lisp REPL PWA

A mobile-optimized Progressive Web App for interactive Lisp programming, featuring auto-formatting, syntax highlighting, and a custom virtual keyboard designed for Lisp development.

Features

Core Functionality

Mobile-Optimized Interface

Developer Features

Supported Languages

BiwaScheme (Scheme)

Complete Scheme implementation with support for:

Fennel

Lisp syntax that compiles to Lua:

Architecture

Modular Language Engine

The app uses a plugin-based architecture where each language implements the LanguageEngine interface:

class LanguageEngine {
  async evaluate(code)     // Execute code and return result
  format(code)             // Auto-format with proper indentation
  getCompletions(partial)  // Provide autocomplete suggestions
  getKeywords()            // Return syntax highlighting keywords
  getSpecialKeys()         // Define custom keyboard layout
  reset()                  // Reset REPL state
}

Key Components

Installation & Deployment

Option 1: Static File Deployment

The app is entirely self-contained in a single HTML file.

  1. Download the HTML file: 
    # Save the artifact as index.html
curl -o index.html [your-html-file-url]
  2. Deploy to any static hosting: 
    # GitHub Pages
git add index.html
git commit -m "Add Lisp REPL"
git push origin gh-pages
   
# Netlify
netlify deploy --prod --dir .
   
# Vercel
vercel --prod
   
# AWS S3
aws s3 cp index.html s3://your-bucket/ --acl public-read
  3. Local development: 
    # Python
python -m http.server 8000
   
# Node.js
npx serve .
   
# PHP
php -S localhost:8000

Netlify

  1. Create a new site on netlify.com
  2. Drag and drop the HTML file
  3. Your app is live instantly with HTTPS and PWA support

GitHub Pages

  1. Create a new repository
  2. Upload the HTML file as index.html
  3. Enable GitHub Pages in repository settings
  4. Access at https://username.github.io/repository-name

Vercel

  1. Install Vercel CLI: npm i -g vercel
  2. Run vercel in the directory with your HTML file
  3. Follow the prompts for instant deployment

Firebase Hosting

npm install -g firebase-tools
firebase init hosting
# Place HTML file in public directory
firebase deploy

Option 3: Docker Deployment

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/
EXPOSE 80

docker build -t lisp-repl .
docker run -p 8080:80 lisp-repl

Usage

Getting Started

  1. Open the app in your mobile browser
  2. Select a language (Scheme or Fennel) from the dropdown
  3. Start typing Lisp expressions
  4. Use the virtual keyboard for special symbols
  5. Press ENTER or tap the ENTER key to evaluate

Keyboard Shortcuts

Touch Gestures

Voice Input

Customization

Adding New Languages

  1. Create a new class extending LanguageEngine
  2. Implement the required methods
  3. Add to the engines object in MobileLispREPL
  4. Update the language selector

Example:

class ClojureScriptEngine extends LanguageEngine {
  async evaluate(code) {
    // Your ClojureScript evaluation logic
  }
  
  getKeywords() {
    return ['defn', 'let', 'if', 'loop', 'recur'];
  }
}

Customizing the Keyboard

Modify the getSpecialKeys() method in any language engine:

getSpecialKeys() {
  return [
    ['(', ')', 'your-symbol', "'"],
    ['custom-key1', 'custom-key2'],
    // ... more rows
  ];
}

Styling

All CSS is embedded and easily customizable. Key classes:

Browser Compatibility

Fully Supported

Features by Browser

Performance

Optimization Features

Memory Usage

Troubleshooting

Common Issues

App won’t load:

Voice input not working:

Keyboard not responsive:

Autocomplete not showing:

Debug Mode

Add ?debug=true to URL for additional logging:

// Enable debug mode
if (new URLSearchParams(location.search).get('debug')) {
  console.debug('Debug mode enabled');
}

Contributing

Development Setup

  1. Clone or download the HTML file
  2. Serve locally with any web server
  3. Open browser developer tools
  4. Make changes and test immediately

Code Structure

Adding Features

  1. Language engines are in the LanguageEngine class hierarchy
  2. UI components are methods of MobileLispREPL
  3. All state is managed through localStorage
  4. PWA features handled by inline service worker

License

This project is open source. Feel free to modify and distribute.

Credits