https://ostovjs.org/

Tell me what you think!

Varlock has a pretty neat spec building around .env files: https://github.com/dmno-dev/varlock/discussions/17, but Varlock itself is still in its infancy regarding non-JS projects. We wrote envgen as a workaround, and it works for our use case.

Check it out as well as Varlock.

Hey r/reactjs,

I've been frustrated with PDF generation in React for a while. The options are basically:

- Write raw `@react-pdf/renderer` JSX (verbose, no design system)

- Pay for SaaS tools that lock you in

- Pray someone made a template that kinda fits

So I built **PDFx** — a copy-paste PDF component library inspired by shadcn/ui.

The idea: instead of installing a package, you run `pdfx add heading` and the component lives in your codebase. You own it, modify it, theme it.

---

## What's working right now (alpha)

**CLI commands:** `pdfx init`, `pdfx add`, `pdfx list`, `pdfx diff`, `pdfx theme switch`

**20 components:** heading, text, table, data-table, badge, card, form, graph, signature, page-header, page-footer and more

**Theme system** with Professional, Modern, Minimal presets

**7 templates:** 3 invoice styles + 4 report types

---

## Quick start

```bash

npx @akii09/pdfx-cli@alpha init

pdfx add heading text table

```

- GitHub: [github.com/akii09/pdfx](https://github.com/akii09/pdfx)

## What I'm genuinely trying to figure out

1. Is the copy-paste model the right approach for PDFs, or would you rather a proper npm package?

2. What templates would actually be useful? (Invoice? Resume? Report? Something else?)

3. Is the CLI friction too high for a first experience?

Roast me if needed. Alpha = rough edges exist and I'd rather know about them.

Hey there o/
I've been building an ecosystem of zero-friction, local-first productivity tools called "That Just Works". For the UI, I needed something incredibly fast and lightweight. I love the ergonomics of Vue/React, but I didn't want a 40kb+ payload.
So, I built Sigwork.
It's a 1.7kb (gzipped) fine-grained reactive engine based on signals. Instead of VDOM diffing, components run exactly once. When a signal changes, it surgically updates only the affected text node or DOM attribute via microtask batching.

A few highlights:
JSX or Buildless: You can use it with Vite/JSX, or directly in the browser via CDN, maybe paired with htm for a JSX-like experience.
Built-in components: <Component> and <Transition>
Features: Props, events, slot, provide/inject, life-cycle hooks. Basically everything I usually use on Vue.

I've just released v0.1.0 and would love to hear your thoughts on it.

Docs & Demos: https://framework.thatjust.works
Repo: https://github.com/thatjustworks/sigwork

Hi everyone,

I built a WebGL web app to explore the Mandelbrot Set, focusing on rendering deep zooms directly in the browser. Here is a breakdown of how it works under the hood:

• Deep zoom (10^14): You can zoom in up to a hundred trillion times using WebGL double precision emulation. I used a logarithmic color palette so the colors stay vibrant and detailed at extreme depths.
• Progressive rendering: To maintain a smooth fps while panning, it shows an instant low-res preview while moving, and then refines it into high-res up to 8x subpixel sampling.
• Quad-tree tile caching: It's designed to be efficient by never calculating the same pixels twice. It caches rendered tiles and actively garbage-collects off-screen tiles.
• Dynamic iteration scaling: To ensure the set doesn't turn into a solid black blob as you dive deeper, the app automatically scales up the maximum iteration count to keep the fractal edges sharp and complex.
• Shareable coordinates: Everything runs client-side via JS/WebGL. You can easily copy the URL to share the exact X/Y coordinates and zoom level of your favorite finds.
• Open source: All the code is public and available for free on GitHub if you want to see how the rendering pipeline works.

I'd love for you to try it out and share your feedback, or even some links to the most interesting coordinates you can find!

App: https://mandelbrot.musat.ai/
Code: https://github.com/tiberiu02/mandelbrot-js

Hey r/javascript,

Been building Node.js APIs for 12+ years and I kept solving the same problem on every project structured logging, slow request detection, DB call tracking, distributed tracing.

OpenTelemetry is great but overkill for most projects. So I built auto-api-observe.

One line of setup

npm install auto-api-observe

const express = require('express');
const observability = require('auto-api-observe');

const app = express();
app.use(observability()); // ← that's it

Every request automatically logs:

{
  "method": "GET",
  "route": "/users",
  "status": 200,
  "latencyMs": "42ms",
  "dbCalls": 3,
  "slow": false,
  "traceId": "a1b2c3d4-..."
}

What makes it different

DB call tracking via AsyncLocalStorage call trackDbCall() anywhere in your async chain (service layer, repository, wherever). No context passing needed. It automatically attaches the count to the right request.

const { trackDbCall } = require('auto-api-observe');

async function getUser(id) {
  trackDbCall(); // works from anywhere
  return db.query('SELECT * FROM users WHERE id = ?', [id]);
}

See "latencyMs": "340ms" with "dbCalls": 7 together in one log entry immediately know your N+1 problem without a profiler.

Full feature list

^{✅ Structured JSON logs on every request}

^{✅ Distributed trace IDs (propagates x-trace-id across microservices})

^{✅ Slow request detection with configurable threshold}

^{✅ In-memory metrics via getMetrics(} per-route avg/min/max latency, error rates, status codes)

^{✅ Custom fields via addField(key, value})

^{✅ Custom logger pipe to Winston, Pino, Datadog, Loki, etc.}

^{✅ skipRoutes exclude /health, /metrics from logs}

^{✅ onRequest / onResponse hooks}

^{✅ Zero runtime dependencies pure Node.js}

^{✅ Full TypeScript types included}

^{✅ Works with both Express and Fastify}

Links

• 📦 npm: npmjs.com/package/auto-api-observe
• ⭐ GitHub: github.com/rahhuul/auto-api-observe

Happy to answer questions or take feedback still early days and actively improving it.

Click on the link and press ? to see in action

I’m currently working on a new idea: a series of interviews with people from the open source community.

To make it as interesting as possible, I’d really love your help

Which open-source projects do you use the most, contribute to, or appreciate?

In general you create keyframes, then the engine searches for elements with the same id and difference in the style. For numerical css properties with the same format( e.g. 1px to 10px ), the engine makes 30fps transition.

I kept hitting the same problem: users need to define rules, filters, or template logic, but giving them unconstrained code execution isn't an option. Existing expression evaluators like Jexl paved the way here, but I wanted something with modern syntax and better performance for hot paths.

So I built bonsai-js - a sandboxed expression evaluator that's actually fast.

import { bonsai } from 'bonsai-js'
import { strings, arrays, math } from 'bonsai-js/stdlib'

const expr = bonsai().use(strings).use(arrays).use(math)

// Business rules
expr.evaluateSync('user.age >= 18 && user.plan == "pro"', {
  user: { age: 25, plan: "pro" },
}) // true

// Pipe operator + transforms
expr.evaluateSync('name |> trim |> upper', {
  name: '  dan  ',
}) // 'DAN'

// Chained data transforms
expr.evaluateSync('users |> filter(.age >= 18) |> map(.name)', {
  users: [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 15 },
  ],
}) // ['Alice']

