Forem: Paul H

The Underrated LemonadeJS Form-to-JSON Sync Feature

Paul H — Sun, 25 Jan 2026 15:23:11 +0000

LemonadeJS v5 introduced setPath — a bidirectional form-to-JSON binding that most developers haven't discovered yet. No event handlers, no controlled components. Just declare the path and it syncs.

The Problem

You have a JSON object. You have a form. Keeping them in sync means writing event listeners for every field, handling different input types, managing nested objects... it adds up fast.

The Solution

let [data, setData, getData] = setPath(initialObject);

<input lm-path="user.name" />
<input lm-path="user.settings.theme" />

That's it. Form changes update data. Call setData(obj) to populate the form. Call getData() to extract current values.

Complete Example

One component showing everything: defaults, nested binding, load, save, validation callback, and reset.

const defaults = {
    name: '',
    email: '',
    settings: {
        notifications: true,
        theme: 'light'
    }
};

export default function UserForm(children, { setPath, onload }) {
    const self = this;

    // Initialize with optional change callback
    let [data, setData, getData] = setPath(defaults, (value, path, el) => {
        // Validation example
        if (path === 'email' && value && !value.includes('@')) {
            el.classList.add('invalid');
        } else {
            el.classList.remove('invalid');
        }
    });

    // Load existing data
    onload(async () => {
        const id = getRouteId();
        if (id) {
            const user = await fetch(`/api/users/${id}`).then(r => r.json());
            setData(user); // Populates entire form
        }
    });

    const save = async () => {
        const payload = getData(); // Gets entire form as object
        await fetch('/api/users', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
    };

    const reset = () => setData(defaults);

    return render => render`
        <form>
            <input type="text" lm-path="name" placeholder="Name" />
            <input type="email" lm-path="email" placeholder="Email" />

            <label>
                <input type="checkbox" lm-path="settings.notifications" />
                Email notifications
            </label>

            <select lm-path="settings.theme">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>

            <button type="button" onclick="${reset}">Reset</button>
            <button type="button" onclick="${save}">Save</button>
        </form>
    `;
}

API Reference

let [data, setData, getData] = setPath(initialObject, onChange);

Return	Description
`data`	Reactive object synced with form
`setData(obj)`	JSON → Form
`getData()`	Form → JSON

Callback signature:

(value, path, element) => { }
// path = "settings.theme", etc.

Template binding:

<input lm-path="fieldName" />
<input lm-path="nested.property.path" />

Works with: <input>, <textarea>, <select>, checkboxes, radio buttons.

Why It Works Well

Close to vanilla JS — Components are functions, templates are template literals. No transpilation needed.
Small footprint — Less than 8KB for the entire framework, form binding included.
No magic — You can read the code and understand what's happening.

Related Tools

LemonadeJS is part of a suite of lightweight JS tools:

LemonadeJS - Reactive micro-framework
Jspreadsheet - Excel-like spreadsheets
CalendarJS - A complete collection of calendar and schedule components
Jsuites - UI components (calendar, dropdown, color picker)

Building Type-Safe ETL Pipelines in TypeScript

Paul H — Sat, 24 Jan 2026 21:42:13 +0000

A practical guide to implementing Extract, Transform, Load workflows with full type safety

Introduction

ETL (Extract, Transform, Load) is a fundamental pattern in data engineering. Whether you're syncing CRM data to a warehouse, migrating between databases, or integrating third-party APIs, ETL pipelines are everywhere. But building them in a type-safe, maintainable way has traditionally been challenging.

In this article, we'll explore how to implement ETL pipelines in TypeScript using OpenETL, a modern framework that brings type safety and abstraction to data integration.

What is ETL?

ETL consists of three phases:

Extract: Pull data from a source (database, API, file)
Transform: Clean, reshape, or enrich the data
Load: Write the data to a destination

┌─────────┐    ┌───────────┐    ┌─────────┐
│ Extract │ ── │ Transform │ ── │  Load   │
└─────────┘    └───────────┘    └─────────┘
    │                │               │
    ▼                ▼               ▼
 Database         Rename           Data
   API            Filter         Warehouse
   File           Merge             API

The Challenge with Traditional ETL

Traditional ETL implementations often suffer from:

Tight coupling: Source-specific code mixed with business logic
No type safety: Runtime errors from schema mismatches
Code duplication: Similar patterns repeated for each integration
Hard to test: Database connections embedded in business logic

The Adapter Pattern Solution

OpenETL solves these problems with the adapter pattern. Each data source implements a common interface, allowing you to swap sources without changing your pipeline logic.

// The adapter interface - all sources implement this
interface AdapterInstance {
  connect(): Promise<void>;
  disconnect(): Promise<void>;
  download(options: PageOptions): Promise<{ data: any[] }>;
  upload(data: any[]): Promise<void>;
}

This abstraction means your pipeline code doesn't care whether data comes from PostgreSQL, MongoDB, or a REST API.

Getting Started

Installation

npm install openetl
npm install @openetl/postgresql  # or any adapter you need

Basic Pipeline

Here's a simple pipeline that downloads data from PostgreSQL:

import { Orchestrator, Vault, Pipeline } from 'openetl';
import { postgresql } from '@openetl/postgresql';

// 1. Define credentials in a vault
const vault: Vault = {
  'my-database': {
    id: 'my-database',
    type: 'basic',
    credentials: {
      host: 'localhost',
      port: '5432',
      database: 'myapp',
      username: 'user',
      password: 'secret',
    },
  },
};

// 2. Register adapters
const adapters = { postgresql };

// 3. Define the pipeline
const pipeline: Pipeline = {
  id: 'export-users',
  source: {
    id: 'source',
    adapter_id: 'postgresql',
    endpoint_id: 'table_query',
    credential_id: 'my-database',
    fields: ['id', 'email', 'name', 'created_at'],
    config: {
      schema: 'public',
      table: 'users',
    },
  },
};

// 4. Execute
const etl = Orchestrator(vault, adapters);
const result = await etl.runPipeline(pipeline);

console.log(`Exported ${result.data.length} users`);

Working with Multiple Data Sources

The power of abstraction becomes clear when working with multiple sources. The same pipeline structure works regardless of the source:

import { postgresql } from '@openetl/postgresql';
import { mysql } from '@openetl/mysql';
import { mongodb } from '@openetl/mongodb';
import { hubspot } from '@openetl/hubspot';

const adapters = { postgresql, mysql, mongodb, hubspot };

// PostgreSQL source
const postgresSource = {
  adapter_id: 'postgresql',
  endpoint_id: 'table_query',
  config: { schema: 'public', table: 'customers' },
};

// MySQL source - same structure, different adapter
const mysqlSource = {
  adapter_id: 'mysql',
  endpoint_id: 'table_query',
  config: { database: 'sales', table: 'customers' },
};

// MongoDB source - still the same pattern
const mongoSource = {
  adapter_id: 'mongodb',
  endpoint_id: 'collection_query',
  config: { table: 'customers' },
};

// HubSpot API - REST API, same interface
const hubspotSource = {
  adapter_id: 'hubspot',
  endpoint_id: 'contacts',
};

Data Transformations

OpenETL includes 12 built-in transformation types. Transformations are applied in sequence during the pipeline execution:

const pipeline: Pipeline = {
  id: 'transform-contacts',
  source: {
    // ... source config
    transform: [
      // Combine first and last name
      {
        type: 'concat',
        options: {
          properties: ['first_name', 'last_name'],
          glue: ' ',
          to: 'full_name',
        },
      },
      // Normalize email to lowercase
      {
        type: 'lowercase',
        options: { field: 'email' },
      },
      // Remove whitespace
      {
        type: 'trim',
        options: { field: 'full_name' },
      },
      // Extract domain from email
      {
        type: 'extract',
        options: {
          field: 'email',
          pattern: '@(.+)$',
          to: 'email_domain',
        },
      },
    ],
  },
};

Available Transformations

Type	Description	Example
`concat`	Combine multiple fields	`['first', 'last']` → `'full_name'`
`renameKey`	Copy/rename a field	`'old_field'` → `'new_field'`
`uppercase`	Convert to uppercase	`'hello'` → `'HELLO'`
`lowercase`	Convert to lowercase	`'HELLO'` → `'hello'`
`trim`	Remove whitespace	`' text '` → `'text'`
`split`	Split into array	`'a,b,c'` → `['a','b','c']`
`replace`	Regex replacement	`'foo'` → `'bar'`
`addPrefix`	Add prefix	`'123'` → `'ID-123'`
`addSuffix`	Add suffix	`'file'` → `'file.txt'`
`toNumber`	Parse as number	`'42'` → `42`
`extract`	Extract substring	`'user@example.com'` → `'example.com'`
`mergeObjects`	Combine fields into object	`{a, b}` → `{merged: {a, b}}`

Filtering and Sorting

Apply filters and sorting at the source level for efficient data retrieval:

const pipeline: Pipeline = {
  id: 'active-premium-users',
  source: {
    // ...
    filters: [
      { field: 'status', operator: '=', value: 'active' },
      { field: 'plan', operator: '=', value: 'premium' },
      { field: 'created_at', operator: '>=', value: '2024-01-01' },
    ],
    sort: [
      { field: 'created_at', type: 'desc' },
      { field: 'name', type: 'asc' },
    ],
    limit: 1000,
  },
};

Filter Groups

For complex conditions, use filter groups with AND/OR logic:

filters: [
  {
    op: 'OR',
    filters: [
      { field: 'status', operator: '=', value: 'active' },
      { field: 'status', operator: '=', value: 'pending' },
    ],
  },
  { field: 'email_verified', operator: '=', value: 'true' },
]
// SQL: WHERE (status = 'active' OR status = 'pending') AND email_verified = true

Source to Target Pipelines

Move data between systems by defining both source and target:

const pipeline: Pipeline = {
  id: 'sync-crm-to-warehouse',
  source: {
    id: 'hubspot-source',
    adapter_id: 'hubspot',
    endpoint_id: 'contacts',
    credential_id: 'hubspot-api',
    fields: ['email', 'firstname', 'lastname', 'company'],
    pagination: { type: 'cursor', itemsPerPage: 100 },
  },
  target: {
    id: 'postgres-target',
    adapter_id: 'postgresql',
    endpoint_id: 'table_insert',
    credential_id: 'warehouse-db',
    fields: ['email', 'first_name', 'last_name', 'company'],
    config: {
      schema: 'analytics',
      table: 'crm_contacts',
    },
  },
};

const result = await etl.runPipeline(pipeline);
console.log(`Synced ${result.data.length} contacts to warehouse`);

Pagination Strategies

Different APIs use different pagination methods. OpenETL supports three strategies:

// Offset-based (SQL databases)
pagination: { type: 'offset', itemsPerPage: 100 }

// Cursor-based (modern APIs like HubSpot, Stripe)
pagination: { type: 'cursor', itemsPerPage: 100 }

// Page-based (traditional REST APIs)
pagination: { type: 'page', itemsPerPage: 50 }

Error Handling

Configure retry behavior for resilient pipelines:

const pipeline: Pipeline = {
  id: 'resilient-sync',
  source: { /* ... */ },
  error_handling: {
    max_retries: 3,
    retry_interval: 1000,  // ms between retries
    fail_on_error: true,   // stop on first error
  },
};

OpenETL uses exponential backoff with jitter to prevent thundering herd problems when retrying.

Pipeline Validation

Validate pipelines before execution to catch configuration errors early:

import { validatePipeline } from 'openetl';

const result = validatePipeline(pipeline, adapters, vault);

if (!result.valid) {
  console.error('Pipeline validation failed:');
  result.errors.forEach(err => console.error(`  - ${err}`));
} else {
  // Safe to run
  await etl.runPipeline(pipeline);
}

Building Custom Adapters

Create adapters for any data source by implementing the adapter interface:

import { Adapter, AdapterInstance, Connector, AuthConfig } from 'openetl';

const MyCustomAdapter = {
  id: 'my-adapter',
  name: 'My Custom Adapter',
  type: 'http',
  action: ['download', 'upload'],
  credential_type: 'api_key',
  base_url: 'https://api.example.com',
  endpoints: [
    {
      id: 'users',
      path: '/users',
      method: 'GET',
      description: 'Fetch users',
      supported_actions: ['download'],
    },
  ],
};

function myAdapter(connector: Connector, auth: AuthConfig): AdapterInstance {
  return {
    async connect() {
      // Validate connection
    },

    async disconnect() {
      // Cleanup
    },

    async download({ limit, offset }) {
      const response = await fetch(
        `https://api.example.com/users?limit=${limit}&offset=${offset}`,
        { headers: { 'Authorization': `Bearer ${auth.credentials.api_key}` } }
      );
      const data = await response.json();
      return { data };
    },

    async upload(data) {
      await fetch('https://api.example.com/users', {
        method: 'POST',
        body: JSON.stringify(data),
      });
    },
  };
}

export { myAdapter, MyCustomAdapter };

Type Safety Benefits

TypeScript provides compile-time checking for your pipelines:

// Type error: 'invalid' is not a valid pagination type
const pipeline: Pipeline = {
  source: {
    pagination: { type: 'invalid' }, // ❌ TypeScript error
  },
};

// Type error: missing required field
const auth: BasicAuth = {
  id: 'db',
  type: 'basic',
  credentials: {
    username: 'user',
    // password: missing  // ❌ TypeScript error
  },
};

Conclusion

OpenETL brings the benefits of TypeScript to ETL development:

Type safety catches configuration errors at compile time
Adapter abstraction decouples pipelines from data sources
Built-in transformations handle common data manipulation
Flexible pagination works with any API pattern
Error handling with exponential backoff for resilience

By using these patterns, you can build maintainable, testable ETL pipelines that scale with your data integration needs.

Resources

OpenETL is open source under the MIT license. Contributions welcome!

The Definitive Guide to JS Spreadsheets with Jspreadsheet Pro

Paul H — Fri, 23 Jan 2026 21:57:18 +0000

Everything you need to know before adding spreadsheet functionality to your web app

Why This Guide Exists

If you've ever tried to build a data-heavy web application, you know the pain. Users want to edit thousands of rows, paste data from Excel, use formulas, and expect everything to just work. Building this from scratch? That's months of work and endless edge cases.

This guide walks you through Jspreadsheet Pro—what it does, when it makes sense, and how to get it running. No fluff, just practical information to help you decide if it fits your project.

Grid or Spreadsheet? Pick the Right Tool

Before diving in, let's clear up a common confusion. Data grids and spreadsheets look similar but solve different problems.

When a Simple Grid Works Fine

A data grid is basically a table on steroids. You feed it data, it displays rows and columns, users can sort and filter. That's about it. If your users just need to view records from a database and maybe edit a field here and there, a grid does the job.

Grids work well for:

Admin panels showing database records
Simple CRUD interfaces
Read-heavy dashboards
Situations where users don't need calculations

When You Actually Need a Spreadsheet

Spreadsheets are different beasts. Users expect to write formulas like =SUM(A1:A100), format individual cells, merge headers, and import their existing Excel files. They want keyboard shortcuts they've used for years. They want to paste 500 rows from Excel and have it just work.

You need a spreadsheet when:

Users bring their own Excel files
Calculations happen on the client side
Cell-level formatting matters
People expect Excel-like behavior (because they'll compare it to Excel)
Financial modeling, budgeting, or reporting is involved

Quick Comparison

What You Need	Grid	Spreadsheet
Show database records	✓	Overkill
User-defined formulas	✗	✓
Import .xlsx files	Usually not	✓
Cell-by-cell formatting	Limited	✓
Copy/paste from Excel	Basic	Full support
Training required	Some	Almost none (users know Excel)

Jspreadsheet sits in an interesting spot—it handles both scenarios. You can use it as a performant data grid when that's all you need, then enable spreadsheet features when users require them.

Is a JavaScript Spreadsheet Right for Your Project?

Here's when Jspreadsheet makes sense:

Your users already live in Excel. Accountants, analysts, operations teams—these people think in spreadsheets. Give them a familiar interface and they'll adopt it immediately. Force them to learn something new and you'll fight adoption forever.

You need client-side calculations. Server round-trips for every formula? That's slow and frustrating. Running calculations in the browser keeps things responsive.

Excel import/export is a requirement. If users need to upload their existing workbooks or download results to Excel, you need proper .xlsx support—not CSV hacks.

You're handling serious data volume. Jspreadsheet can handle hundreds of thousands of rows without choking. Virtual scrolling means it only renders what's visible.

Development time matters. Building spreadsheet functionality from scratch takes months. Getting something production-ready with Jspreadsheet takes days.

Getting Started with Version 12

Let's get practical. Here's how to get Jspreadsheet running.

Installation

NPM (recommended for production):

npm install jspreadsheet@12

Framework-specific wrappers:

npm install @jspreadsheet/react@12
npm install @jspreadsheet/vue@12
npm install @jspreadsheet/angular@12

CDN (quick prototyping):

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" />
<link rel="stylesheet" href="https://jsuites.net/v6/jsuites.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

Your First Spreadsheet

Plain JavaScript:

<div id="spreadsheet"></div>

<script>
jspreadsheet.setLicense('your-license-key');

jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    worksheets: [{
        minDimensions: [10, 10],
    }],
});
</script>

