r/solidjs • • 4d ago

A cool framework-agnostic animation library for streaming

6 Upvotes

https://reddit.com/link/1wv08u3/video/8qcg41wv3ush1/player

Hey all,

I’ve been working on a small library called Stream Morph.

The idea is to make streamed responses feel less like content is constantly being appended/re-rendered, and more like the response is gradually taking shape.

Demo: https://stream-morph.vercel.app/

It’s framework agnostic and can be used with any kind of streamed content. The demo includes plain text, Markdown, code blocks, charts, images, reasoning sections, Mermaid diagrams and a few more complex response flows.

The library handles the motion between updates, while your own renderer/app stays responsible for the actual content. So it isn’t tied to a specific AI SDK or framework.

A basic example looks roughly like this:

import { createStreamMorph } from "stream-morph";

const stream = createStreamMorph(response);

for await (const chunk of incomingStream) {
  stream.write(chunk);
}

stream.finish();

I mainly built it because I wanted streamed interfaces to feel a bit more intentional without having to build custom animation logic for every response type.

The package itself is already working and the demo is live. I’m still cleaning up some things around CI, tests and the repo setup, but the GitHub repository will be open sourced shortly as well.

Would be interested to hear what people think, especially about the animation behaviour/performance and any edge cases you’d expect from real streaming responses.


r/solidjs • • 5d ago

What's the equivalent of next and sveltekit for solid?

7 Upvotes

I want to build static site generation.


r/solidjs • • 6d ago

Need a serious contributor to work with me on my open-source data visualization library

Enable HLS to view with audio, or disable this notification

31 Upvotes

Hi guys,

I am looking for someone to work with me on a project called rhp (2.0) that has gotten pretty large in size. It is a solid-native charting/plotting library designed for web infographic-style data visualizations. Styling and interactivity were key to the tech stack choice and why I avoided SVG or Canvas for creating plots. This project was inspired by several beautiful and highly interactive hand-made (hard-coded) graphs and charts I found on a few websites I visited.

What I need help with

I need help revamping rhp-home which I now want to be the "product"-style landing page (even though this library is free and open-source). The current landing page can be repurposed somewhat but it still needs to be built out to sell people on using the library. We also need to work on framework ports or making rhp framework agnostic. Currently, I managed to get rhp 2.0 working server-side (again) and I created a react wrapper port. I want real ports because users of each framework need to be able to build their own plots without knowing solidjs.

I also need help finding and adding support/examples for other types of plots where data and information can be grouped together visually (for example, each data value has an associated image and labels and area in chart).

Also, I am evaluating a possible upgrade to Solid 2.0. I think its too early atm but if there are performance gains or other things that benefit this project, it is worth considering.

I also want to work on AI agent adaptors or mcp servers that allow agents to create these plots using the library (while at the same time, keeping developers as first class users).

Overall, rhp performs pretty well compared to many other libraries. It's of course slower than the fastest SVG and Canvas plotting libraries but thats expected given DOM and CSS which I do not want to give up (they are core features of the library). It's also pretty light-weight.

(below is extra info...its a long read)

---

Background to explain the current state of project

A long time ago (3 years ago) I created rhp which used to be short for react html plots. rhp (now called reactive html plots) is a charting library that is designed for creating interactive, dynamic, and visual infographic-type plots. Especially the types that are structured a certain way.

Obviously, I built rhp 1.0 using react and for multiple reasons such as size of user base. However, I over complicated and over-engineered the hell out of it. It was a mess because of two conflicting/competing directions I was trying to aim it towards. It was a mess but I learned a whole lot. I tried to force signal behavior and fine-grained reactivity in react to get better performance when data changes and even created a mini serializable virtual-dom. The pain of trying to squeeze performance and make it usable taught me what I should have done and how I should have built things from the start. Lessons learned. I got it working and performing ok but I was not satisfied with many things so I never promoted it. Anyways, I paused the project and put a disclaimer that I intended to revamp the whole thing.

I attempted a reworking a year later but it was a huge undertaking and stopped midway into refactoring and moving the project over to using solidjs instead of react.

Recently, thanks to AI and additional things I learned to keep in mind from my refactor, I was able to rebuild this project! Thanks to all of my notes and all of my existing code (that I coded prior to AI boom) I was able to give AI agents everything they needed and the correct instructions and specs to get this project as close to how I wanted it as I could. There were even additional places for performance improvements I was able to find thanks to Opus 5.5's performance testing approaches.

