Pair-ls - a lightweight, editor-agnostic tool for remote pair-programming

Overview

pair-ls

Pair-ls is a lightweight, editor-agnostic tool for remote pair-programming. It allows you to easily share the files you are working on in a read-only manner. Pair-ls is not a collaborative editor. If you're wondering why you would use pair-ls, read the comparison section.

pair.mp4

Installation

You can download a binary from the releases page

If you want to build from source, git clone this repo and run yarn build (you will need to install yarn and go build tools)

Setup

If the option is available, it is recommended to use a plugin for your editor. If your editor is not yet supported, you can still use pair-ls with minimal configuration (also file an issue to ask for support). Using pair-ls without an editor plugin will mean some degradation in the cursor tracking.

Editor plugins:

See the link for installation instructions

Generic Setup - any editor

pair-ls supports any editor with a LSP client.

Configure your LSP client to run this command as a server: pair-ls lsp -port 8080. Now you can visit http://localhost:8080 to see a mirror of your code. For more info on how to share this page, see Sharing.

Sharing

Running pair-ls lsp -port 8080 is an easy way to get started, but how can you share this across the internet?

The quickest way with no setup required is to use WebRTC connections.

If you have access to a server with a public IP address that is reachable by both parties, you have options that will be a bit more convenient and more reliable. The most straightforward is ssh port forwarding, but you can also set up a relay server.

For completeness, you can also set up a signal server, but that has all the drawbacks of both WebRTC and relay server, so it's not recommended.

Password protection

If your pair-ls webpage is visible on the public internet, you should make sure to enable password protection to prevent anyone on the internet from seeing your code. Simply provide a password, either via the config file or with the environment variable PAIR_WEB_PASS. The webserver will now require this password before allowing access. You should also make sure your site it hosted over https so the password can't be trivially sniffed (see encryption).

Configuration

The configuration file can be found at $XDG_CONFIG_HOME/pair-ls.toml. Most values can be specified on the command line instead, if you prefer (run pair-ls for detailed help).

# Default log file is $XDG_CACHE_HOME/pair-ls.log
logFile = "/path/to/file.log"

# For the relay server. When false (the default) all files are cleared from the
# server when the last editor connection is closed.
relayPersist = false

# The static site hosting the WebRTC connection code
staticRTCSite = "https://code.stevearc.com/"

# The one-time WebRTC connection token generated from the static WebRTC site
# Editor plugins provide a better way to pass this in, so only use the option if
# your editor doesn't have a plugin.
callToken = ""

[server]
# If provided, will require password auth from web client
webPassword = "passw0rd"
# If provided, will require connecting pair-ls LSP to provide this password in
# the [client] section (only used for relay & signal servers)
lspPassword = "secur3"
# If provided, will secure all connections with TLS
certFile = "/path/to/cert.pem"
# If the private key is not in the certFile PEM, you can pass it in separately here
keyFile = "/path/to/cert.key.pem"
# If true, will require pair-ls LSP to provide a matching client cert.
# This is the certFile under the [client] section.
requireClientCert = false
# PEM file with one or more certs that pair-ls LSP can match
# (when requireClientCert = true; only used for relay & signal servers)
clientCAs = "/path/to/pool.pem"

[client]
# Provide this certificate to the relay/signal server when connecting
certFile = "/path/to/cert.pem"
# If the private key is not in the certFile PEM, you can pass it in separately here
keyFile = "/path/to/cert.key.pem"
# If the relay/signal server requires a password, supply it here
password = "secur3"

Comparison

Pairing tools fall into roughly 3 categories: screen sharing, web editors, and editor plugins.

Screen sharing: Easiest to use, with the worst functionality

  • Pros:
    • Very easy, they're built into the tools you're already using to call your partners
    • You see exactly what the sharer is doing, across all windows and applications
  • Cons:
    • Video artifacts can make text hard to read
    • Text is often too small unless the sharer increases the size dramatically
    • Viewer has no control over what they're looking at
    • Read-only sharing

Web editor: Easy to share, but only if you buy into their ecosystem

  • Pros:
    • No installation required
    • Often have collaborative editing functionality
  • Cons:
    • You have to use their editor
    • You have to use their entire editing ecosystem, since it's not simply working with files on your own computer

Editor plugin: Best experience as long as everyone's preferred editor is supported

  • Pros:
    • You can use your own editor
    • Often have collaborative editing functionality
  • Cons:
    • Requires installation
    • Your editor has to have a plugin available
    • Everyone has to be using the same editor
    • Only shares editor state, nothing in other windows