That's it. You've got a working spreadsheet with tabs and a toolbar.

React:

import { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('your-license-key');

function App() {
    const spreadsheet = useRef();

    return (
        <Spreadsheet ref={spreadsheet} tabs={true} toolbar={true}>
            <Worksheet minDimensions={[10, 10]} />
        </Spreadsheet>
    );
}

Vue:

<template>
    <Spreadsheet :license="license" :tabs="true" :toolbar="true">
        <Worksheet :minDimensions="[10, 10]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

export default {
    components: { Spreadsheet, Worksheet },
    data() {
        return { license: 'your-license-key' };
    }
}
</script>

Angular:

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense('your-license-key');

@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    worksheets: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tabs: true,
            toolbar: true,
            worksheets: [{ minDimensions: [10, 10] }],
        });
    }
}

What's Under the Hood

Formulas That Actually Work

Jspreadsheet includes two formula engines:

Basic (included): Covers standard spreadsheet functions—SUM, AVERAGE, IF, VLOOKUP, and the rest of what most users need.

Formula Pro (extension): The heavy-duty option. Matrix calculations, cross-worksheet references, range operations like A:A, percentage operators, and a formula picker UI. If your users write complex financial models, this is what you want.

Both engines track dependencies properly, so changing one cell recalculates everything that depends on it—without recalculating everything else.

