Markdown UIJanuary 30, 2021·8 minutes read
But coming from Notion, I miss some nice features like kanban views, calendars, or tables. Something that doesn't come out of the box in the Markdown spec.
In this post, I want to explore and experiment with the possibilities of using this approach to render more rich components to show plain text, like the one required to model a simple interactive table.
To understand the project vision you can check the conceptual lifecycle of the information in the followin diagram:
First step: Parsing
To be able to validate the idea and achieve the minimum viable product, we will take the easiest example to play with. We are going to build an interactive markdown table. All values in this table will be floats. This is an example of the content:
Field. Then, a list of floats separated by commas will form the rows of the table, in this case, called
Record. Then a
Filewill be a list of
Recordseparated by break lines:
Once we have a nice grammar definition, we can use it to build the parser. Pest is going to build all the utility modules to be able to parse the incoming data to abstract syntax tree nodes.
Enum's to be able to differentiate the parsed tokens.
On the other hand, it will also generate a parser to build the correct tree of nodes:
test.csvas input, we are going to get:
Second step: Render
Deserializetraits to our structures.
JsValue's with a representation of our
Recordstructures. Those objects will be used to render a nice and interactive UI build on top of React.
Third step: Interaction
Now that we are able to render the parsed content, we can continue adding a bit of interactivity to the view. You can imagine whatever nice use case for your widget. From adding buttons, drag and drop, calendars, etc.
For demo purposes, we are going to add just a button to add new rows to the table.
Fourth step: Serialization
storefunction and expose it to
Then, we call this new function from React passing as argument all rows in the table from the state:
And we get the final goal of new Markdown 🎉 for this dynamic table component:
We went through all the steps required to parse arbitrary data to feed a reactive UI and close the cycle back to text. As we said, the possibilities of this approach for markdown documentation or more rich second brains are endless.
To see a working demo widget, check the widget below:
Markdown UI - Table
✨ Check this out 👇
This textarea is interactive. Change the markdown value or add rows to React table. They are in sync
In a next post we are going to implement an interactive kanban board with tasks following the same strategy as this one. Stay tuned!
Thanks for reading me and to all people that helped me to polish this article!