# [\#48 Issue](https://github.com/milahu/alchi/issues/48) `open`: inplace-editing, decentral, nocloud, dapp, p2p, crdt, collaboration, local-first, offline-first

#### <img src="https://avatars.githubusercontent.com/u/12958815?v=4" width="50">[milahu](https://github.com/milahu) opened issue at [2022-11-04 10:20](https://github.com/milahu/alchi/issues/48):

my book should be an inplace-editable document like [dokieli](https://dokie.li/)
which can be shared over peer-to-peer networking (wifi, bluetooth)

editing should be inplace = zero barriers:
no need to create an account (github, facebook, instagram, ...)
no need to open a separate editor ("click here to edit this page")

zero install = must work in browser

## inplace-editing

document is a html page
by default, it is read-only (not editable)
when i click "edit" then load the editor
= make the document editable \*in place\* = no page reload

early draft
https://github.com/milahu/prosemirror-inplace-editing-demo

### solidjs

https://github.com/solidjs/solid
web framework, faster alternative to react

### prosemirror

https://github.com/ProseMirror/prosemirror-view - 1K stars (underrated)
rich-text editor

see also:
https://tiptap.dev/guide/collaborative-editing
https://tiptap.dev/hocuspocus/
https://github.com/pubpub/pubpub-editor - based on react, prosemirror - 100 stars
https://github.com/chanzuckerberg/czi-prosemirror - based on react, prosemirror - 300 stars

#### yjs

https://github.com/yjs/yjs - 9K stars
CRDT, track micro-changes

https://github.com/yjs/y-prosemirror

https://github.com/yjs/y-indexeddb
persistence

### isomorphic-git

https://github.com/isomorphic-git/isomorphic-git - 7K stars
https://www.npmjs.com/package/isomorphic-git - 200K downloads
A pure JavaScript implementation of git for node and browsers

does not work with github, because github refuses to add CORS headers (fuck them)
works with gitea &rarr; example: https://try.gitea.io/milahu/alchi

overkill?
we just need to fetch like 10 versions of \*one file\*
&rarr; github rest api should work

#### js-git

https://github.com/creationix/js-git - 4K stars
https://www.npmjs.com/package/js-git - 1M downloads
A JavaScript implementation of Git

> I've been asking Github to enable CORS headers to their HTTPS git servers, but they've refused to do it. This means that a browser can never clone from github because the browser will disallow XHR requests to the domain.

https://github.com/creationix/js-github - 160 stars
A js-git mixin that uses github as the data storage backend.

example with indexeddb caching

### gitea

https://github.com/go-gitea/gitea - 30K stars

web frontend for git repos, alternative to github, gitlab

works with isomorphic-git

selfhosted, localfirst, nocloud, anyone can start a new instance

### html first

javascript is optional
no build steps, no SSR, no markdown

## progressive web app

https://github.com/topics/progressive-web-app

## offline-first

aka: local-first, dweb

https://github.com/topics/offline-first
https://github.com/topics/local-first
https://github.com/topics/dweb
https://github.com/topics/dapp

### pazguille/offline-first

https://github.com/pazguille/offline-first
Everything you need to know to create offline-first web apps

### workbox

https://github.com/GoogleChrome/workbox
JavaScript libraries for Progressive Web Apps
service workers

### berty

https://github.com/berty/berty
peer-to-peer messaging app that works with or without internet access

### UpUp

https://github.com/TalAter/UpUp
create sites that work offline as well as online

### vuejs-templates/pwa

https://github.com/vuejs-templates/pwa
PWA template for vue-cli based on the webpack template

### client-side-databases

https://github.com/pubkey/client-side-databases
An implementation of the exact same app in Firestore, AWS Datastore, PouchDB, RxDB and WatermelonDB

### pouchdb

https://github.com/pouchdb/pouchdb - 15K stars

> PouchDB is an open-source JavaScript database inspired by [Apache CouchDB](http://couchdb.apache.org/) that is designed to run well within the browser.
> 
> PouchDB was created to help web developers build applications that work as well offline as they do online.
> https://pouchdb.com/

### couchdb

https://couchdb.apache.org/

> [The Couch Replication Protocol](https://docs.couchdb.org/en/stable/replication/protocol.html) lets your data flow seamlessly between server clusters to mobile phones and web browsers, enabling a compelling [offline-first](https://offlinefirst.org/) user-experience while maintaining high performance and strong reliability.

### kinto

https://github.com/Kinto/kinto.js

https://docs.kinto-storage.org/en/stable/faq.html#comparison

Kinto | Parse Server | Firebase | CouchDB | Kuzzle | Remote-Storage | Hoodie | BrowserFS
-- | -- | -- | -- | -- | -- | -- | --

### wora

https://github.com/morrys/wora
Write Once, Render Anywhere.
documentation for typescript libraries: cache-persist, apollo-offline, relay-offline, offline-first, apollo-cache, relay-store, netinfo, detect-network

### git-documentdb

https://github.com/sosuisen/git-documentdb
Offline-first Database that Syncs with Git

demo app
https://github.com/sosuisen/inventory-manager

### tool-db

https://github.com/Manwe-777/tool-db
A peer-to-peer decentralized database

### offlinefirst.org

https://offlinefirst.org/
via https://couchdb.apache.org/
https://github.com/offlinefirst/research
https://github.com/offlinefirst/ux-examples

> We live in a disconnected & battery powered world, but our technology and best practices are a leftover from the always connected & steadily powered past.
>
> Offline capability is a key characteristic of modern Progressive Web Applications.

> Tools and techniques for building offline capable apps

### inkandswitch.com

https://www.inkandswitch.com/local-first/

> Cloud apps like Google Docs and Trello are popular because they enable real-time collaboration with colleagues, and they make it easy for us to access our work from all of our devices. However, by centralizing data storage on servers, cloud apps also **take away ownership** and agency from users. If a service shuts down, the software stops functioning, and data created with that software is lost.
> 
> In this article we propose “local-first software”: a set of principles for software that enables both **collaboration and ownership** for users. Local-first ideals include the ability to work offline and collaborate across multiple devices, while also improving the security, privacy, long-term preservation, and user control of data.

> It’s amazing how easily we can collaborate online nowadays. ... We depend on these and many other online services ... As we run more and more of our lives and work through these cloud apps, they become more and more critical to us. The more time we invest in using one of these apps, the more valuable the data in it becomes to us. ... downsides of cloud apps ... When you have put a lot of creative energy and effort into making something, you tend to have a deep emotional attachment to it. ...
>
> you typically produce files and data: documents, presentations, spreadsheets, code, notes, drawings, and so on. And you will want to keep that data: for reference and inspiration in the future, to include it in a portfolio, or simply to archive because you feel proud of it.

> It is important to feel ownership of that data, because the creative expression is something so personal.
> 
> Unfortunately, cloud apps are problematic in this regard. Although they let you access your data anywhere, all data access must go via the server, and you can only do the things that the server will let you do. In a sense, you don’t have full ownership of that data — the cloud provider does. In the words of a [bumper sticker](http://www.chriswatterston.com/blog/my-there-is-no-cloud-sticker): “**There is no cloud, it’s just someone else’s computer**.”

> https://www.chriswatterston.com/article/success-of-my-there-is-no-cloud-sticker?utm_source=redirect
>
>> There is no cloud! It's just someone else's computer...
>>
>> ![there is no cloud  its just someone elses computer](https://user-images.githubusercontent.com/12958815/199947625-0fc0dbcb-2a1c-4446-b91a-2008e6e547aa.jpg)
>>
>> It’s actually rather scary how many people don’t have a bloody clue on what the ‘Cloud’ actually is.
>>
>>> Tell me again about your mythical cloud thingy

> When data is stored on “someone else’s computer”, that third party assumes a degree of control over that data. Cloud apps are provided as a service; if the service is unavailable, you cannot use the software, and you can no longer access your data

= dependency, vendor lock-in, prison

> you might be able to export your data, without the servers there is normally no way for you to continue running your own copy of that software. Thus, you are at the mercy of the company providing the service.

> In old-fashioned apps, the data lives in files on your local disk, so you have full agency and ownership of that data: you can do anything you like, including long-term archiving, making backups, manipulating the files using other programs, or deleting the files if you no longer want them. **You don’t need anybody’s permission to access your files**, since they are yours. **You don’t have to depend on servers operated by another company.**

> To sum up: the cloud gives us collaboration, but old-fashioned apps give us ownership. Can’t we have the best of both worlds?
>
> We would like both the convenient cross-device access and real-time collaboration provided by cloud apps, and also the personal ownership of your own data embodied by “old-fashioned” software.

<details>
<summary>
rabbithole
</summary>

## CRDT

aka: distributed database

### gun

https://github.com/amark/gun
protocol for syncing decentralized graph data

### automerge

https://automerge.org/
https://github.com/automerge
https://github.com/automerge/automerge - 14K stars
CRDT, data structures for building collaborative applications.

https://github.com/automerge/pixelpusher 
Pixelpusher: Real-time peer-to-peer collaboration with React

https://github.com/automerge/trellis - 400 stars
We built Trellis to demo [MPL](https://github.com/automerge/mpl), a distributed persistence library that allows developers to build collaborative applications that are realtime, offline, and network partition tolerant.

https://github.com/automerge/mpl - 200 stars
a p2p document synchronization system for automerge

### yjs

https://github.com/yjs/yjs - 9K stars
https://github.com/yjs/y-prosemirror
https://github.com/yjs/y-indexeddb
https://github.com/YousefED/SyncedStore

## collaborative editors

https://alternativeto.net/software/google-docs---word-processor/?license=opensource&platform=self-hosted

### etherpad

https://github.com/ether/etherpad-lite - 13K stars

online editor providing collaborative editing. No more sending your stuff back and forth via email, just set up a pad, share the link and start collaborating!

features: timeslider, revisions, chat plugin

selfhosted: You don't need to set up a server and install Etherpad in order to use it. Just pick one of publicly available instances that friendly people from everywhere around the world have set up. Alternatively, you can set up your own instance by following our installation guide

based on ace editor

public instances: https://github.com/ether/etherpad-lite/wiki/Sites-That-Run-Etherpad
https://etherpad.wikimedia.org/
...

formats: HTML, RTF

https://github.com/ether/etherpad-lite/issues/5341#issuecomment-1003677565

> for the record: im moving from etherpad to [tiptap](https://tiptap.dev/guide/collaborative-editing)
>
> etherpad: based on ace editor, jquery
> tiptap: based on prosemirror, yjs -> more modern, flexible, modular

### cryptpad

https://github.com/xwiki-labs/cryptpad/ - 4K stars

All the content stored on CryptPad is encrypted before being sent, which means nobody can access your data unless you give them the keys. CryptPad is a suite of zero knowledge, realtime collaborative editors and applications

public instances: https://cryptpad.org/instances/
https://cryptpad.fr/
https://kumipad.eu/
https://pad.tchncs.de/
https://cryptpad.disroot.org/
https://cryptpad.piratenpartei.de/
...

formats: doc, xls, ...

broken:

> Aborting because eval should not be permitted.
>
> This error is linked to Content-Security-Policy headers, it could be due to: an outdated browser that does not support them, browser extensions that interfere with their correct behaviour, or an incorrect configuration of this CryptPad instance.

### foam

https://github.com/foambubble/foam - 13K stars

knowledge management
knowledge sharing
built on Visual Studio Code and GitHub
You can use Foam for organising your research, keeping re-discoverable notes, writing long-form content and, optionally, publishing it to the web.

formats: MD

### hedgedoc

https://github.com/hedgedoc/hedgedoc

hedgedoc is easily the best markdown document editor out there. Documents can be shared privately as well as publicly. Multiple people can work together on the same document with great visual feedback.

export/import with github gist
download markdown or html

based on CodiMD, HackMD

formats: MD

### prosemirror

https://github.com/ProseMirror/prosemirror-view - 1K stars (underrated)

ProseMirror is a simple but effective editor that favours minimalism, speed, and precision. It's an attempt to bridge the gap between Markdown text editing and classical "what you see is what you get" (WYSIWYG) word processors. It is specifically intended as a platform for customization, so if your organization is looking into developing a custom editor, this is a great place to start. Even without customization, though, ProseMirror is a nice, minimal, and easy editor for collaboration.

see also:
https://tiptap.dev/guide/collaborative-editing
https://tiptap.dev/hocuspocus/
https://github.com/pubpub/pubpub-editor - based on react, prosemirror - 100 stars
https://github.com/chanzuckerberg/czi-prosemirror - based on react, prosemirror - 300 stars

formats: HTML, MD, ...

<details>

### Twake

https://github.com/linagora/Twake

real-time teamwork platform
suite of collaborative tools that includes the specificities of some bestsellers (Slack, Trello, Google Drive...).
messaging, storage space, online collaborative editors (Words, Excel, PowerPoint), task manager, team calendar
Twake is available in SaaS or self-hosted.

### documize

https://www.documize.com/

making it dead-simple for anyone to compose & contribute content and share knowledge
A single place to compose docs and share know-how, without the mess of email, chat apps and sync folders
Has both open source and enterprise edition

### fiduswriter

http://fiduswriter.org/

online collaborative LaTeX editor especially made for academics who need to use citations and/or formulas
The editor focuses on the content rather than the layout, so that with the same text, you can later on publish it in multiple ways: On a website, as a printed book, or as an ebook. In each case, you can choose from a number of layouts that are adequate for the medium of choice.


https://opensource.com/business/15/7/five-open-source-alternatives-google-docs

### gobby

https://github.com/gobby/gobby

Gobby is a **text editor** that allows real-time, lock-free collaborative text editing. Before you start sharing and co-editing your documents, you'll need to choose a private key and a certificate or create a new pair. You can open an existing document or create a new one that can be later saved into its own native format or exported as an HTML file.

### firepad

https://github.com/firebase/firepad - 4K stars

based on Firebase https://firebase.google.com/
Firepad allows synchronous document (with CodeMirror) and code (via ACE) co-editing.
Since it uses Firebase as a backend, Firepad requires no server-side code. You can easily embed it into any web app using the available JavaScript files

https://blog.cloudron.io/four-open-source-alternatives-to-google-docs/

</details>

https://www.aarongreenlee.com/blog/notes-web-based-text-editor-rich-text-code-structured-text/

### draft.js

https://github.com/facebook/draft-js - 20K stars

based on react

deprecated in favor of https://github.com/facebook/lexical - 10K stars

based on react

### react-contenteditable

https://github.com/lovasoa/react-contenteditable - 1K stars

based on react

### react-simple-code-editor

https://github.com/react-simple-code-editor/react-simple-code-editor - 1K stars

based on react

## dapps

### hypercore

secure, distributed append-only log

https://github.com/hypercore-protocol/hypercore - 2K stars

### picostack

https://github.com/telamon/picostack - 20 stars

demo https://pico-todo.surge.sh/

> Pico-stack is a virtual p2p machine
> 
> It allows you to build Progressive Web Apps that work completely without a server/backend/REST-API and without a central database.
> 
> If you stash your entire Backend inside Frontend you get "Blockend".

</details>

### browser apps

https://github.com/danloh/mdSilo-web - 200 stars
In-browser knowledge base on top of local plain-text files
based on react

### solidjs

https://github.com/topics/solidjs

https://github.com/TanStack/virtual
lazy loading, infinite scroll

https://github.com/thisbeyond/solid-dnd
drag and drop toolkit

### dataviz

https://github.com/jsplumb/jsplumb
interactive graphs
similar to d3.js
could be useful for alchi-maps, would need to render an infinite pattern (the pallas pattern)
via https://github.com/zadam/trilium

### mindmap, journal, diary, notes

https://github.com/learn-anything/learn-anything - 15K stars
Organize world's knowledge, explore connections and curate learning paths
knowledge graph
based on solidjs

https://github.com/c2d7fa/thinktool
associative note-taking application
Novel fusion of hierarchical and graph-based approaches to taking notes, based on ideas from Roam Research, TheBrain and others
similar: zettelkasten, roam research

https://github.com/danobot/notorious
Offline-first note taking and knowledge management application for desktop and the web. Supports nested notebooks, tags, real-time sync, images and file attachments. Optimised for efficiency with keyboard navigation, full-text search and version control. Never lose a thought. Private, fast, notorious

### knowledge management

aka: collaboration, teamwork

usually overfeatured for my use case, still interesting

https://github.com/zadam/trilium
https://github.com/athensresearch/athens
https://github.com/documize/community
https://obsidian.md/ - desktop app

### rxdb

https://rxdb.info/
https://github.com/pubkey/rxdb - 18K stars
A fast, offline-first, reactive database for JavaScript Applications

> Premium Plugins
> [IndexedDB RxStorage](https://rxdb.info/rx-storage-indexeddb.html)

found the problem. we need IndexedDB but it must be open source, not "Premium"





-------------------------------------------------------------------------------



[Export of Github issue for [milahu/alchi](https://github.com/milahu/alchi).]