Cell Types and Editors

Out of the box, you get:

Text and numbers
Dropdowns and autocomplete
Date pickers
Checkboxes and radio buttons
Color pickers
Image cells
HTML content

Need something custom? The editor API lets you build your own. Plug in a rich text editor, a slider, a star rating—whatever your app needs.

Handling Large Data

Performance matters when you're dealing with real data. Jspreadsheet uses virtual scrolling—it only renders rows that are actually visible. Scroll down and it renders more. This means 100,000 rows performs nearly as well as 100 rows.

Combined with lazy loading (fetch data as needed from your server), you can build interfaces that handle serious volume without making users wait.

The Stuff Users Expect

Everything people take for granted in Excel:

Freeze rows and columns
Merge cells
Column and row grouping (collapsible sections)
Nested headers
Full undo/redo history
Keyboard shortcuts
Copy/paste that works with external applications
Search and filtering
Sorting
Comments on cells
Data validation

Extensions: What's Available

Jspreadsheet's core handles most use cases, but extensions unlock specialized functionality.

Enterprise Extensions

Extension	What It Does
Formula Pro	Advanced formula engine with matrix operations, cross-worksheet calculations, and a formula picker UI
Import from XLSX	Parse Excel files into Jspreadsheet—formatting, formulas, and all
Export to XLSX	Generate real .xlsx files users can open in Excel
Charts	Interactive charts tied to your spreadsheet data
Validations	UI for creating data validation rules (required fields, number ranges, custom logic)
CSV Importer	Flexible CSV parsing with column mapping
Comments	Threaded comments with author info and timestamps
Search & Replace	Find and replace across the entire workbook
Forms	Auto-generate HTML forms from your column definitions