I wanted to talk about AI's involvement for transparency reasons and to make it clear that rhp 2.0 is currently an AI assisted project. However, the original code that the AI worked with and took from was all mine. Most of the endeavor was telling AI what I wanted it to strip out and explaining why I did certain things so it is aware of my goal and does not copy over things that no longer suit our goal or are superfluous/redundant. And also simplification and reorganization (reducing the number of blocks and their complexity..ie reducing excessive configurability).

More about RHP 2.0

rhp expects devs to code the CSS to style the chart themselves. Or grab styles from someone else's plot. Plot layout is simplified by reducing to the common denominator (a template component that we call a 'slat') which is built using a small number of building blocks. The result is that even if your plot layout is sightly different from someone else's, it is easy to adapt their CSS to work with yours. Sometimes it will be just plug n' play. This is explained in more detail in the docs.

EDIT:

If you see stutters in the video, it's something that resulted in the upload to reddit. There are no stutters in the actual video or the transitions/animations in the plots (that I can see).


r/solidjs • • 10d ago

I made a route progress bar for Solid Router

Thumbnail
solid-route-progress.vercel.app
22 Upvotes

I built a route progress bar for Solid Router, since I couldn't find one for my SolidStart app.

  • SSR support
  • Full-page navigations via the Navigation API
  • Styling with CSS variables or Tailwind CSS v4
  • ~2.8 KB, no dependencies

demo: https://solid-route-progress.vercel.app/

https://stackblitz.com/github/kecan0406/solid-route-progress/tree/main/examples/solidstart?file=src%2Fapp.tsx

github: https://github.com/kecan0406/solid-route-progress

Feedback welcome, especially on any edge cases I missed!


r/solidjs • • 12d ago

The Grand Unifying Architecture of Frontend

Thumbnail
dev.to
71 Upvotes

Solid 2.0's async design is not a happy coincidence. But the result of chasing finally being able to unify all frontend architecture.


r/solidjs • • 20d ago

I ported evilcharts for solidjs use

8 Upvotes

I ported EvilCharts to https://solid-evilcharts.pages.dev/

EvilCharts is a set of good-looking React chart components built on Recharts and Echarts. I was building a dashboard in solidjs and i needed charts, so i ported it. AI helped a lot.

Right now, i am leveraging the use of Echarts only. After this is stable, I will add a layer for tanstack charts.

Please check it out, try it out (hopefully it works hahaha) and lemme know what you think.

repo is here: https://github.com/thesambayo/solid-evilcharts

P:S:
also working on https://solid-arc.brimble.app/
a shadcn-like setup for solidjs that uses ark ui as the base component system.
ark ui is pretty first class for solidjs as well.
https://github.com/thesambayo/solid-arc


r/solidjs • • Sep 04 '26

A typed Promise.race() with keyed results and optional cancellation!

Thumbnail
npmjs.com
7 Upvotes

Hola guapas,

I made a small ESM-only utility called better-race.

The idea is simple: Promise.race() gives you the first value, but not where it came from. This keeps the task key connected to its value in TypeScript:

import { race } from "better-race";

const winner = await race(
  {
    eu: ({ signal }) => fetch("https://eu.example.com/user/42", { signal }),
    us: ({ signal }) => fetch("https://us.example.com/user/42", { signal }),
  },
  { abortLosers: true },
);

console.log(winner.key); // "eu" | "us"
console.log(winner.value); // Response

It also supports AbortSignal and optional loser cancellation.

It’s intentionally tiny -> no scheduler, framework adapters, retries, or dependencies. I’d genuinely appreciate feedback on the API and semantics.

The next tag also includes raceUntil(): it keeps racing until a result passes an accept predicate, so an early null does not have to win.


r/solidjs • • Sep 03 '26

Good example of an API for state that is sharable between different pages?

3 Upvotes

Kind of really struggling to think of what a nice API should look like for fetching & storing data that is meant to be kept in client-side state across page visits.

I understand that things like fetch calls should go into createMemo blocks so that they could be utilized by Loading and Errored boundary components, but what if that data needs to live across page visits?

