https://github.com/nanojsx/nano

🎯 SSR first, lightweight 1kB JSX library.
https://github.com/nanojsx/nano

deno isomorphic jsx nano node ssr

Last synced: 2 days ago
JSON representation

🎯 SSR first, lightweight 1kB JSX library.

• Host: GitHub
• URL: https://github.com/nanojsx/nano
• Owner: nanojsx
• License: mit
• Created: 2020-06-22T18:10:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-10T21:20:03.000Z (10 months ago)
• Last Synced: 2024-10-29T15:20:46.521Z (about 2 months ago)
• Topics: deno, isomorphic, jsx, nano, node, ssr
• Language: TypeScript
• Homepage: http://nanojsx.io
• Size: 1.64 MB
• Stars: 1,459
• Watchers: 10
• Forks: 38
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - nano

README

        


  

  

  

    

    

    

  

  





  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.1.x 🎉  

This means, no breaking changes till v0.2.x  

[Tweet about it!](http://twitter.com/share?text=nano-jsx%20has%20reached%20v0.1!&url=https://nanojsx.io/)

## Getting Started

- Visit the [website](http://nanojsx.io/)

- Download the [template](https://github.com/nanojsx/template)

- Check out the [sandbox](https://codepen.io/yandeu/pen/MWKMmbq)

- Try the [deno example](https://github.com/nanojsx/nano-jsx-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](http://nanojsx.io/) to find out more!

---

## Development Section

### Run browser tests (visually)

```bash

# 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

```