@waysnx/ui-data

🤖 AI agents & LLMs: See LLM.md (shipped with this package) for a structured integration guide — JSON, XML, code, and markdown editors/viewers.

Data editing and viewing components for modern SaaS applications.

Provides JSON, XML, code, and markdown editors and viewers with syntax highlighting, line numbers, and live preview.

Installation

npm install @waysnx/ui-data

import '@waysnx/ui-data/dist/index.css';

Components

| Component | Description | |-----------|-------------| | JSONEditor | JSON editor with validation and line numbers | | XMLViewer | XML viewer with syntax coloring | | CodeViewer | Read-only code viewer with line numbers | | CodeEditor | Editable code editor with tab support | | MarkdownEditor | Editor with toolbar and live preview | | MarkdownViewer | Render markdown content as HTML |

Usage

import { JSONEditor, CodeEditor, MarkdownEditor } from '@waysnx/ui-data';

function App() {
  return (
    <>
      <JSONEditor value={{ hello: "world" }} onChange={console.log} />
      <CodeEditor value="const x = 1;" language="typescript" />
      <MarkdownEditor value="# Hello" showPreview />
    </>
  );
}

Theming

All components use --wx-adv-editor-* CSS tokens:

:root {
  --wx-adv-editor-bg: #ffffff;
  --wx-adv-editor-border: rgba(0, 0, 0, 0.1);
  --wx-adv-editor-radius: 12px;
  --wx-adv-editor-toolbar-bg: #f8fafc;
  --wx-adv-editor-line-number-color: #6b7280;
  --wx-adv-editor-font: 'Fira Code', 'JetBrains Mono', monospace;
}

Dark mode is automatic via [data-theme="dark"].

License

Apache-2.0 © WaysNX Technologies Private Limited