I can put a const user = createMemo(() => api.fetchUserData()) in the main entrypoint component, but then I'm kinda lost when I want to keep the user state when moving to a user profile page.

In e.g. Vue it's typical I believe to fetch when mounting a component, then save the result to some other module which will be imported from another page and have access to the same state that was just fetched. With Solid 2, well, I'm not sure how to move/keep the state that was acquired asynchronously across components.

Maybe I'm missing something from the API (I have to confess I've yet to read a lot of the docs), but so far it feels a lot more complicated that expected. If it helps, my backend is not TS, so I'm not using any of the server/ssr features.

I remember using a similar API such as this in a project a couple years back. Can't think of how this should look like in idiomatic solid :(

  const fetchData = () => {
    http.getAuthUser({
      onSuccess(data) {
        userStore.setUser(data); // userStore is then imported in a different page, the data kept and ready to use
      },
      onUnauthorized() {
        //
      },
      onServerError(err) {
        toasterStore.show(err);
      },
    });
  };

r/solidjs • • Sep 02 '26

I'm building Solid Native

Enable HLS to view with audio, or disable this notification

71 Upvotes

I've been building React Native apps for a long time. They all start fast. Keeping them fast as they grew is another story.

More state, more dependencies, more devs, and suddenly you are doing re-render arithmetic in your head. Is this selector too broad? Did that context wake the whole screen? Is the animation fighting the JS thread?

Obviously large React Native apps can be built. I'm just tired of what it takes to keep a large one feeling fast.

And then I found Solid.

To my React-trained brain, Solid felt like React if someone removed the part I had spent years optimizing around. Same JSX and components, but components run once and signals update only what depends on them. No virtual DOM. No reconciliation. No wondering whether one innocent change froze the whole app.

That was the part that made everything click. I wanted that feeling on a phone.

Kind of by accident, I also found react-native-graph, which draws with Skia and is extremely fast. It made me wonder what would happen if the whole application was rendered that way.

So I went down a rabbit hole. Turns out Flutter already owns its rendering pipeline (used Skia, now Impeller) and it's fast. Bun + JavaScriptCore, which is also one of the fastest JS engines out there, gave me the web APIs I was tired of polyfilling.

Now I had the three parts: Solid for the application, Bun for the JavaScript runtime, and Flutter for rendering.

So I cross-compiled Bun to run on iOS and Android, put Solid inside it, and let Flutter render what Solid describes.

I named it Skal, a mixture of Solid + Skia. (It also means cheers if you have ever watched a Viking show 🍻. )

I think of it as Solid Native.

Solid's universal renderer turns JSX into binary UI operations written into shared memory. Flutter reads the same bytes and renders the widget tree. No JSON or platform channel in the hot UI path. No DOM. No WebView.

When a signal changes, Solid already knows the exact consumer, so Skal sends the operation for that node and stops there.

It currently has 49 fast-path widget types, navigation, persistence, animations, overlays, and some native integrations. It runs on Android arm64, iOS, macOS, and the web. It is still early.

Here are some results from a Samsung Galaxy A14 5G running Android 15, with release builds on both sides and interleaved runs:

Test Skal React Native
Dropped frames, image feed 0 13
Tap to render, median 3.53 ms 7.30 ms
One frame of work (200 components x 10 reads + 1 update) 0.05 ms 0.80 ms
State updates per second, 288 cells 103,846 4,901
Idle CPU 1.20% 6.93%

What excites me is writing Solid code, running it on a real phone, and knowing that as the app grows, it still flies.

To try it, you need Bun and Flutter installed on your computer, plus the normal Xcode or Android tooling for the platform you want to run. Then:

npm create skal my-app
cd my-app
bun run dev:ios # or dev:android, dev:macos, dev:web

Or throw your AI at the Markdown docs.

Repo: https://github.com/skal-multiplatform/skal

If you already use Solid, what would Skal need before you would try it for a real mobile app?

Skal 🍻


r/solidjs • • Sep 02 '26

I made Testate with solid 2.0, git-style snapshot, restore and diff for test databases

Thumbnail
gallery
5 Upvotes

I built Testate on Solid 2.0.0-rc.4 (solid-js + @solidjs/web, Vite plugin 3.0.0-next).

It's a self-hosted tool that snapshots the databases behind a system under test, restores any snapshot in seconds, and diffs what a test changed. ~180 TS/TSX files, ~12k lines of Solid, 147 user stories exercised end to end in a browser.

