remix logo

Hacker Remix

Show HN: Leaflet.pub – a web app for creating and sharing rich documents

165 points by jpereira 4 days ago | 60 comments

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) - Laura's documentation of her website redesign (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 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 (or https://leaflet.pub/new if you're signed in) — would love to hear your thoughts and any feedback if you give it a try!

jofer 4 days ago

Just as an FYI: "leaflet" is the name of a popular web mapping JS library. https://leafletjs.com/

May or may not be relevant for you (and is definitely a very different field/product), but if you're releasing client libraries/SDKs of any sort, it might be good to be aware of. There's a large ecosystem of plugin libraries named "leaflet-foo" or "foo-leaflet" etc in addition to the "main" one. If you start releasing any libraries to work with your app (even if they're not JS), you'll likely want to be aware of and work around naming collisions for library names.

Either way, looks nifty!! I love the approach and we need more people willing to do something like this that competes with google docs / etc, but does so by targeting a specific use case / niche / etc and not by trying to do everything.

jpereira 3 days ago

Leaflet looks like an amazing library. We only came across it and the naming collision after we got started, and so far haven't had too much confusion, but definitely a good idea to be aware when we do an SDK. Would love to make the confusion worse by including a map block in leaflet.pub via leafletjs someday though!

ks2048 4 days ago

My first thought was maybe the overleaf.com people had branched-out from LaTeX documents.

6stringmerc 3 days ago

Have you noticed the rampant appropriation of common words of late in HN references to products? Engine. Leaflet. Bayleaf. On and on I’ve forgotten how many I’ve seen but it’s ridiculous to think that in time, they’ll all be trademarked in the US. In short, I find it an issue with no remedy at present, yet to say it’s all well and good would be a sign of ignorance.

ricardonunez 4 days ago

My first thought was a new product from the LeafLetJS people, cool.

gazook89 4 days ago

It'd be great to get code blocks and inline code blocks. Ideally using Markdown syntax. And, if possible to get syntax highlighting, that'd be even better.

But otherwise, this pretty well lines up with an idea that I had just been mulling over in the last 2 days. Which is pretty eery, but well timed. Realistically I wasn't ever going to do it, so I'm glad I may not have to miss out.

schlagetown 3 days ago

(Leaflet cofounder here) - agree, code blocks is definitely on our list! Both inline and full code blocks e.g. with CodeMirror. Ideally with syntax highlighting, just need to figure out how to play nicely with our custom themes…though probably fine to start with just a default theme.

nsriv 4 days ago

Still playing around with it but I have to say, I absolutely adore the side-scrolling feature!

vladsanchez 4 days ago

Reminds me of 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 3 days ago

It 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 4 days ago

In 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 3 days ago

Just 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.)

schlagetown 3 days ago

(Leaflet cofounder here) - thanks so much for the detailed feedback here, this is great context and appreciate the specifics on CSS intricacies / naming history I was not aware of! We'll take a look at improving our scrollbar handling. We like the minimalist look without but have gotten used to it and I hear you it breaks a useful and expected affordance. I think we might be able to strike a balance with just vertical scrollbars in pages + maybe eventually do a custom indicator for multi-page columns (more obvious b/c you see them open side by side, and global horiz scrollbar is a lot uglier than per-page vertical ones!)

ChrisArchitect 4 days ago

The Make with Leaflet page is good dive into some possibilities https://make.leaflet.pub/

schlagetown 3 days ago

(Leaflet cofounder here) - thanks for sharing that, actually just finished drafting this week! It was fun to make all the different pages with different examples / themes…and also I think a nice demo of our custom domains feature :)

Btw some parts still incomplete e.g. I want to eventually fill out more detail on each page re: how Leaflet compares to other tools, and add more examples and templates. If anyone makes good ones they'd like to share publicly, glad to add!