[HN Gopher] Show HN: Leaflet.pub - a web app for creating and sh...
___________________________________________________________________
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 Slojd, 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!
Author : jpereira
Score : 151 points
Date : 2025-03-05 17:55 UTC (1 days ago)
| nsriv wrote:
| Still playing around with it but I have to say, I absolutely
| _adore_ the side-scrolling feature!
| vladsanchez wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| (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!)
| pwillia7 wrote:
| This is really great -- Thanks for making it.
| ftr1200 wrote:
| This is fantastic. Good job. Makes you realise how much clutter
| is out there (SaaS nonsense, ads, paywalls, bullshit).
|
| Loading the landing page was a breathe of fresh air. Thank you.
| jayloofah wrote:
| Are the documents encrypted? Is privacy a focus? One major reason
| that people want to move away from Google Docs and Notion is
| because of their very invasive privacy policies.
| jpereira wrote:
| They are not and while basic privacy and security is definitely
| a focus (making sure random external people can't get access to
| your docs and account) end-to-end encryption and privacy is
| not. There are tools that focus on that that seem great. I
| think proton mail has a product in that space, and
| https://docs.fileverse.io/ seems interesting, and there are
| many more on the more notion side. We wanted to focus our
| efforts on the interface and experience.
|
| All that being said, I'd _love_ at some point to manage to get
| everything end-to-end encrypted, but it 'll be a big lift!
| layer8 wrote:
| If I understand correctly, you're doing the sync client-side,
| meaning you don't need the payload in cleartext server-side.
| In that case, it should be relatively straightforward to
| generate an encryption/decryption key and put it into the
| fragment part of the URL, so that the server doesn't see it,
| and encrypt all payloads with it.
| jpereira wrote:
| There's actually a fair amount going on server side. For
| one, we have server authoritative sync. There's a lot of
| mutations that would be tricky to reason about in purely
| p2p sync, and just applying them to an authoritative source
| makes that a lot simpler (and is what let's us use
| Replicache!). Beyond that though we have a bunch of
| features, custom domains, polls, rsvp blocks, that depend
| on us being able to control permissions.
|
| It's definitely _possible_ to do all if this in a p2p
| context, but it 's much harder and increases the complexity
| a ton. It also makes it harder to be fast, you're naturally
| increasing the amount that needs to be done client side,
| and server rendering is out the door. There's a bunch of
| client-side editors that I think are great, and end-to-end
| encryption is definitely something I want to work towards,
| but it's out of scope for us right now.
| sabellito wrote:
| That's very impressive, super slick. The subpage preview on the
| parent page works so well I went digging into the source code.
| sprobertson wrote:
| That detail and then sub-sub-page preview also hooked me, great
| work
| ChrisArchitect wrote:
| The Make with Leaflet page is good dive into some possibilities
| https://make.leaflet.pub/
| schlagetown wrote:
| (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!
| simmo9000 wrote:
| Well done. Intuitive and simple like this sort of tool should be.
| amendegree wrote:
| I see its source available, which implies you're planning on
| monetizing somehow, do you mind sharing any insight into what
| that would look like?
|
| I'm always weary of getting involved in a new tool only for the
| rug pull to happen later.
| jpereira wrote:
| Very fair question! Honestly the main reason it's source
| available rn instead of open source is we haven't decided on a
| license internally, as opposed to business reasons. As for
| monetization, the two areas we're exploring are publication,
| subscriptions to blogs, a la substack, and a "pro" tier, with
| better tools for managing _lots_ of documents.
| cetra3 wrote:
| I can't seem to scroll horizontally very easily, like I have to
| middle click drag in empty space, is there any reason you are
| hiding scrollbars?
| schlagetown wrote:
| (Leaflet cofounder here) - sorry about that! Are you seeing
| that with 'canvas' pages, or multiple doc pages open side by
| side? What device / screen size? I haven't seen issues with
| horizontal scroll recently but lots of trickiness with slight
| differences across browsers and maybe things we can improve for
| particular cases.
|
| Re: scrollbars honestly we just like the cleaner minimalist
| look and have gotten used to it but I hear you (+ others) that
| it can be annoying, we'll look into improving.
| rafram wrote:
| The appearance (both the text font and the UI chrome icons and
| colors) really is not to my liking. I see that you can already
| change the foreground and background color of your document. Any
| plans to add more options?
| jpereira wrote:
| You should be able to change all the colors in the theme
| options! As for fonts, currently working on adding options
| there! Probably not going to support custom icons though, but
| maybe an minimal mode (sans icons, maybe only text) could be
| interesting?
| jofer wrote:
| 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.
| ks2048 wrote:
| My first thought was maybe the overleaf.com people had
| branched-out from LaTeX documents.
| ricardonunez wrote:
| My first thought was a new product from the LeafLetJS people,
| cool.
| jpereira wrote:
| 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!
| 4ndrewl wrote:
| My first thought too.
| 6stringmerc wrote:
| 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.
| zekenie wrote:
| I really love the ui exploration!
|
| I wish canvases had edges connecting nodes
| schlagetown wrote:
| (Leaflet cofounder here) - thanks, and good idea! Yeah right
| now canvases are quite minimal, lots we can improve both with
| basics like selection/drag, and more types of canvas-specific
| blocks. We'd love to get some kind of freeform sketch block at
| some point too, though more complex, a few more frequently
| requested things we want to get to first, like simple tables
| and font options!
| sno6 wrote:
| Guys, this is super cool. As someone building a canvas product
| that also has a (prosemirror) notepad I am super inspired by
| this. The way you can flick from a canvas on the notepad, back to
| the notepad, and it doesn't feel like you're locked in to any
| block because you can still slightly see where you came from..
| love it.
|
| All the best!
| gazook89 wrote:
| 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 wrote:
| (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.
| gr4vityWall wrote:
| I like how it looks :)
|
| Is there a tutorial for how to self-host it?
| jpereira wrote:
| Not right now, self hosting isn't a priority for us at the
| moment. It shouldn't be tooooo difficult to figure out though,
| the two main infrastructure dependencies are supabase and
| nextjs and everything else is for additional features. I should
| make an example .env file to make all that clear though!
| layer8 wrote:
| Some feedback:
|
| - When tapping on the leaflet icon in the bottom left, the whole
| text area is erased (Safari on iPad).
|
| - The strikethrough icon is a bit hard to recognize, because the
| stroke merges with the S line. Some text editors use a different
| letter for that reason, for example a T, and add a small gap
| along both sides of the stroke to emphasize the overlay (only on
| the icon, not on the actual text being edited).
|
| - Making the strikethrough line lighter than the text color is a
| bit unconventional, I'm not sure it helps readability. In the
| default text size, the line is easy to overlook, also because it
| is pretty thin (on a hi-DPI display). This is particularly the
| case on bold and/or italic text.
|
| - No dark mode support, it seems.
| jpereira wrote:
| Super helpful thanks!
|
| The leaflet icon is our little watermark (which can be
| disabled!). Just updated it to point to
| https://about.leaflet.pub instead of just leaflet.pub, it was
| just creating a new doc every time you clicked it.
|
| Useful feedback on strikethrough! Will review our
| implementation of it.
|
| As for dark mode, you can theme your documents, and use
| existing documents as templates for others, so you can get dark
| mode that way. We could do a lot to make it easier to share and
| get basic themes though.
| crossroadsguy wrote:
| Is it supposed to be a permanent published document? I couldn't
| find a delete/unpublish option. I guess retaining the first
| randomly generated URL can be used to delete the content, but
| still there is no clear way to delete, unpublish.
| schlagetown wrote:
| (Leaflet cofounder here) - this is a really good point! We
| actually had an explicit 'delete' button earlier but removed it
| temporarily b/c it was causing some confusion I think with
| people accidentally deleting collaborative docs for _everyone_
| and not just for themselves. So right now we have 'remove from
| home' but not full delete. We should add that back and see if
| we can improve the UX.
|
| Right now all docs are unlisted but anyone with the link can
| view; we're also thinking about fully private or password
| protected docs (several people have asked about this) but still
| exploring the best approach there.
| pokpokpok wrote:
| very beautiful and I appreciate how well everything works without
| logging in
| breadchris wrote:
| I love this a lot. I have spent a great deal of time considering
| digital document writing. The hybrid of document and canvas is a
| must and is commonly found in PKMs now (obsidian, logseq,
| affine). Collaboration features are also a must imo, but not
| often found due to it being difficult to implement and scale.
|
| Looking forward to tracking this project! Is there a community
| one could join to get updates?
| schlagetown wrote:
| (Leaflet cofounder here) - thanks! It's been a lot of fun
| trying to strike the right balance between "just docs" and
| things like canvas, outliner, and more interactive social
| blocks, as well as minimalism vs. customizability etc.
|
| Yes, for updates we have a newsletter here...so far sending
| alpha updates every week or two; may have to move it to 'beta'
| soon! https://buttondown.com/leaflet
| holistio wrote:
| Kudos for the multiple ProseMirror instances. I'm building with
| ProseMirror myself and that's some nice wizardry I haven't
| thought of.
| pazimzadeh wrote:
| I like the icons.
|
| Can you edit a button after adding it?
| jpereira wrote:
| Unfortunately not yet, we haven't come up with a pattern we
| like for that yet, just added buttons quite recently. Right now
| the move is to delete and re-add, which I know is annoying.
| Will improve soon!
| kaizenb wrote:
| Very nice work!
| pjzh wrote:
| This website is fantastic! I love the layout!
| croisillon wrote:
| i thought it would be some kind of competitor to canva but not at
| all, the product is interesting and original, i'll definitely
| follow it!
|
| my only nitpick at this moment: i like to see my scrollbars on a
| desktop
| klntsky wrote:
| This is what notion should have been.
| dirkc wrote:
| Nice, I really like it. The embedded elements like POSTS and
| RSVPs creates a nice shared space feel to it.
|
| Also interesting to see that you chose WhatsApp for the RSVP
| element. Did you use Twilio for the integration and what was the
| level of effort needed?
| schlagetown wrote:
| (Leaflet cofounder here) - much appreciated; we spent a lot of
| time iterating building different versions of apps before
| Leaflet that were more explicitly around shared social spaces
| and communities for learning and collaborative projects, which
| informed some of our aims in making Leaflets both simple docs
| and shared spaces (lots we can improve there e.g. bringing in
| live presence features!)
|
| For the RSVP block, yes we're using Twilio - right now it
| automatically uses SMS for US/Canada numbers and WhatsApp for
| int'l, bit more cost effective...I think it wasn't a huge lift
| technically, though took longer than expected mainly b/c we had
| to wait a while / re-submit some documentation etc. for
| approval.
| jslakro wrote:
| It seems an advanced version of https://txt.fyi. The balance
| between simplicity and experience is great. I hope you can
| continue with the project
| deanebarker wrote:
| I do love it when someone does an original take on what a
| "document" means. I love the intellectual exploration of it.
| Kudos, genuinely.
| schlagetown wrote:
| (Leaflet cofounder here) - thank you, really nice to hear! It's
| taken us a long time and several prior products/prototypes to
| arrive at this, including previous attempts where we had
| similar aims -- make nice expressive spaces for collaboration,
| creative work, learning -- but took very different (and more
| complicated) directions, e.g. a multi-room chat/note hybrid app
| with each project as its own database, or a global wiki with
| live calls built in.
|
| I think Leaflet's by far the most easy to use but also hides a
| lot of power and expressive potential without being
| overwhelming, and we're seeing more traction and cool ways
| people are using, so happy with it so far! In particular
| finding it really cool how there's a lot of space between very
| simple notes/docs and rich publishing that gets closer to
| artifacts more like whole websites but with document-like form
| factor. And making something that's equally nice and simple to
| read and to edit/collaborate on with others...a good challenge
| and design space to explore!
___________________________________________________________________
(page generated 2025-03-06 23:02 UTC)