JUX — Build UIs in Pure JavaScript. No Markup Required.

JUX is a headless UI authoring framework. Build reactive web applications with 100% JavaScript — no HTML templates, no JSX, no markup of any kind.

Think of it like a more reactive Streamlit, but for the web, written entirely in JavaScript. Author your UI top-down, procedurally — components appear in the order you call them.

npx juxscript create my-app
cd my-app
npm run dev

Hello World

// jux/index.jux
import { jux } from 'juxscript';

jux.h1('greeting', { content: 'Hello, World!' });
jux.p('intro', { content: 'Welcome to JUX — no HTML required.' });
jux.btn('click-me', { content: 'Click me' });

That's it. Three lines render a heading, a paragraph, and a button. The order you write them is the order they appear on the page.

Why JUX?

• Zero markup — no HTML, no JSX, no templates
• Procedural authoring — top-down code flow, just like writing a script
• Built-in reactivity — pageState connects components automatically
• Headless components — styled by default, fully customisable
• Any npm package — standard ESM imports work out of the box
• AI friendly — less code, fewer tokens, cleaner prompts

Getting Started

Create a new project

npx juxscript create my-app
cd my-app
npm run dev

This scaffolds a new project, installs dependencies, and starts a hot-reload dev server.

Add to an existing project

npm install juxscript
npx juxscript init   # creates jux/ directory and juxconfig.js
npm run dev

VS Code setup

JUX files use the .jux extension but are plain JavaScript. Tell VS Code:

// .vscode/settings.json
{
  "files.associations": {
    "*.jux": "javascript"
  },
  "javascript.validate.enable": false
}

The jux Namespace

Every component is accessed through the jux object. Import it once and everything you need is there.

import { jux } from 'juxscript';

Text & headings

jux.h1('page-title',  { content: 'Dashboard' });
jux.h2('section',     { content: 'Overview' });
jux.p('description',  { content: 'Here is your summary.' });
jux.span('note',      { content: 'Updated just now' });
jux.pre('code-block', { content: 'const x = 42;' });

Form inputs

jux.input('username',  { label: 'Username', placeholder: 'Enter name...' });
jux.email('email',     { label: 'Email' });
jux.password('pass',   { label: 'Password' });
jux.number('quantity', { label: 'Quantity', value: '1' });
jux.select('color', {
    label: 'Favourite colour',
    options: [
        { label: 'Red',   value: 'red'   },
        { label: 'Green', value: 'green' },
        { label: 'Blue',  value: 'blue'  }
    ]
});
jux.checkbox('agree', { label: 'I agree to the terms' });
jux.radio('size', {
    label: 'Size',
    options: [
        { label: 'Small',  value: 'sm' },
        { label: 'Medium', value: 'md' },
        { label: 'Large',  value: 'lg' }
    ]
});

Buttons & links

jux.btn('save',   { content: 'Save',   variant: 'default'     });
jux.btn('delete', { content: 'Delete', variant: 'destructive' });
jux.btn('cancel', { content: 'Cancel', variant: 'outline'     });
jux.a('home-link', { content: 'Home', href: '/' });

Layout & containers

// c(width, height, padding, borderRadius)
const card = jux.c('100%', 'auto', '1rem', '8px');

// Render something inside the card
jux.p('card-text', { content: 'I live inside the card', target: card.id });

Lists & tables

jux.list('todo-list', {
    items: [
        { id: 'a', content: 'Buy milk',   icon: '🛒' },
        { id: 'b', content: 'Write code', icon: '💻' }
    ],
    selectable: true
});

jux.table('users-table', {
    columns: [
        { key: 'name',  label: 'Name'  },
        { key: 'email', label: 'Email' },
        { key: 'role',  label: 'Role'  }
    ],
    items: [
        { name: 'Alice', email: '[email protected]', role: 'Admin' },
        { name: 'Bob',   email: '[email protected]',   role: 'User'  }
    ]
});

Navigation