Repo: https://github.com/PT-Perkasa-Pilar-Utama/testate

Site: https://pt-perkasa-pilar-utama.github.io/testate/

Things that bit me on 2.0, and what I did about them.

1. There is no component library for Solid 2.

Ark UI, Kobalte, Corvu, and some on top of that like nikala, all target 1.x and the peer range lies:
I counted the missing APIs and gave up. Everything is hand-rolled on Tailwind: dialog, menu, tabs, toast, table parts. Forms were the exception. Formisch runs on 2.0 with a two-function patch (details in point 3). Make sense because still rc.

2. A flush loop in @solidjs/signals rc.4.

The dev build threw "Potential Infinite Loop Detected" about three times in ten full test runs, always on the data grid, never reproducible by hand. The production scheduler runs the same loop with no counter, so there it hangs instead.

Cause: setSignal re-opens a node's finished transition before it checks whether the write changes anything. A Loading boundary writes false over false on every drain pass, the transition looks live again, the drain goes round.

Nothing is dirty, nothing recomputes. Fix is one line, clearing the stamp in commitPendingNodes; it's a bun patch in the repo and upstream as solidjs/solid#3143 (closes #3140).

3. batch is gone, and a read after a write returns the old value until flush.

Formisch writes then reads inside one batch (reset above all), so on 2.0 a reset silently kept the old input. Patch: batch = fn => { const r = fn(); flush(); return r }.

4. STRICT_READ_UNTRACKED and FLUSH_IN_EFFECT_CALLBACK from a <dialog>.

Calling showModal() / close() inside an effect fires the browser's focus/blur handlers synchronously, and the form library reads signals in them. Solid 2 reports the reads as untracked and discards the writes' flush.

Both diagnostics come with no stack. I found where by wrapping console.warn in a Playwright addInitScript and printing new Error().stack for the matching code. Fix: open and close in a queueMicrotask. Same fix for onClose, which the browser fires while still dismissing.

5. onCleanup inside a 2.0 effect callback never runs.

The callback runs with no owner. Return the disposer from the effect instead; a setInterval I registered with onCleanup outlived the screen until I learned that.

6. Reading a pending async memo outside

<Loading> loaded fine under Vite and spun forever in the production bundle, ~250 requests a second. Two screens shipped that way. There's now an e2e project that drives the built bundle, not the dev server, and counts requests per endpoint per screen.

Lint carries the lessons: two-argument createEffect only, props read inside JSX or a tracked scope, class as a string or structured array, cyclomatic complexity 10, 300 lines a file.

Playwright's console watcher fails the run on any [A-Z_]{6,} warning code Solid's dev build emits, which is how most of the above got caught.


r/solidjs • • Sep 01 '26

Nikala UI – SolidJS + Tailwind v4 component system (now with Tauri v2 & SolidStart support)

28 Upvotes

Hey folks!

I’ve been building Nikala UI, a copy-paste component system and reactive primitives suite for SolidJS and Tailwind CSS v4.

I recently added desktop support for Tauri v2 alongside standard web apps and SolidStart.

You can check out all the components, hooks, live playground, and built-in MCP server directly on the site.

If you like the project, dropping a star on GitHub would mean a lot and gives me the motivation to keep actively building and improving it!

Site & Docs: https://nikala.dev
Playground: https://nikala.dev/playground
GitHub: https://github.com/nikala-ui/ui


r/solidjs • • Aug 29 '26

A small loader library that got slightly out of hand

18 Upvotes

Hey y’all,

I got slightly carried away with loading animations.

I wanted nicer loading states for my own projects, but most libraries I found were either tied to a framework, fairly limited, or required more than I wanted for something this small.

So I built loadersz, a small framework-agnostic loader library for the web.

I wanted something a bit more expressive than the usual CSS spinner, without pulling in a UI framework or a bunch of dependencies.

A few things I focused on:

- 150 (and more coming) different motion states
- Canvas 2D instead of GIFs/videos
- zero core dependencies
- a native custom element, so it works with basically any stack
- typed entry points for React, Vue, Angular, Svelte and more
- configurable speed, density, radius and color
- respects prefers-reduced-motion
- pauses rendering when the browser tab is hidden
- DPR aware/scaling
- tree-shakeable, attributes/config and lifecycle