Ultimate Extensions

Everything in Enterprise, plus:

Extension	What It Does
Edition Bar	Excel-style formula bar at the top
Format	Runtime control over cell/column formats and editors
Top Menu	Customizable menu bar (File, Edit, View, etc.)
Export to PDF	Print-ready PDF generation
Google Sheets Importer	Pull data directly from Google Sheets
Jspreadsheet Server	Backend for persistence, collaboration, and server-side operations
Jspreadsheet Client	Connect your frontend to Jspreadsheet Server
Shapes	Draw shapes and connectors on your spreadsheet
ChatGPT Integration	AI-powered features—natural language formulas, data analysis, content generation
Pivot Tables	Summarize and analyze data with drag-and-drop pivot functionality

Real-Time Collaboration

The Ultimate edition with Jspreadsheet Server enables Google Docs-style collaboration:

Multiple users editing simultaneously
See other users' cursors and selections
Changes sync instantly
Works offline—syncs when connection returns
Per-user and per-cell permissions
Threaded comments with @mentions

This requires running Jspreadsheet Server on your backend. It handles conflict resolution, persistence, and broadcasting changes to connected clients.

AI Features

The ChatGPT extension connects your spreadsheet to OpenAI's API (or other LLMs like Llama). Practical applications:

Natural language formulas: User types "calculate the average of column B where column A is 'Sales'" and gets a working formula
Data analysis: Ask questions about your data in plain English
Content generation: Fill cells with AI-generated text based on context
Formula explanations: Understand what a complex formula does

