4 ms·
Show HN: Leaflet.pub – a web app for creating and sharing rich documents
Hi HN!
For the last 8 months we've been working on leaflet.pub, a web app for making delightful documents. We're trying to strike a balance between Notion and Google Docs — very fast, ultralight and easy to share, but also supporting rich blocks and multiple pages.
Weirdly, none of the many notetaking/document apps that we could find hit this combination, so we made Leaflet. With it you can:
- Instantly create a doc, without an account
- Share read and edit links
- Sign-in with email to sync your docs to different devices
- Add rich blocks, like canvases, subpages, rsvps, and polls
It's really useful for one-off collaborations, running events, or just when you need a blank page without having to buy into a whole organizational system.
We also spent a lot of time making sure Leaflets look good. We've found that there's a pretty blurry boundary between a document and a website, so making something that people can feel proud to publish online was key.
Here's a couple examples!
- Jake's presentation on Slöjd, traditional handcraft pedagogy (https://leaflet.pub/3d28b4a7-3703-4ae5-aaf6-d270ffe1151f https://leaflet.pub/3d28b4a7-3703-4ae5-aaf6-d270ffe1151f)
- Laura's documentation of her website redesign (https://leaflet.pub/14aba696-e894-440a-9d06-917641a2bfce https://leaflet.pub/14aba696-e894-440a-9d06-917641a2bfce)
Some technical details that might be interesting:
- We do sync and all our client-side state via Replicache, which I really love!
- Data is modeled as a set of facts about entities, a la Datomic, forming a graph. This has been flexible enough for us to quickly build new features, like canvases and nested pages, without committing to a single document structure.
- We use ProseMirror, but not for the entire document. Instead every text block is a separate ProseMirror instance. This lets us keep the document structure in our database and our schema, without having to dive into ProseMirror's every time we want to modify things.
Our (somewhat messy) source is available here: https://github.com/hyperlink-academy/leaflet https://github.com/hyperlink-academy/leaflet if you want to dig deeper!
On the horizon:
- Better home and document organizing features — things like search, tagging, collections etc.
- We're really excited about ATProto and Bluesky and are working on a set of lexicons and an AppView for document publishing! This will include a lexicon for rich text documents, as well as one publications, and some concept of memberships or subscriptions.
- More blocks! Tables, code blocks, etc.
Some things we're particularly proud of:
- Our list handling
- Custom theming
- Keyboard handling on iOS Safari (and generally works excellently on mobile)
- Side-scrolling multi-page interface
- Works as a PWA!
Some things that still need work:
- While faster than others, still a lot of work we can do on performance, both speed when working with very large documents and loading docs generally
- Drag and drop and selection in general could be a lot nicer
- Keyboard navigation across multiple pages
- Multiplayer cursors, and generally real-time sync could be sped up greatly leveraging CRDTs (we already use YJS, just could move updates around faster)
You can create a new document just by visiting https://leaflet.pub https://leaflet.pub (or https://leaflet.pub/new https://leaflet.pub/new if you're signed in) — would love to hear your thoughts and any feedback if you give it a try!
- nsriv 2y agoStill playing around with it but I have to say, I absolutely adore the side-scrolling feature!
- vladsanchez 2y agoReminds me of https://gingkowriter.com/ https://gingkowriter.com/ ... Side scrolling and spatial notetaking was the two reasons to stick with it. Perhaps it's time to switch to Leaflet. Thanks for sharing <3
- nsriv 2y agoIt felt familiar but yes I totally forgot about this! I used gingko for the trial period years and years ago because I was looking for a lighter Scrivener alternative.
- jpereira 2y agoIn our last product (hyperlink.academy) we went through a lot of iterations on multipage designs, from carousels, to stacking decks, to a kind of 2-pane view, and eventually settled on the side scrolling view. Really useful for drilling down into things, looking at things side-by-side, etc. Glad to hear you like it!
- chrismorgan 2y agoJust one thing needs fixing, urgently: stop messing with the scrollbars! You should never take away the scrollbar unless you’re replacing it with some similar affordance (and even that’s iffy). This really is a big deal. It leads to people flat-out missing that things are scrollable. Even after I noticed it was doing that in one of the demos, I missed the scrolled content in the other demo for a while. This needs two changes: firstly, ditch the .no-scrollbar class; secondly, on your .overflow-y-scroll and .overflow-x-scroll, replace the value ‘scroll’ with ‘auto’. (It’s a case of bad naming, compounded by the advent of overlay scrollbars which make it easy to miss that it’s forcing scrollbars, not merely allowing scrollbars, and inconsistent with almost all of the rest of CSS in that a value named ‘auto’ is not the default. ‘scroll’ has only ever had approximately three rare but semi-legitimate use-cases, and at least two of them were rendered obsolete with the advent of the ‘scrollbar-gutter’ property. My personal opinion is that `overflow: scroll` should be officially deprecated, linters should error on it, and browsers should even consider replacing it with `overflow: auto` as an intervention.)