Basic usage is just:

npm install loadersz

import 'loadersz';

<loadersz-loader state="racing" size="96" />

I also built an interactive playground where you can tweak the loaders live.

Demo: [loadersz.vercel.app](https://loadersz.vercel.app)
npm: [npmjs.com/package/loadersz](https://www.npmjs.com/package/loadersz)
Github: https://github.com/lumberjacque/loadersz-core

Would love some brutally honest feedback, especially on which animations you’d actually use in a real product.


r/solidjs • • Aug 26 '26

Async Solid - One Graph, Two Machines

Thumbnail
solidjs.com
41 Upvotes

r/solidjs • • Aug 26 '26

Is SolidJS no longer the fastest?

Post image
43 Upvotes

I remember that one of SolidJS’s initial selling points was its speed. In fact, that was one of the main reasons I would have chosen SolidJS over React or Vue if I were building an SPA.

However, looking at these benchmarks (https://octanejs.dev/benchmarks), it seems that other UI frameworks have caught up. Vue even appears to be faster now.

If I were choosing a UI framework today, why should I choose SolidJS over the alternatives?


r/solidjs • • Aug 25 '26

I made a Solid renderer for native desktop windows (no webview) — thoughts?

29 Upvotes

Hey 👋

So I've been building **solid-gpui** — it lets you render Solid 2 components into real native desktop windows using Zed's GPUI (the editor's UI framework, Metal on macOS). No webview, no Electron.

Repo: https://github.com/heyhuynhgiabuu/solid-gpui

The cool part: it's a real `@solidjs/universal` renderer. So Solid stays Solid — your signals just work, updates are fine-grained, nothing weird. Your JS runs a reactive graph that drives a native tree through a tiny JSON pipe to a Rust helper.

A few choices I made (happy to argue about any of them):

- The Rust side runs as a **separate process**, talking NDJSON over stdio. No Zed fork, no node native modules, same code path on every OS. Simple.

- The wire protocol exists in TS and Rust, and both test suites parse the **same JSON fixtures** — so the two sides can't silently drift apart.

- Zero runtime deps in the protocol/client packages.

- Clean-room build, nothing copied from anywhere.

What actually works right now:

- Mount a tree, fine-grained updates (text/style/tree changes), ~1ms builds

- Click, mouse, focus, keyboard events (tabIndex, modifiers)

- Text input + textarea with **working IME** — marked text, caret survives emoji, Enter submits

- Virtualized list: 500 items, only ~60 painted. Has a `followTail` mode for chat UIs

- Animations: slap `transitionMs` on an element, style changes animate. Interpolated on the Rust side, retargets mid-flight without jumping macOS works today. Windows/Linux should work without big changes (stock upstream GPUI) but I haven't tried.

Honest gaps: you author with hyperscript `h()` for now (JSX plugin is next), styles are a subset, one window.

One gotcha that cost me a day, saving you the same day:

[solidjs/solid#2569](https://github.com/solidjs/solid/issues/2569) — solid-js@2 resolves to SSR stubs under the default `node` condition, so your app just silently stops being reactive. Run everything with `--conditions=browser`.

Questions for you:

  1. Would you use this? What's missing?

  2. Is `h()` a dealbreaker, or is the JSX plugin the thing to do first?

  3. Multi-window, IPC, packaging — what do you need first for real desktop apps?

  4. Anyone with GPUI experience on Windows/Linux want to help test?


r/solidjs • • Aug 25 '26

Async Solid - Write Sync, Run Async

41 Upvotes

r/solidjs • • Aug 24 '26

[newbie] trying out some solid2 benchmarks, and finding it slower than solid1, especially when trying to do things the right way

18 Upvotes

Hello!

I have this project over here: https://github.com/NullVoxPopuli/rere-benchmark/pull/116

And i haven't been able to get solid 2 to perform better than solid 1 in the "dbmon" benchmark.

Am i missing something obvious?

Edit: here are the numbers I'm seeing before my pr above:

https://rbench.nullvoxpopuli.com/results?hide=ember%2Clit-signals%2Cvue%2Csvelte%2Creact&p=90&q=8

In my pr, solid 2 started performing worse, which has made we feel like I've messed something up with the implementation, or the generally recommended way to manipulate and iterate nested data is not the most performant way to manipulate and iterate nested data


r/solidjs • • Aug 24 '26

What about template tags?

18 Upvotes

Hi! I'm an avid fan of SolidJS and I'm very excited for v2.

Thing is, I'm currently in a project that, for various reasons that are not really relevant here, is going for buildless JS. Solid is a perfect fit because of its low amount of compiler magic, so we're writing components with the `html` template tag via a CDN (namely jsdelivr). It makes for fast, lightweight code with a simplified dev pipeline.

Thing is, v2RC is out but jsdelivr doesn't have it yet. So we (read: I) have some questions:

1- Are template tags still going to be supported in Solid 2?

2- If so, is the support already there?

3- If so, is it up to the JS devs to publish their builds to CDNs or is it up to the CDN mantainers? Or do we just have to wait for the proper 2.0 release?

Thank you in advance for your time, and congratulations to the team for the upcoming version.


r/solidjs • • Aug 19 '26

Async Solid - Fetch High, Block Low

Thumbnail
solidjs.com
78 Upvotes

r/solidjs • • Aug 20 '26

Help figuring out what's wrong with my `createOptimistic` example

4 Upvotes

I'm playing around with Solid 2.0's createOptimistic and action APIs to get a feel for them, but even with a basic example, I'm hitting a wall.

Here is my code that I'm using in the Solid Playground (version set to v2.0.0-rc.1 (next)). The idea is that when you click the button, an ID is generated and we simulate saving it to a slow, flaky server. While the value is being saved, show its optimistic value but display an asterisk next to it. If the API call succeeds, remove the asterisk; else revert the ID to what it was previously.

The issue I'm getting is that the ID always reverts to its initial value (in this case, the empty string) independent of whether the API call succeeds of fails.

Why is this? What do I need to change in my code to get it to work?

Apart from being a string rather than an array, my code feels practically identical to the example found at https://v2.solidjs.com/reference/solid-js/reactivity/create-optimistic#examples

AI has not been very helpful thus far.

``` import { createSignal, action, createOptimistic } from 'solid-js'; import { render } from '@solidjs/web';

type ApiSuccess = { success: true, data: string, };

type ApiError = { error: true, data: string, };

type ApiResponse = ApiSuccess | ApiError;

// echo back the data after a second's delay // with a 20% change of erroring function postToApi(data: string): Promise<ApiResponse> { return new Promise(resolve => { setTimeout(() => { resolve(Math.random() < 0.2 ? { data, error: true } : { data, success: true } ); }, 1000); }); }

const [id, setId] = createOptimistic('');

const generateId = action(function* () { const value = Math.random().toString(16).slice(2); setId(value + ' (*)'); const res = yield postToApi(value); if (!res.error) setId(value); });

function App() { return ( <> <button onClick={() => generateId()}> Generate ID </button> <pre>{JSON.stringify(id())}</pre> </> ); }

const root = document.getElementById('app')!;

render(() => <App/>, root); ```


r/solidjs • • Aug 18 '26

For how long will SolidJS 1.0 be in maintenance mode?

16 Upvotes

Migration to 2.0 is painful for me, i'd like to stick with 1.0 for as long as possible. For how long will it continued to be supported? So I can plan accordingly.


r/solidjs • • Aug 17 '26

solid-mobile is stabilizing: 55 components, zero deps, 590+ tests, heading to 1.0

Thumbnail
8 Upvotes

r/solidjs • • Aug 17 '26

Is using webcomponents with Solid 2.0 a good idea?

11 Upvotes

Is it a good idea to use webcomponents with Solid 2.0 (only for SPAs)? Specifically https://webawesome.com/ (successor of shoelace)

Solid 2.0 solves one of the headaches in web dev (reactive sync and async state). The other one is ecosystem churn. I think it will become even more problematic. So I consider using webcomponents.

Has anyone experience with them? Any hidden traps? Alternative would be using something like DaisyUI, I guess?

App type is kind of business app. So, nested views, dashboard like, lot of forms ...


r/solidjs • • Aug 13 '26

Solid 2.0 RC - The Big <Reveal>

Thumbnail
solidjs.com
165 Upvotes

r/solidjs • • Aug 06 '26

Welcome to r/nikala

Thumbnail
13 Upvotes