Pair-ls: Sacrifices features of editor plugins for broader support

  • Pros:
    • You can use your own editor
  • Cons:
    • Requires installation
    • Read-only sharing
    • Only shares files. You can't see open terminals or anything else the sharer is doing in the editor

Alternatives

Most of these are paid apps/services, though many of those have a free tier.

Technical Overview

pair-ls is implemented as a Language Server, so it receives file open and edit information from any LSP client. It is a simple matter to then expose that information to a web client, or to replicate it to a relay server.

Editor plugins add extensions on top of LSP to allow for enhanced features (see differences in Setup) that aren't possible with the current state of LSP (e.g. tracking cursor movement).

You might also like...

In-browser code editor

CodeMirror CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 10

Dec 30, 2022

Quill is a modern WYSIWYG editor built for compatibility and extensibility.

Note: This branch and README covers the upcoming 2.0 release. View 1.x docs here. Quill Rich Text Editor Quickstart • Documentation • Development • Co

Jan 2, 2023

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

If you would be interested in helping to maintain one of the most successful WYSIWYG text editors on github, let us know! (See issue #1503) MediumEdit

Jan 4, 2023

Tiny bootstrap-compatible WISWYG rich text editor

bootstrap-wysiwyg Important information for Github requests/issues Please do not submit issues/comments to this repo. Instead, submit it to https://gi

Jan 3, 2023

HTML5 rich text editor. Try the demo integration at

Squire Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS a

Dec 28, 2022

A rich text editor for everyday writing

Trix A Rich Text Editor for Everyday Writing Compose beautifully formatted text in your web application. Trix is a WYSIWYG editor for writing messages

Jan 3, 2023

Simple, beautiful wysiwyg editor

This repo is no longer maintained. bootstrap3-wysiwyg is much better Overview Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create

Dec 30, 2022

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore Please check out this fork. wysihtml5 0.3.0 wysihtml5 is an open source rich text editor based on HTML5 technolo

Jan 7, 2023
Comments
  • fix: missing static site build instructions

    fix: missing static site build instructions

    Thanks for this nice project :)

    It's not really clear how the WebRTC static page works (even more now your site is down).

    This PR adds the documentation I was missing to understand.

    opened by pipoprods 1
Owner
Steven Arcangeli
Steven Arcangeli
A markdown editor. http://lab.lepture.com/editor/

Editor A markdown editor you really want. Sponsors Editor is sponsored by Typlog. Overview Editor is not a WYSIWYG editor, it is a plain text markdown

Hsiaoming Yang 2.8k Dec 19, 2022
Override the rich text editor in Strapi admin with ToastUI Editor.

strapi-plugin-wysiwyg-tui-editor ⚠️ This is a strapi v4 plugin which does not support any earlier version! A Strapi plugin to replace the default rich

Zhuo Chen 12 Dec 23, 2022
A chrome extension which helps change ace editor to monaco editor in web pages, supporting all features including autocompletes.

Monaco-It Monaco-It is a chrome extension turning Ace Editor into Monaco Editor, supporting all features including autocompletes. 一些中文说明 Supported Lan

null 3 May 17, 2022
A lightweight and amazing WYSIWYG JavaScript editor - 20kB only (8kB gzip)

Supporting Trumbowyg Trumbowyg is an MIT-licensed open source project and completely free to use. However, the amount of effort needed to maintain and

Alexandre Demode 3.8k Jan 7, 2023
lightweight (~5kb) code editor custom element with syntax highlighting

code-edit lightweight (~5kb) code editor custom element with syntax highlighting ?? Install · ?? Example · ?? API docs · ?? Releases · ???? Contribute

stagas 5 Apr 14, 2022
A lightweight HTML and BBCode WYSIWYG editor

SCEditor v3.1.1 A lightweight WYSIWYG BBCode and XHTML editor. For more information visit sceditor.com Usage Include the SCEditor JavaScript: <link re

Sam 566 Dec 23, 2022
The next generation Javascript WYSIWYG HTML Editor.

Froala Editor V3 Froala WYSIWYG HTML Editor is one of the most powerful JavaScript rich text editors ever. Slim - only add the plugins that you need (

Froala 5k Jan 1, 2023
Simple rich text editor (contentEditable) for jQuery UI

Hallo - contentEditable for jQuery UI Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable

Henri Bergius 2.4k Dec 17, 2022
A modern, simple and elegant WYSIWYG rich text editor.

jQuery-Notebook A simple, clean and elegant WYSIWYG rich text editor for web aplications Note: Check out the fully functional demo and examples here.

Raphael Cruzeiro 1.7k Dec 12, 2022
Ace (Ajax.org Cloud9 Editor)

Ace (Ajax.org Cloud9 Editor) Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resour

Ajax.org B.V. 25.2k Jan 4, 2023