Overview & install

ichigo.js (@mintjamsinc/ichigojs) is a lightweight reactive UI framework. It pairs a Vue-like API with a virtual DOM, so you build UIs with declarative templates and automatic dependency tracking. It is written in TypeScript and ships with type definitions.

At MintJams it powers front-end work across the board: the standard and custom Webtop apps, the Commerce storefront, task forms, and more.

Features

  • Reactive — data is automatically reactive; computed (tracked + cached, writable via { get, set }) and watch (deep / immediate)
  • Rich directives — v-if / v-for / v-model / v-bind / v-on and more, plus v-focus and the observer directives
  • Lifecycle hooks — @mount … @unmounted with $ctx, and userData for holding third-party instances with automatic cleanup
  • Components — reusable Web Components via defineComponent (props / slot / $emit)
  • Template refs — direct access to DOM elements and components via ref / $refs
  • Fast — batched updates on a microtask; ~6.8ms for a 1000-item list update
  • Lightweight, full TypeScript support

Installation

npm install @mintjamsinc/ichigojs

Bundle formats

Format Import
ESM import { VDOM } from '@mintjamsinc/ichigojs';
CommonJS const { VDOM } = require('@mintjamsinc/ichigojs');
UMD <script src=".../dist/ichigo.umd.js"> → use window.ichigo

You can also try it from a CDN:

<script type="module">
  import { VDOM } from 'https://cdn.jsdelivr.net/npm/@mintjamsinc/ichigojs/dist/ichigo.esm.min.js';
  // ...
</script>

Minimal example

<div id="app">
  <h1>{{ message }}</h1>
  <input v-model="message">
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

import { VDOM } from '@mintjamsinc/ichigojs';

VDOM.createApp({
  data() { return { message: 'Hello ichigo.js!', count: 0 }; },
  methods: { increment() { this.count++; } }
}).mount('#app');

Requirements

  • Modern browsers with ES2020+ support
  • Uses Proxy, queueMicrotask, and similar features

Next steps