JSDA-Kit turns JavaScript modules into dynamic pages, APIs and assets. Fast.
Build static pages, server-rendered routes, API-like responses, CSS, SVG, feeds, sitemaps, and other web assets from plain JavaScript ESM modules. JSDA-Kit gives you a direct path from source files to deployable output without a complex meta-framework, template DSL, or heavyweight runtime.
- One mental model for the whole web surface — pages, styles, SVG, API responses, feeds, and generated files are just ESM modules with imports, functions, loops, data, and tests.
- Dynamic output without framework gravity — use full JavaScript at build time, request time, or both; choose SSG, SSR, dynamic server routes, or plain static assets per project.
- Fast installs, fast builds, fast CI — a small dependency graph and esbuild-powered pipeline keep local development and deployment pipelines lightweight.
- Platform-native UI — SSR and hydrate W3C Custom Elements with Symbiote.js instead of coupling every component to a framework-specific runtime.
- Deploy anywhere — ship a static
dist/folder, run the JSDA server, or mix both; no vendor platform is required.
JSDA (JavaScript Distributed Assets) treats JavaScript ESM modules as text-based web asset generation endpoints — providing PHP-like templating with modern JavaScript and ESM modules.
Learn more: https://github.com/rnd-pro/jsda
- JS modules as web assets —
.html.js,.css.js,.svg.jsfiles export strings that become production assets; use full JavaScript (loops, conditionals, imports) instead of limited template engines - Convention-based file mapping —
src/static/index.html.js → dist/index.html; no routing config or manifest files needed for static output - Function exports — default exports can be functions for dynamic generation (sitemaps, feeds, config-driven pages)
- Symbiote.js SSR engine — custom elements rendered on the server with Declarative Shadow DOM support
- Three-tier SSR imports — global imports in
project.cfg.js, per-endpointssrImportsexports in individual.html.jsfiles, and programmaticwcSsr()API for full control - Isomorphic components — set
isoMode = trueon a Symbiote.js component and it auto-detects its environment; same code runs SSR on server, hydrates on client, or renders client-only - Barrel file resolution — SSR import loader automatically resolves
export *, re-exports, and side-effect imports from barrel files
- Trusted Types & CSP support — pass a nonce to SSR and all inline
<style>tags get thenonceattribute automatically, enabling strict Content Security Policy
- Static Site Generation — JAMStack-ready SSG; source folder structure maps directly to output (
src/static/about/index.html.js → dist/about/index.html), deploy thedist/folder to any static hosting as-is - esbuild-powered — JS/CSS bundling with tree-shaking, ESM output; works both at build time and on-the-fly during
serve - Tagged template minification —
htmlandcsstagged template literals minified automatically inside bundles; untagged templates left untouched - Asset minification — HTML (via
@minify-html/node), CSS, and SVG minified by default with per-file excludes - Automatic sitemap — generates
sitemap.xmlfrom built HTML pages with configurable base URL, exclusions,lastmod, change frequency, and priority - SSG watcher —
jsda ssgrebuilds on file changes during development
- Route-based SSR pipeline —
Request → Route Lookup → Data Injection → SSR → Minification → Response; define routes as a simple JS object mapping paths to.html.jsmodules - Custom data and route hooks —
getDataFn(route, url, headers)injects data into templates,getRouteFn(url, headers)enables dynamic route resolution (i18n, A/B testing) - In-memory response caching — enabled by default with URL-level granularity and per-path excludes
- Zero-config start — works out of the box; all settings have sensible defaults
- Deep-mergeable config —
project.cfg.jsis deep-merged with defaults; override only what you need;booleanshorthand for feature toggles (SSR, sitemap) - Project scaffolding —
jsda scaffoldfetches a complete runnable template (Live Demo) with folder structure, config, sample components (server-only, client-only, isomorphic), routes, static SSG page, CSS design tokens, and dev tooling config - Automatic import maps — generates
<script type="importmap">frompackage.jsonversions with configurable CDN schema,<link rel="modulepreload">, and optional polyfills - CLI —
serve,build,ssg,scaffoldwith--port,--output,--help,--version
- Markdown to HTML —
md2html()with syntax highlighting (highlight.js) and automatic heading IDs; works in both Node.js and browser - Template data injection —
applyData()replaces{[key]}tokens in any string; customizable delimiters - Cross-environment hashing —
getHash()produces SHA-1 hex using Web Crypto (browser) or Node.js crypto - IndexedDB wrapper —
IDBclass with key-value CRUD, cross-tab sync viastorageevents, and subscription API
If you've grown tired of fighting meta-platform opaque complexity, JSDA-Kit offers a radically different path — with the flexibility to handle projects of any scale.
| JSDA-Kit | Next.js | |
|---|---|---|
| Philosophy | You control everything — ESM modules are your assets, Web Components are your UI | The framework controls everything — conventions, rendering strategy, deployment target |
| Component model | W3C Custom Elements — platform-native, zero runtime lock-in, interoperable with anything | React-only — JSX compilation required, components don't work outside React |
| SSR granularity | Per-component isoMode — mix SSR, client-only, and isomorphic on the same page with zero config |
Per-page/layout rendering strategy — 'use client' / 'use server' boundary management |
| Build speed | esbuild — fast by default, no config, no plugins to debug | Turbopack/webpack — fast when it works, complex when it doesn't |
| Dependencies | 7 production deps, ~50 MB node_modules |
700+ transitive deps, 300+ MB node_modules, long install times |
| CI speed | Seconds to install, seconds to build — minimal deps mean fast pipelines | Minutes for npm install alone; large dependency trees slow down every CI run |
| Runtime weight | 0 KB for static pages; Symbiote.js ~7 KB gzipped for interactive | React ~44 KB gzipped + framework chunks on every page |
| Configuration | Single project.cfg.js, deep-mergeable — override only what you need |
next.config.js + App Router conventions + caching rules + middleware config |
| Debugging | ~2,500 LOC total — readable source, no black boxes | ~300,000+ LOC framework internals — good luck tracing a build issue |
| Vendor lock-in | None — standard ESM, plain file output, deploy anywhere | Vercel-optimized — self-hosting has documented rough edges |
| Flexibility | Full access to Node.js, custom route/data hooks, any hosting, any structure | Opinionated conventions — step outside them and you fight the framework |
Image optimization and management — Cloud Images Toolkit handles the media side: CDN synchronization, adaptive image embed code generation, smart local caching, built-in management UI, and interactive widget generation (galleries, panoramas, 360° views). Framework-independent — works with JSDA-Kit (as part of the ecosystem) or any other project. Unlike Next.js, which locks image optimization into the Vercel edge network, CIT lets you choose almost any image CDN — with Cloudflare Images, Cloudinary, ImageKit, and Bunny.net supported out of the box.
Important
JSDA-Kit handles projects of any complexity — from a single landing page to a full-scale web application. The difference is: you stay in control.
Tip
Free hosting friendly — the light CI pipeline fits comfortably within the free tiers of GitHub Pages or Cloudflare Pages — no paid plan required for most projects.
npm install jsda-kit
# Scaffold a new project
npx jsda scaffold
# Start dev server
npx jsda serve
# Start SSG watcher (dev mode)
npx jsda ssg
# Build for production
npx jsda build// src/static/index.html.js → dist/index.html
export default /*html*/ `
<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello, JSDA!</h1>
<app-greeting></app-greeting>
<script type="module" src="/app/index.js"></script>
</body>
</html>
`;import Symbiote, { html, css } from '@symbiotejs/symbiote';
class AppGreeting extends Symbiote {
isoMode = true;
greeting = 'Hello, World!';
}
AppGreeting.template = html`
<h2 ${{textContent: 'greeting'}}></h2>
`;
AppGreeting.rootStyles = css`
app-greeting {
display: block;
padding: 1em;
}
`;
AppGreeting.reg('app-greeting');Same code runs everywhere — SSR on the server, hydration on the client, or pure client rendering. Set isoMode = true and the component auto-detects. Server-only and client-only components are also possible — isoMode is opt-in per component.
jsda <command> [options]
Commands:
serve Start the development server
build Build static assets for production
ssg Start SSG watcher (dev mode)
scaffold Scaffold a new JSDA project
Options:
--help Show help message
--version Show version number
--port=<number> Port for dev server (default: 3000)
--output=<dir> Output directory for build (default: ./dist)
Detailed docs in the docs/ folder:
- Getting Started
- JSDA Concept
- Configuration
- SSR
- SSG
- Server
- Import Maps
- CLI
- Scaffolding
- Browser Utilities
- API Reference
MIT © RND-PRO.com
- JSDA Manifest — JSDA concept and conventions
- JSDA Project Template — official starter template repository
- Symbiote.js — Isomorphic Reactive Web Components framework
- Cloud Images Toolkit — CDN image sync, adaptive embed code generation, media library management UI, and interactive widget generation
Made with ❤️ by the RND-PRO team