nanojsx/nano

SSR first, lightweight 1kB JSX library.

Written in TypeScript.
Works on Node and Deno.
Designed to build ultra fast MPAs and SPAs.

News

nano-jsx is now at v0.2.x 🎉
This means, no breaking changes till v0.3.x
Tweet about it!

Changes in v0.2.0

• Breaking Change: Fix Shadow DOM DIV wrapping. #146 (@hbroer)
• Breaking Change: Improve Router Listener. #115
• Added Bun.js support. #151 (@lanten)
• Added renderComponentGetReference function. cbe51e3

Getting Started

• Visit the website
• Download the template
• Check out the sandbox
• Try the deno example

Video Tutorial

Features

The best about Nano JSX is the small bundle size. It builds, although is sound crazy, bundles as small as svelte!

More Features

• SSR
  Out of the box, very simple to use

• Pre-Rendering
  Renders your app to static html if you want.
  (This is possible, but requires some knowledge.
  I plan to make a tutorial soon.)

• Partial Hydration
  Hydrate and only the parts you really need

• Isomorphic Router
  Works on Client- and Server-Side

• CSS in JS
  Use JavaScript objects for styling

• No JSX build tools required
  Uses Tagged Templates instead of JSX if you prefer

• Props, Ref, Context and Events
  Use Props, Ref, Context API and Events as you are used to in react

• Inline SVG
  No problem

• Prefetch
  Use the built-in Link Component

• 1KB (gzip)
  All of this in only ~1KB
  (Well, the core module is only about ~1KB)

• CustomElements mode
  You can define your component written with Nano JSX as web-components with defineAsCustomElements. This enables you to develop very light web components. (thanks @Shinyaigeek)

Documentation

Checkout the website to find out more!

Development Section

Run browser tests (visually)

# install dependencies
npm install

# build
npm run build

# bundle
npm run bundle

# create instrumented bundle
npx webpack -c webpack/webpack.bundle.instrumented.js

# transpile browserTest library
npx tsc -p scripts/browserTest/tsconfig.json

# open browser to run the tests
npx five-server . --open=test/browser