@c2-markdown-ui/react 0.0.0-stage → 0.4.3

package/README.md

@@ -1,3 +1,112 @@
-# Temporary Holding Version
+# @c2-markdown-ui/react
+**Transform Markdown into interactive React components—instantly.**
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Turn static docs into live experiences users can click, select, and submit.
+
+✨ [Try the live demo](https://markdown-ui.com/) ✨
+
+## Get started in 30 seconds
+
+```bash
+npm install @c2-markdown-ui/react @c2-markdown-ui/marked-ext marked
+```
+
+```tsx
+import { MarkdownUI } from '@c2-markdown-ui/react';
+import '@c2-markdown-ui/react/widgets.css';
+import { Marked } from 'marked';
+import { markedUiExtension } from '@c2-markdown-ui/marked-ext';
+
+const marked = new Marked();
+marked.use(markedUiExtension);
+
+const markdown = `
+\`\`\`markdown-ui-widget
+select env [dev staging prod]
+\`\`\`
+`;
+
+function App() {
+  const handleWidgetEvent = (event) => {
+    console.log('User selected:', event.detail);
+  };
+
+  return (
+    <MarkdownUI 
+      html={marked.parse(markdown)} 
+      onWidgetEvent={handleWidgetEvent} 
+    />
+  );
+}
+```
+
+## What you can build
+
+**Quick inputs**
+```tsx
+text-input username "Username" "Enter name"
+button-group env [dev staging prod] dev
+select region [us-east us-west] us-east
+```
+
+**Complex forms**
+```tsx
+form deploy "Launch"
+  text-input name "App Name"
+  slider replicas 1 10 1 3
+  select env [dev prod] dev
+```
+
+**Interactive charts**
+```tsx
+chart-line
+title: Monthly Revenue
+height: 300
+Month,Sales,Target
+Jan,45000,50000
+Feb,52000,50000
+Mar,48000,55000
+```
+
+**Events made simple**
+```tsx
+const handleWidgetEvent = (event) => {
+  const { id, value } = event.detail;
+  // That's it - perfect event data
+};
+
+// Form submit (fires after validation passes)
+const handleSubmit = (event) => {
+  const { id, value } = event.detail; // value = full form data (visible fields only)
+};
+
+// Form field stats (fires on every field change)
+const handleFormChange = (event) => {
+  const { visibleCount, filledCount, values } = event.detail.stats;
+  // e.g. "3/5 fields filled" - perfect for progress indicators
+};
+
+<MarkdownUI
+  html={html}
+  onWidgetEvent={handleWidgetEvent}
+  onSubmit={handleSubmit}
+  onFormChange={handleFormChange}
+/>
+```
+
+## TypeScript ready
+
+Full type safety out of the box. All components and events are properly typed for the best developer experience.
+
+## Works everywhere
+
+**SSR-safe by design.** No special setup needed for Next.js, Remix, or any React framework.
+
+```tsx
+// Just import and use - SSR handled automatically
+import { MarkdownUI } from '@c2-markdown-ui/react';
+```
+
+**Compatibility:** React 18+, Next.js, Remix, Create React App, Vite, and all modern React frameworks.
+
+MIT © 2025