# [\#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 → example: <https://try.gitea.io/milahu/alchi>

overkill?  
we just need to fetch like 10 versions of \*one file\*  
→ 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>

<table>
<thead>
<tr class="header">
<th>Kinto</th>
<th>Parse Server</th>
<th>Firebase</th>
<th>CouchDB</th>
<th>Kuzzle</th>
<th>Remote-Storage</th>
<th>Hoodie</th>
<th>BrowserFS</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

### 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 -&gt; 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).\]