Lightweight 1kB JSX library

TypeScript • Ultra Lightweight • SSR First

No Virtual Dom

Just pure and fast JavaScript rendering.

SSR First Approach

Designed to be pre-rendered on the server.

Partial Hydration

Hydrates only the parts you really need.

Ultra Lightweight

Generates bundles as small as svelte.

Node & Deno

Server-side rendering on node and deno.

Clean Code

Nano JSX does not depend on any external libraries.

JSX

JavaScript

Tagged Templates

loading...
Counter: 0

What

Nano JSX is designed to build ultra fast MPAs using JSX. It uses a different approach than other JSX libraries like React, Preact or Inferno. Instead of shipping all scripts and hydrate the whole app on the client, Nano JSX sends and hydrates only the parts that are really needed for the current page/view. Where else, the other libraries often send the scripts for multiple views, on which the user maybe never navigates to.

Because Nano JSX is designed to build MPAs it does not need a router or state management across multiple views, which reduces bundle size.

Isn't it faster to navigate using a SPA? Well, imagine a SPA blog. The navigation is not instantly. The client first has to fetch the content (maybe in a JSON file), before navigating to the next page even though all the script are already loaded. Nano JSX simply fetches (or even pre-fetches) the next page's html markup with all the content in it.

Why

In the past, I did a lot of websites/apps using Isomorphic React (Pre-Rendering on the Server and Hydrating on the client). Once the website did load all scripts, it was very fast (not so much on mobile though). But the scripts where always way too big.

Nowadays, I prefer to Pre-Render the JSX on the server and only Hydrate the parts that are really needed. With Nano JSX, the client now only gets few kilobytes and uses much less CPU.

Server Side Rendering

Node

Deno

loading...

Partial Hydration

The library by it self is already small and fast, but in combination with its awesome capabilities, it becomes even faster.

It's designed to be pre-rendered on the server and to then be partially hydrated on the client. The client will therefore have to download and render much less code.

loading...

Lazy Hydration

Not every component needs to be hydrated immediately. Lazy Hydration reduces First Input Delay (FID).

loading...

Svelte vs Nano JSX

Although, the simple example below is 0.2kB bigger using nano JSX, once adding more features to your App like Event Handling, Component Lifecycle, Store or SVG support, the nano JSX application will generate a slightly smaller bundle size compared to Svelte.

The same app with preact is 4.7kB, 8.6kB with inferno and 41.7kB with react.

loading...
loading...

Built-In Component

Nano JSX provides some useful Built-In Component, like Link, Img, Visible and Helmet and hopefully many many more in the future. All Built-In Components are as lightweight as possible and especially designed for Nano JSX.

Visit Components to learn more.

Sandbox

Modify here or on codepen.io.

Project Template

loading...