Product Launch
anonymous
202 points
97 comments
Posted4 months agoActive4 months ago
Markdown UI
markdown-ui.comlaunchedlibrarydevelopers
Key Features
renders Markdown as UI componentssupports React, Svelte, and Vuezero build step
Tech Stack
React
Key Features
Tech Stack
Still looks like a solid tool tho in my opinion
I'm not seeing the value of generating React, Vue or Svelte as opposed to generating DOM components.
When HTML reaches the browser, all the markup is parsed, and the browser creates a Document Object Model (https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...). That object model is an extremely robust API that's loaded with tons of functionality, not the least of which is working with events (https://developer.mozilla.org/en-US/docs/Web/API/Document_Ob...).
The browser itself brings so much functionality that you can do stuff like check the status of the battery; create, save, and access files; get someone's precise lattitude and longitude; and _create and subscribe to streams_.
I'm not sure what you mean by, "html does not allow for event handling," ... but if HTML exists in a browser at all, there's plenty of event handling to go around.
What's really needed is a better editor experience.
Agreed. My blog is a single shell script that runs pandoc on all the files in a subdir, generates a new .md file for table of contents, and then uses pandoc to generate a ToC.html file.
That doesn't mean that my the site uses no Javascript - the magic of web components means that I can place `<some-custom-component> ...` in the middle of my .md content and have interactive components in the resulting html.
What would be really useful is decent tooling for this sort of authoring.
I'm not really sure how Svelte, React or Vue allow for easier event handling. I mean, what's harder with standard events in Vanilla JS? Sure, it's not perfect, but what exactly is easier in Svelte, React and Vue that makes the trade-off with VanillaJS a reasonable one?
Some more questions, if you don't mind:
1. I see that the event interface specifies detail with `id` and `value` fields. What is the reason for using this? The underlying event already has a target, which will have the id and the value fields anyway. Are the widget's in this system so different that they have different id fields to the DOM elements?
2. There does not appear to be a field in the emitted event for the event sub-name (other than the custom name in the event structure itself). What if a component needs to emit something other than a "click" event? Ordinarily we'd get the event name from the event itself, so the handler knows whether it is being called on "focus", "click" "activate", etc. This information is lost with a custom event.
3. I'm still confused why you can't emit DOM elements; I mean, if you said "can't do two-way data binding" or something along the similar lines, it'd (maybe) make sense, but your response makes me think that you have not even considered it. I feel, maybe wrongly, that this library is both unnecessarily crippled and over-engineered - it targets spaghetti-as-a-pattern React, but not the hierarchical DOM?
While yea it is nice to directly deliver to HTML (I've done it many times), reality is most UI is in other framework languages. Plus I think a strong use-case is making output / browsing inside UI AI interfaces, which are also likely in a framework.
You provided enough for others who really care to add a direct-to-HTML plugin/fork if they so choose. Many of us want to use frameworks.
> 1. I see that the event interface specifies detail with `id` and `value` fields. What is the reason for using this? The underlying event already has a target, which will have the id and the value fields anyway. Are the widget's in this system so different that they have different id fields to the DOM elements?
This is something I rarely use in Vue anymore. I think back in the day, when Angular first emerged and pushed these sort of frameworks, there was a philosophy towards making components embed in code as if they were HTML native elements, and not needing to write JS around the event. If I remember correctly, providing a value field isn't asking it for the value of the event. It's specifying which value in memory should be set to the output of the event... But my memory is dodgy on that. It's confusing and I rarely see it used these days, but maybe that's reflective on the projects I've worked on.
> 2. There does not appear to be a field in the emitted event for the event sub-name (other than the custom name in the event structure itself). What if a component needs to emit something other than a "click" event? Ordinarily we'd get the event name from the event itself, so the handler knows whether it is being called on "focus", "click" "activate", etc. This information is lost with a custom event.
Can you expand on the usecase here? Ordinarily, at least in Vue, there's no need to know the name of the event currently being triggered. The component emits a "change" event (or whatever you call it) and the parent component, when setting up the child component, will specify some sort of 'on-change' attribute that listens for the 'change' event and says which function should be evoked as the callback to it. So basically, instead of having to write `document.getElementById('foo').on('change', respondToFoo)`, you simply write `on-change='respondtoFoo'` directly on the element in the HTML.
It's not the world's biggest win, but it does reduce the amount of code our eyes having sift through in reading the JS, and attaches the event details directly to the element(s) they relate to, which I've found to be more readable.
> 3. I'm still confused why you can't emit DOM elements; I mean, if you said "can't do two-way data binding" or something along the similar lines, it'd (maybe) make sense, but your response makes me think that you have not even considered it. I feel, maybe wrongly, that this library is both unnecessarily crippled and over-engineered - it targets spaghetti-as-a-pattern React, but not the hierarchical DOM?
You can, at least in Vue, but it's working against the grain. There's two reasons why:
1. Separation of presentation and state. These frameworks like to keep the HTML/DOM as simple presentation tools, and store logic and data separately. So when triggering events, we want to be emitting the important data as data, and not be concerned with the presentational layer from which that data may have originated.
2. Reusability of components. Emiting dom elements creates a more tightly coupled environment where there are a lot of expectations of the object being emitted (and little assurance as to what that object contains). By only exposing data and leaving the DOM element behind, it's easier for invoking components to use that data without having to hold expectations of the data structures being passed through.
It's very simple: the post had not been upvoted to the front page with the title you suggested.
markdown-ui-widget-html-version-long
<button-group id=plan label=Plan choices="Brainstorm,Review,Launch" default=Brainstorm />The other day my project owner remarked that in the future perhaps we won't be building catalogs of items like the one I am currently, but interrogate an LLM assistant for a summary of the data - no need for forms and such.
I don't know how accurate that prediction is, but it got me thinking: what if coding assistants are a dead end and what users will actually prefer is going to be just a text box where you type in your human-language query?
Forms are here to stay at least in any kind of government or legal document, as there's liability associated with any mistakes, but less consequential stuff?
This has been my experience with many rich web apps in the last several years. I have a habit of pressing Cmd+R especially before doing something important, and it feels like rebooting a computer in Windows 95 days.
The worst offender was a banking web app that didn't have my country of birth(internationally recognised as independent since 1945) among the options in the form.
I recently did this for a job application (some third-party was used to capture applicant details): the drop down of local universities ("where did you complete this degree?") was missing my university.
So I added it in via devtools, hit submit, and now am on the third interview :-)
Check it twice, what the submission implements is writing all the UI in markdown, not mixing markdown with React.
Perhaps I don't know mdxjs enough but that's my impression.
MDX parses JSX so it's compatible with any JSX runtime, not just react.
You're right that MDX executes arbitrary code because it supports the `import` and string interpolation of MDX and performs unsafe evals.
Because those evals aren't safe to use at runtime, I actually created a library that uses the MDX parser to support the static subset of JSX (which is very similar to HTML making it static and secure): https://www.npmjs.com/package/react-markdown-with-mdx
MDX goes a step further by enabling you to actually write the component JSX in the Markdown as if it's React (rather than using ``` syntax). You can just display a component that was loaded from somewhere else. Basically, if you took the Markdown UI components as React components, you could use the runtime embed option from here: https://mdxjs.com/guides/embed/
Sometimes I've made little things that I envision for a specific purpose and then think that use case is only MY intention and in theory could be used more broadly. These are tiny little personal projects I'm thinking about so they never end up getting real feedback. But without a firm alternative use-case I've wondered if it's better to just frame it specifically for the one I have.
https://www.timetler.com/2025/08/19/unlocking-rich-ui-compon...
- One that parses markdown text and generates javascript code, be it React, Svelte or whatever. It must generate compiled react/svelte source, e.g. it cannot generate JSX
- The javascript code get executed at runtime which runs the chosen framework, but without a build step such frameworks won't generate optmized code. In the case of React even gives you the illusion that HTML rendering is in immediate mode but it actually
- Keep another layer that diffs some tree data in memory that eventually generate/manipulates DOM nodes which is retained mode rendering
- Which in turn calls native bindings with the rendering engine(be it Skia or whatever)
- Which in turn calls OS apis and so on...
I'm asking sincerely: where are we going?
To me this just reads like not getting the point.
Plus a little rsync script.
Hard for me to not look at this and find it all very silly.
"It won't scale" is how over engineered code gets written
I created a library for runtime MDX because of that: https://www.npmjs.com/package/react-markdown-with-mdx
I'm curious why you decided to go with a DSL instead of embedding an established language?
On the other hand, this is true of every web site using a JS-world framework, and worse, even static sites if they use JS ad scripts.
[0]: mdwiki.info
3 more comments available on Hacker News
Not affiliated with Hacker News or Y Combinator. We simply enrich the public API with analytics.