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.
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.
Thanks for sharing <3
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.)
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!
I’m always weary of getting involved in a new tool only for the rug pull to happen later.
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!
Looking forward to tracking this project! Is there a community one could join to get updates?
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
– 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.
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.
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.
All the best!
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?
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.
I was specifically wondering about this :) How long is longer?
ps. I checked out your other/previous projects, very intrigued!
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.
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!
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.
I wish canvases had edges connecting nodes
my only nitpick at this moment: i like to see my scrollbars on a desktop
Is there a tutorial for how to self-host it?
Can you edit a button after adding it?
Loading the landing page was a breathe of fresh air. Thank you.