This runs queries against your chosen AI provider, so you'll need API credentials and should consider costs for high-volume usage.

Server-Side Operations

Jspreadsheet Server (Ultimate) isn't just for collaboration. It enables:

Headless spreadsheet operations: Run calculations server-side without a browser
Scheduled jobs: Generate reports on a timer
API access: Read/write spreadsheet data from your backend
Custom extensions: Build server-side logic that integrates with your systems

Useful for scenarios like nightly report generation, API-driven data updates, or keeping spreadsheets in sync with databases.

Licensing

Free Trial: Full functionality, no time limit for development. You only need a paid license when deploying to production.

Enterprise: Core extensions (Excel import/export, charts, validations, etc.) plus dedicated support.

Ultimate: Everything—including server, collaboration, AI integration, pivot tables, and premium support.

Pricing is per-developer with deployment licensing. Check jspreadsheet.com/pricing for current rates.

Real-World Use Cases

Where Jspreadsheet fits:

Financial applications: Budget planning, forecasting models, expense tracking. Users can build their own formulas without developer involvement.

Operations tools: Inventory management, production scheduling, resource allocation. Import data from other systems, manipulate it, export results.

Education platforms: Grade management, student data tracking. Teachers already know Excel—give them that interface.

Data entry systems: When users need to input hundreds of records quickly. Paste from Excel, validate on the fly, submit to your backend.

