vjt

Declarative JSON-driven UI renderer for browser web apps.

vjt turns JSON widget descriptions into interactive HTML, with built-in support for:

• layout containers, adaptive layouts, tabs, spoilers, overlays
• controls such as edit fields, buttons, links, lists, grids, checkboxes, radio groups, markdown text
• actions, references, requests, SSE, cookies
• i18n and light/dark theme styles

Install

npm install vjt showdown

showdown is a runtime dependency used by md-text.

Usage

import { renderApp, ResourceManager } from 'vjt';
import 'vjt/styles.css';

const resources = new ResourceManager({
  ui: {
    main: {
      widget: 'container-layout',
      type: 'vertical',
      children: [
        {
          child: {
            widget: 'static-text',
            heading: 'h2',
            text: 'Hello'
          }
        },
        {
          child: {
            widget: 'button',
            text: 'Click me'
          }
        }
      ]
    }
  }
});

const root = document.querySelector('#app');
if (!(root instanceof HTMLElement)) {
  throw new Error('App requires #app root element');
}

renderApp(root, resources.getUi('main')!, {
  resourceManager: resources,
  language: 'en',
  theme: 'dark'
});

API

• renderApp(root, description, options) mounts an interactive app into a DOM element
• renderJson(description, options) renders markup without mounting
• ResourceManager stores UI resources, actions, requests, SSE configs, i18n, and custom styles
• DEFAULT_STYLE_MAP contains the library predefined styles

CSS

Include the bundled stylesheet:

import 'vjt/styles.css';

or load vjt-styles.css manually in the page.

Notes

• This package is browser-oriented and expects DOM APIs.
• Example apps and mock backend are part of the repository, but are not part of the published npm package surface.