jux.nav('main-nav', {
    items: [
        { id: 'nav-home',     icon: '🏠', label: 'Home',     path: '/'         },
        { id: 'nav-settings', icon: '⚙️', label: 'Settings', path: '/settings' }
    ]
});

Tabs

const tabs = jux.tabs('page-tabs');
tabs.addTab({ id: 'overview', label: 'Overview', content: 'Overview content here.' });
tabs.addTab({ id: 'details',  label: 'Details',  content: 'Details content here.'  });
tabs.activeTab('overview');
tabs.render('#app');

Data fetching

const api = await jux.data('my-api', { url: '/api/users' });
// api.value contains the response
console.log(api.getValue());

Styles

jux.include('/css/shadcn.css');               // inject a stylesheet link
jux.style('custom', 'body { margin: 0; }');   // inject inline CSS

Reactivity with pageState

pageState is JUX's reactivity layer. Every component you create is automatically registered in pageState, keyed by its id. Read values, react to events, and update the DOM — all from plain JavaScript.

import { jux, pageState } from 'juxscript';

Reading & writing state

jux.input('search', { label: 'Search' });
jux.p('result',     { content: '' });

// Whenever 'search' changes, update 'result'
pageState.__watch(() => {
    pageState['result'].content = 'You typed: ' + pageState['search'].value;
});

Reacting to events

jux.btn('submit-btn', { content: 'Submit' });
jux.p('status', { content: 'Waiting...' });

pageState.__watch(() => {
    if (pageState['submit-btn'].click) {
        pageState['status'].content = 'Submitted! ✅';
    }
});

Available event flags: click, change, input, blur, focus, keydown, keyup, hover, active, focused.

Chaining reactions

Reactions re-run whenever any pageState value they read changes — just like a spreadsheet. Chain them freely:

jux.input('first-name', { label: 'First name' });
jux.input('last-name',  { label: 'Last name'  });
jux.p('full-name',      { content: '' });

// Reacts to either input changing
pageState.__watch(() => {
    const first = pageState['first-name'].value;
    const last  = pageState['last-name'].value;
    pageState['full-name'].content = `${first} ${last}`.trim();
});

Conditional rendering

Because authoring is top-down procedural code, you can use plain if statements:

jux.input('promo-code', { label: 'Promo code' });

pageState.__watch(() => {
    if (pageState['promo-code'].value === 'JUXROCKS') {
        jux.p('promo-msg', { content: '🎉 10% discount applied!' });
    }
});

Visibility toggling

jux.p('hint', { content: 'Fill in all fields first.' });

pageState.__watch(() => {
    pageState['hint'].visible = pageState['username'].value === '';
});

Layout with c (Container)

c is a lightweight container that handles sizing and layout without any CSS classes.

import { jux, c } from 'juxscript';

// c(width, height, padding, borderRadius)
const sidebar = c('260px', '100vh', '1rem', '0');
const main    = c('calc(100% - 260px)', '100vh', '2rem', '0');

// Nest components inside a container using target
jux.h2('sidebar-title', { content: 'Menu', target: sidebar.id });
jux.h1('page-heading',  { content: 'Welcome', target: main.id });

Component Presets

Copy ready-made components into your project with:

npx juxscript comp sidebar

Available presets:

| Preset | Description | |-----------|------------------------------------------| | sidebar | Collapsible sidebar with nav sections |

More presets coming soon. Contribute your own to components/.

Advanced: Charts

JUX ships with a bar chart component you can drop into any page.

Horizontal bar chart

import { juxBarChart } from './bar.jux';

juxBarChart('revenue-chart', [
    { x: 4200, label: 'Jan' },
    { x: 5800, label: 'Feb' },
    { x: 3900, label: 'Mar' },
    { x: 7100, label: 'Apr' }
], {
    title:       'Monthly Revenue',
    subtitle:    'USD, 2024',
    orientation: 'horizontal',
    colors:      'blue',
    width:       600,
    showValues:  true
}).render('#app');

Vertical bar chart

juxBarChart('visitors', [
    { x: 1200, label: 'Mon' },
    { x: 980,  label: 'Tue' },
    { x: 1540, label: 'Wed' }
], {
    orientation: 'vertical',
    colors:      'green',
    width:       500
}).render('#app');