Internal tools: Replacing shared Excel files that get emailed around. Same interface, but with proper access control, version history, and collaboration.

Embedded analytics: Let users build their own reports. They define the calculations, your app provides the data.

What Sets It Apart

Compared to alternatives:

Lightweight: Smaller bundle than most competitors. Loads faster, runs smoother.

Framework-agnostic: Native wrappers for React, Vue, Angular—but also works with vanilla JS or any other framework.

TypeScript support: Full type definitions. Your IDE knows what's available.

Mobile-friendly: Touch gestures, responsive layout, context menus that work on tablets.

Active development: Regular releases with new features and fixes. Check the changelog—v12 has been actively updated.

Reasonable learning curve: If you've worked with any JavaScript component library, you'll pick this up quickly. Documentation is solid with working examples.

Getting Help

Documentation: jspreadsheet.com/docs
GitHub Issues: github.com/jspreadsheet/pro
Support: Paid plans include dedicated support channels

The documentation includes interactive examples you can modify and run in the browser—useful for understanding how features work before implementing them.

Bottom Line

Jspreadsheet Pro solves a specific problem well: bringing Excel-like functionality to web applications without the months of development it would take to build from scratch.

If your users expect spreadsheet behavior—formulas, Excel import/export, familiar keyboard shortcuts—this handles it. If you just need a simple data table, it might be more than you need.

Try the free trial. Build a prototype. See if it fits your requirements before committing.

Documentation and demos: jspreadsheet.com

TinyNN: A Fast, Zero-Dependency Neural Network Library for Node.js

Paul H — Thu, 04 Dec 2025 07:14:46 +0000

TinyNN: A Fast, Zero-Dependency Neural Network Library for Node.js

A lightweight neural network library optimized for CPU performance. No dependencies, pure JavaScript. Trains MNIST to 91% accuracy in under a minute. Built for developers learning AI who want to understand the underlying mechanics without the overhead of heavy frameworks.

What It Is

TinyNN is a feedforward neural network implementation in ~500 lines of code. It uses typed arrays (Float64Array) and optimized loops for performance.

Key Features

Zero dependencies - No external packages required
CPU optimized - Typed arrays and cache-friendly loops
Small footprint - 8.4 KB compressed
Educational - Clean, commented code you can actually read

Quick Example

import tinynn from 'tinynn';
import { relu } from 'tinynn/utils';

// Create network: 784 inputs, two hidden layers, 10 outputs
const network = tinynn([784, 64, 64, 10], relu);

// Train on batch
for (const image of trainingBatch) {
    network.train(image.pixels, image.label);
}
network.updateWeights(0.005, batchSize);

MNIST Demo

The package includes a complete MNIST handwritten digit recognition demo with a proper train/test split (80/20).

npm install tinynn
npm run demo  # Train on 48,000 images
npm test      # Test on 12,000 images (held-out)

Performance: Trains at ~1,000 images/second with batch size 20. Full training (48,000 images) completes in under a minute on standard hardware, reaching 91%+ accuracy on test data.

Training shows:

Data loading and normalization
Mini-batch gradient descent
Real-time loss and accuracy tracking
Automatic weight saving

Testing displays:

Overall accuracy on held-out data
Per-digit accuracy breakdown
Confusion patterns (which digits get mistaken for others)
Best and worst performing digits

Example test output:

Overall Accuracy: 91.03%