// Or JS-style method chaining — no stdlib needed
expr.evaluateSync('users.filter(.age >= 18).map(.name)', {
  users: [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 15 },
  ],
}) // ['Alice']

Modern syntax:

Optional chaining (user?.profile?.name), nullish coalescing (value ?? "default"), template literals, spread, and lambdas in array methods (.filter(.age >= 18)) + many more.

Fast:

30M ops/sec on cached expressions. Pratt parser, compiler with constant folding and dead branch elimination, and LRU caching. I wrote up an interesting performance optimisation finding if you're into that kind of thing.

Secure by default:

• __proto__, constructor, prototype blocked at every access level
• Max depth, max array length, cooperative timeouts
• Property allowlists/denylists
• Object literals created with null prototypes
• Typed errors with source locations and "did you mean?" suggestions

What it's for:

• Formula fields and computed columns
• Admin-defined business rules
• User-facing filter/condition builders
• Template logic without a template engine
• Product configuration expressions

Zero dependencies. TypeScript. Node 20+ and Bun. Sync and async paths. Pluggable transforms and functions.

Early (v0.1.2) but the API is stable and well-tested. Would love feedback - especially from anyone who's dealt with the "users need expressions but eval is scary" problem before.

npm install bonsai-js

GitHub Link: https://github.com/danfry1/bonsai-js
npm Link: https://www.npmjs.com/package/bonsai-js
npmx Link: https://npmx.dev/package/bonsai-js

