kennethnym/jrx
1
0
Fork 0
mirror of https://github.com/kennethnym/jrx.git synced 2026-03-20 20:01:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix counter, add input binding, syntax highlighting, dark mode

Browse Source 
- Fix increment button: custom action handler instead of no-op setState
- Toggle visibility on Show/Hide Details button via $cond
- Input uses $bindState + useBoundProp for two-way binding
- Add shiki syntax highlighting (catppuccin-latte/mocha dual theme)
- Dark mode via prefers-color-scheme with CSS variables
- Layout: Live UI left, JSX Source + JSON Output stacked right

Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
Kenneth
2026-02-28 00:56:59 +00:00
parent af85ad3b07
commit 968faac7f5
8 changed files with 250 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
example/src/index.html
View File

@@ -5,8 +5,50 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jrx example</title>
<style>
:root {
--bg: #f5f5f5;
--bg-surface: #fff;
--bg-surface-alt: #fafafa;
--text: #111;
--text-secondary: #666;
--text-muted: #888;
--text-body: #444;
--border: #d0d0d0;
--border-light: #e0e0e0;
--accent: #4f46e5;
--code-bg: #1e1e2e;
--code-fg: #cdd6f4;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a2e;
--bg-surface: #232340;
--bg-surface-alt: #2a2a4a;
--text: #e0e0e0;
--text-secondary: #a0a0b0;
--text-muted: #808090;
--text-body: #c0c0d0;
--border: #3a3a5a;
--border-light: #333355;
--accent: #818cf8;
--code-bg: #11111b;
--code-fg: #cdd6f4;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #111; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); }
/* Shiki dual theme */
.shiki,
.shiki span { color: var(--shiki-light); background-color: var(--shiki-light-bg); }
@media (prefers-color-scheme: dark) {
.shiki,
.shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; }
}
/* Code block padding */
.shiki { padding: 16px; border-radius: 8px; }
</style>
</head>
<body>