Digit | Accuracy | Most Confused With
  1   |  96.9%   | 8 (15 times)
  0   |  95.7%   | 5 (16 times)
  3   |  84.1%   | 5 (72 times)

Technical Implementation

Optimizations applied:

Float64Array for numerical operations (faster than regular arrays)
Cached array references in hot loops
Pre-computed learning rate factors
Single-pass softmax computation

Architecture:

He weight initialization (optimized for ReLU)
Mini-batch gradient descent
Backpropagation with chain rule
Softmax + cross-entropy loss

Purpose

Education - Understand neural networks by reading clean, well-documented code. Perfect for students and developers learning AI fundamentals.

Small Applications - Deploy models where you don't need distributed training or GPU acceleration. Ideal for:

Single-server deployments
Serverless functions (AWS Lambda, Cloudflare Workers)
Simple classification tasks (digit recognition, basic text classification)
Applications where simplicity and zero dependencies matter more than scale

With 91% accuracy in under a minute of training, it's fast enough for real-world use cases that don't require massive datasets.

Installation

npm install tinynn

Requirements: Node.js >= 18.0.0

Repository

GitHub: github.com/paulhodel/tinynn
NPM: npm install tinynn
License: MIT

A lightweight, no-dependency JavaScript HTML to JSON library

Paul H — Mon, 24 Nov 2025 13:24:58 +0000

We needed a very fast way to convert HTML or XML to JSON. A tiny library, dependency-free, efficient, and flexible that can handle complex structures, we can quickly customize for applications, such as:

HTML editors
XML data processing
content sanitizers
template transformers
or anywhere you need to treat markup as structured data

For the sake of flexibility on our side, we ended up writing our own: a single-pass, string-based parser that walks the markup once and builds a JSON general tree that can be used across those different use cases. Considering the variety of errors and oddities you find in real-world HTML, we also included a JSON-to-HTML converter. That lets us write unit tests and validate the quality of each conversion by round-tripping HTML → JSON → HTML.

A simple JSON tree is easier to manipulate than raw HTML strings, which is where this library helps. It parses markup into a minimal structural representation, and the same module can render that structure back to HTML.

JavaScript HTML to JSON converter:

Zero dependencies
Bidirectional
Understands both HTML & XML, including namespaces.
Pretty output — optional pretty-printing with indentation.

The library is an MIT, and if you wish to try it out, you can find more information on our GitHub page below.

Install & get started

npm install @lemonadejs/html-to-json

Github Repository

https://github.com/lemonadejs/html-to-json

What are the limitations, and what is expected for the next version?

HTML entities like & need better handling;
Whitespace is preserved exactly, creating a lot of extra entries in the JSON;
Markup errors are not validated, so no detailed errors are available;

Other useful tools

You can find more tools from the same authors:

JavaScript Data Grid with Spreadsheet Controls
LemonadeJS

Building an Unbeatable Tic-Tac-Toe Game with Minimax and LemonadeJS

Paul H — Sat, 22 Nov 2025 19:11:29 +0000

This component was built as a small experiment in combining a complete game-tree search with a reactive user interface. Tic-tac-toe is simple enough that every possible board state can be explored, so the minimax algorithm fits naturally. The intention was to keep the logic straightforward and self-contained, while letting LemonadeJS handle UI updates without additional abstractions or complex lifecycle handling.

I have chosen to keep minimax free of shared mutable state and avoid mutating the board during evaluation. Many examples modify the board in place and then undo moves later, but this easily introduces subtle bugs, especially once each cell starts holding more properties. Since the tic-tac-toe board is only nine cells, cloning before each simulated move is cheap and keeps each branch isolated. A minimal helper for this looks like:

const cloneBoard = (board) => {
    return board.map(cell => ({ ...cell }));
};

Minimax evaluates terminal positions, alternates between maximizing and minimizing layers, and returns scores that reflect wins, losses, and draws. At the root depth, it also returns the best move, so the same function is used for both simulation and decision selection. Around this core, the component defines helpers for detecting winners, applying moves, handling ties, and checking for valid positions. LemonadeJS takes care of rendering changes automatically whenever properties like this.board, this.player, or this.text update, using a simple template that loops over the board and binds click events.

The final code keeps logic and rendering clearly separated. LemonadeJS provides the reactive surface, and minimax supplies consistent game behaviour. Together, they form a compact example of how a deterministic algorithm and a small reactive framework can work side by side without introducing unnecessary structure. The full implementation used in this setup is shown below.

If you are interested in playing with the code, the next logical step is to create a level dropdown so users can choose between Easy, Medium, or Hard, to make the game not too impossible to win.