Chart options

| Option | Default | Description | |---------------|----------------|---------------------------------------------| | orientation | 'horizontal' | 'horizontal' or 'vertical' | | colors | 'green' | Palette name or array of hex colours | | title | '' | Chart title | | subtitle | '' | Chart subtitle | | width | 500 | Width in pixels | | aspectRatio | '16:9' | '16:9', '4:3', '1:1', '21:9', etc. | | showValues | false | Show value labels on bars | | ticks | 4 | Number of axis tick marks | | animate | true | Animate bars on load |

Colour palettes

import { jux } from 'juxscript';

// Named palettes
jux.palette('green');   // greens
jux.palette('blue');    // blues
jux.palette('multi');   // multi-colour

// Or pass a custom array
colors: ['#6366f1', '#8b5cf6', '#a78bfa']

Authoring a Full Page — Realistic Example

// jux/dashboard.jux
import { jux, pageState } from 'juxscript';
import { juxBarChart }     from './bar.jux';

// ── Layout ─────────────────────────────────────────────────────
jux.h1('dash-title',   { content: 'Sales Dashboard' });
jux.p('dash-subtitle', { content: 'Real-time overview' });

// ── Filters ────────────────────────────────────────────────────
jux.select('period', {
    label: 'Period',
    options: [
        { label: 'This week',  value: 'week'  },
        { label: 'This month', value: 'month' },
        { label: 'This year',  value: 'year'  }
    ]
});

// ── Chart ──────────────────────────────────────────────────────
juxBarChart('sales-chart', [
    { x: 3200, label: 'Mon' },
    { x: 4100, label: 'Tue' },
    { x: 2900, label: 'Wed' },
    { x: 5300, label: 'Thu' },
    { x: 4800, label: 'Fri' }
], { title: 'Sales This Week', colors: 'blue', width: 600 }).render('#app');

// ── Table ──────────────────────────────────────────────────────
jux.table('top-products', {
    columns: [
        { key: 'name',  label: 'Product' },
        { key: 'sales', label: 'Sales'   },
        { key: 'rev',   label: 'Revenue' }
    ],
    items: [
        { name: 'Widget A', sales: 320, rev: '$6,400' },
        { name: 'Widget B', sales: 210, rev: '$4,200' }
    ]
});

// ── Reactivity ─────────────────────────────────────────────────
jux.p('selected-period', { content: 'Showing: This week' });

pageState.__watch(() => {
    const p = pageState['period'].value;
    if (p) pageState['selected-period'].content = 'Showing: ' + p;
});

CLI Reference

npx juxscript create <name>     # Scaffold a new project
npx juxscript init              # Init JUX in an existing directory
npx juxscript serve             # Start production server
npx juxscript serve --hot       # Start dev server with hot reload
npx juxscript build             # Build for production
npx juxscript comp [name]       # Add a component preset
npx juxscript comp [name] -f    # Force overwrite (backs up existing)

Project Structure

my-app/
├── jux/
│   ├── index.jux          ← entry page (rendered at /)
│   ├── about.jux          ← rendered at /about
│   └── sidebar/           ← component presets live here
│       └── index.jux
├── public/
│   └── styles.css
├── juxconfig.js
└── package.json

Configuration (juxconfig.js)

export const config = {
  directories: {
    src:    'jux',
    public: 'public',
    dist:   '.jux-dist'
  },
  server: {
    port: 3000,
    host: 'localhost'
  }
};

Roadmap

• [x] Core component library (inputs, buttons, tables, lists, nav, tabs, charts)
• [x] pageState reactivity system
• [x] Router with nested routes and layouts
• [x] Hot-reload dev server
• [x] Component presets (jux comp)
• [ ] Cross-page state store
• [ ] Distributable static site bundles
• [ ] Data drivers (file, S3, database)
• [ ] CDN bundle
• [ ] Icon component
• [ ] More component presets (mobile nav, login page, profile page)