Type-safe forms with [email protected]

- Add fields to a route
- Validate input according to the schema
- Render accessible HTML for the entire form or by field
- Works for form data or search params
- Stream file uploads after parsing the rest of the form data without any client JS

import { create } from "./create";
import { Field, Route } from "ovr";


const action = Route.post(
    {
        name: Field.text(), // <input type=text>
        notes: Field.textarea(), // <textarea>
        quantity: Field.number(), // <input type=number>
    },
    async (c) => {
        const result = await c.data(); // parse form data


        if (result.issues) {
            return c.redirect(result.url, 303); // redirect to submitted page
        }


        const order = await create(
            result.data, // { name: string; notes: string; quantity: number; }
        );


        return c.redirect(`/orders/${order.id}`, 303);
    },
);


const page = Route.get("/order", () => {
    return <action.Form />; // <form>(fields)</form>
});

I started building JCGE about 5 years ago as a lightweight 2D game engine using nothing but vanilla JavaScript and HTML5 Canvas — no frameworks, no bundlers, no dependencies. Just a single <script> tag and you're running. I updated it significantly around 3 years ago, adding features like tweens, particle systems, isometric maps with A* pathfinding, collision helpers, a camera system with shake and zoom, and more. But life got the better of me and I never found the time to fully complete it.

Recently I picked it back up, modernized the codebase, and added a visual editor built with Vite, React, and Electron. The editor lets you visually compose scenes, manage layers, place game objects, configure cameras, paint isometric tilemaps, and export playable games — all without writing boilerplate.

One thing I want to highlight: the engine is intentionally not rigid. If you look at the demo examples, some of them use the engine's built-in systems (scenes, game objects, sprites, particles, tweens), while others drop down to raw canvas ctx calls — drawing shapes, gradients, and custom visuals directly alongside engine features. The cutscene demo, for instance, renders procedural skies, animated stars, and mountain silhouettes using plain ctx.beginPath() / ctx.fillRect() calls, while still leveraging the engine's scene lifecycle, easing functions, and game loop. The tower defense and shooter demos do the same — mixing engine abstractions with raw canvas where it makes sense. That's by design. The engine gives you structure when you want it, but never locks you out of the canvas.

It's not a finished product and probably never will be "done," but it's fully functional, tested (273 unit tests across engine and editor), and hopefully useful to anyone who wants a simple, hackable 2D engine without the overhead of a full framework.

Docs & demos: https://slient-commit.github.io/js-canvas-game-engine/

Just shipped docmd 0.6.2.

It’s built for developers who are tired of the framework-bloat in documentation. While most modern doc generators ship with hundreds of kilobytes of JavaScript and complex build pipelines, docmd delivers a sub-20kb base payload and a high-fidelity SPA experience using pure, static HTML.

Why you should spend 60 seconds trying docmd:

• Zero-Config Maturity: No specialized folder structures or YAML schemas. Run docmd build on your Markdown, and it just works.
• Native SPA Performance: It feels like a React/Vue app with instant, zero-reload navigation, but it’s powered by a custom micro-router and optimized for the fastest possible First Contentful Paint.
• Infrastructure Ready: Built-in support for Search (Offline), Mermaid, SEO, PWA, Analytics and Sitemaps. No plugins to install, no configuration to fight.
• The AI Edge: Beyond being fast for humans, docmd is technically "AI-Ready." It uses Semantic Containers to cluster logic and exports a unified llms.txt stream, making your documentation instantly compatible with modern dev-agents and RAG systems.
• Try the Live Editor.

We’ve optimized every byte and every I/O operation to make this the fastest documentation pipeline in the Node.js ecosystem.

If you’re already using docmd, update and give it a spin.
If you’ve been watching from the side, now’s a good time to try it. I'm sure you'll love it.

npm install -g @docmd/core

Documentation (Demo): docs.docmd.io
GitHub: github.com/docmd-io/docmd

Share your feedbacks, questions and show it some love guys!
I'll be here answering your questions.