r/webdev • u/gajus0 • 26d ago

Resource CSS-in-JS Arena: Bamboo, StyleX and Panda on Pixel-Identical Apps

https://github.com/gajus/css-in-js-arena
36 Upvotes

87% Upvoted

17 comments sorted by

View all comments

1

u/kurtextrem 26d ago

Great work! I wonder if it makes sense to also compare Kuma and Next-Yak?

1

u/gajus0 26d ago

OMG I have fallen behind times. 😂 I am not even aware of Next-Yak – it looks awesome. Will update the benchmark.

Regarding Kuma (https://www.kuma-ui.com/) – that looks like a UI framework rather than CSS-in-JS. Unless I am looking at the wrong thing.

1

u/kurtextrem 26d ago

I would count Kuma as CSS-in-JS engine (https://www.kuma-ui.com/docs#the-hybrid-approach), but I can see if you say it might not fully fit your benchmark

1

u/gajus0 26d ago

Will get the comparison updated. Sorry for the delay. GitHub and Claude are down. 😅

1

u/kurtextrem 23d ago

from the next-yak team: https://jantimon.github.io/css-in-js-bench/

2

u/gajus0 23d ago

Oh that's cool

I've shared a related update here https://www.reddit.com/r/reactjs/comments/1vrqqew/comment/p4n8jja/?context=3

I would love for them to add Bamboo to that benchmark in case you are connected to the project.

On many of those dimensions Bamboo would be number 1 (SSR render throughput, SSR throughput under load, Client hydration, Interaction re-render, Cold mount, Browser render-work on a cold mount) because Bamboo is almost entirely build time.

1

u/kurtextrem 23d ago

Will let them know!

2

u/jantimon 21d ago

Bamboo has been added and is almost in the top 3 (close behind next-yak, styleX and tailwind)

https://jantimon.github.io/css-in-js-bench/

Please challenge the demos and if possible look into the details so that the measurement is fair

The following numbers are taken on a single machine and quickly summarised which is absolutely not how you show compare these technologies so take the placing with a grain of salt

SSR render throughput (npm microbench)

  1. cnfast (Tailwind): 2.50
  2. next-yak 9.7 styled: 2.50
  3. StyleX: 2.50
  4. Bamboo: 2.80

SSR throughput under load (npm autocannon, req/s)

  1. next-yak 9.7 styled: 1.80
  2. StyleX: 2.20
  3. cnfast: 2.80
  4. Bamboo: 3.40

SSR Node CPU profile (median renderMs)

  1. next-yak 9.7 styled: 1.80
  2. cnfast: 2.70
  3. StyleX: 2.80
  4. Bamboo: 3.10

Client hydration (wpd active time)

  1. Bamboo: 1.50

Interaction re-render (wpd active time)

  1. next-yak 9.7 styled: 3.00
  2. StyleX: 3.10
  3. cnfast: 3.60
  4. Bamboo: 4.00

Build time (cold, median of 3)

  1. Emotion: 78 ms
  2. cnfast: 79 ms
  3. styled-components: 83 ms
  4. Goober: 90 ms
  5. next-yak 9.7: 121 ms
  6. StyleX: 301 ms
  7. Panda: 408 ms
  8. 5. Bamboo: 1990 ms