Full implementation

Install Lemoandejs

npm install lemonadejs

Source code

import lemonade from 'lemonadejs';
import './style.css';

function Tictactoe() {
  let text = [
    'can start the game',
    'turn to play',
    'won the game',
    'no winners this time',
  ];

  const cloneBoard = (board) => {
    return board.map((cell) => ({ ...cell }));
  };

  const getValidMovesFromBoard = (board) => {
    let data = [];
    board.forEach((b, index) => {
      if (!b.player) {
        data.push(index);
      }
    });
    return data;
  };

  const minimax = (board, depth, isMaximizing, currentPlayer) => {
    // Terminal state?
    if (hasWinner(board)) {
      const score = isMaximizing ? -10 + depth : 10 - depth;
      return depth === 0 ? { score, move: -1 } : score;
    }

    const validMoves = getValidMovesFromBoard(board);
    if (!validMoves.length) {
      return depth === 0 ? { score: 0, move: -1 } : 0; // Draw
    }

    const opponent = currentPlayer === 'o' ? 'x' : 'o';
    let bestScore = isMaximizing ? -Infinity : Infinity;
    let bestMove = -1;

    for (const move of validMoves) {
      // Clone board and apply move
      const newBoard = cloneBoard(board);
      newBoard[move].player = currentPlayer;
      // Recursion
      const score = minimax(newBoard, depth + 1, !isMaximizing, opponent);
      // Compare
      if (isMaximizing) {
        if (score > bestScore) {
          bestScore = score;
          bestMove = move;
        }
      } else {
        if (score < bestScore) {
          bestScore = score;
          bestMove = move;
        }
      }
    }

    return depth === 0 ? { score: bestScore, move: bestMove } : bestScore;
  };

  // Check the board to see if there is a winner
  const hasWinner = (board) => {
    return [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8], // Rows
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8], // Columns
      [0, 4, 8],
      [2, 4, 6], // Diagonals
    ].some(
      ([a, b, c]) =>
        board[a].player &&
        board[a].player === board[b].player &&
        board[b].player === board[c].player
    );
  };

  const play = (index) => {
    // Selected the board
    this.board[index].player = this.player;
    // Update instructions
    this.text = text[1];
    // Is there a winner?
    if (hasWinner(this.board)) {
      // Switch the text element to refers the winner.
      this.text = text[2];
      // There is a winner
      this.winner = true;
      // We have a winner
      alert(this.title.textContent);
    } else {
      // Switch player's turn.
      this.player = this.player === 'o' ? 'x' : 'o';
    }
  };

  const tie = () => {
    // Tie
    this.text = text[3];
    // No player
    this.player = '';
    // It is a tie
    alert(this.title.textContent);
  };

  /**
   * Click event handler
   * @param {MouseEvent} e
   */
  const click = (e) => {
    // Valid item to be clicked - only SPAN
    if (e.target.tagName === 'SPAN') {
      if (this.winner) {
        alert(this.title.textContent);
      } else {
        // No one picked the position yet
        if (!e.target.textContent) {
          // Get the position of the element clicked
          let index = Array.prototype.indexOf.call(
            e.target.parentNode.children,
            e.target
          );
          // User Play
          play(index);

          // Computer turn
          if (!hasWinner(this.board)) {
            setTimeout(() => {
              let result = minimax(this.board, 0, true, this.player);
              if (result.move !== -1) {
                play(result.move);
              } else {
                tie();
              }
            }, 200);
          }
        }
      }
    }
  };

  /**
   * Reset the game variables
   */
  const reset = () => {
    // Player 0 (o) and Player 1 (x)
    this.player = 'o';
    // Update the instruction to the user
    this.text = text[0];
    // Property to define if already reached a winner.
    this.winner = false;
    // Reset the board with the 9 positions
    this.board = [{}, {}, {}, {}, {}, {}, {}, {}, {}];
  };

  // Start the game
  reset();

  // Game template
  return (render) => render`<div class="tictactoe">
      <h4 :ref="this.title">${this.player} ${this.text}</h4>
      <div lm-loop="${this.board}" class="board" onclick=${click}>
          <span>{{this.player}}</span>
      </div><br/>
      <input type="button" onclick=${reset} value="Reset the game" />
  </div>`;
}

lemonade.render(Tictactoe, document.querySelector('#app'));

Play Now

https://stackblitz.com/edit/vitejs-vite-akskxpkr

Resources

More tools and information:

https://lemonadejs.com/
https://jspreadsheet.com/