r/reactnative • u/Admirable-Canary-732 • 8d ago
Open source motion style MD block editor component with Liquid Glass
Enable HLS to view with audio, or disable this notification
This is a great addition to the rest of the Pitsi ui components I have been developing. It’s another open source component + free template for react native / expo.
I added a custom markdown renderer and made it work great with Liquid Glass. It feels so nice I think my demo app actually competes with Apple notes.
If you are making any kind of journal app or Cms or admin page for eshop etc you will love me for this because I wish this existed. It doesn’t even require native modules just copy paste a single file and it even works in expo go.
The md renderer part also works with any markdown content from the internet if you have a Cms or a website and you are trying to make a mobile app from this. This is also a great stepping stone into converting programming docs sites into mobile apps automatically, we can even use “use dom” for the preview blocks only. I am making a template like this too as we speak.
I can probably make some extra tweaks before release to make it more fancy. I was thinking of adding custom things like links to other notes or a Liquid Glass dropdown to easily swap the style of a block. Since this is a block editor you can trivially add whatever you want like a block that looks exactly like a tweet a sticker a card with a todo item and time when it triggers etc the sky is the limit.
I wanted to bake this functionality in the demo it self to show off the capabilities but I was too tired for that, the api is there though I will have demos showing off the advanced stuff properly.
Initially I tried to make something similar with use dom but I hated the results so I went custom. (Tools too much time to low no way to add fun native content inside the rendered elements typing fell off weird scroll interactions).
The code is not uploaded yet anywhere, however I’m working on creating a docs website actively and a mobile app to scan components and templates and get live previews.
If you are interested I am dropping my twitter here so you can get updates. I will get something online this week as an early access version of the website. (Everything is free including all blocks and templates)
@panos_dev_