Ordering UI

A Vue.js component library for dynamic JSON-driven UIs with template preprocessing.

JsonRenderer

Renders Vue components from JSON templates with support for built-in and remote components.

``vue



`

$3

JsonRenderer can resolve BUILT_IN / REMOTE descriptors inside static props (top-level only).
This is useful for passing a component as a prop to simulate slots.

`js
const template = {
component: { type: 'BUILT_IN', id: 'Card' },
props: {
// top-level static prop only
headerComponent: { type: 'BUILT_IN', id: 'OrderButton' },
footerComponent: {
type: 'REMOTE',
url: 'https://cdn.example.com/components.js',
name: 'FooterActions'
}
}
}
`

In your receiving component (e.g. Card), render the prop with component:

`vue

`

$3

- HTML tags: "div", "button", etc.
- Built-in: { type: 'BUILT_IN', id: 'ComponentName' }
- Remote: { type: 'REMOTE', url: 'https://...', name: 'ExportName' }

Preprocessor

Processes JSON templates with context variables using {{ }} syntax.

`js
import { renderJsonWithContext, renderTemplateWithContext } from '@/preprocessor'

// Template string processing
const template = "Hello {{ name }}, you are {{ age }} years old"
const context = { name: 'John', age: 30 }
const result = renderTemplateWithContext(template, context)
// "Hello John, you are 30 years old"

// Boolean expressions
const condition = "{{ deviceType === 'tablet' }}"
const isTablet = renderTemplateWithContext(condition, { deviceType: 'tablet' })
// true

// JSON object processing
const jsonTemplate = {
title: "User: {{ name }}",
enabled: "{{ isActive }}",
count: "{{ items * 2 }}",
nested: {
message: "Status: {{ status === 'active' ? 'online' : 'offline' }}"
}
}

const processedJson = renderJsonWithContext(jsonTemplate, {
name: 'Alice',
isActive: true,
items: 5,
status: 'active'
})
// {
// title: "User: Alice",
// enabled: true,
// count: 10,
// nested: { message: "Status: online" }
// }
`

$3

- Only primitive values: string, number, boolean, null`
- No arrays, objects, functions, or undefined
- Template expressions must be JSON-serializable