Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
react-canvaskit
Experiment in creating a custom react renderer using an offscreen webgl canvas on top of Skia CanvasKit
-
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
If you haven’t heard of Skia, it’s used in Chrome and Android for rendering graphics (like SVGs). It’s a C++ library that you can use to “draw” shapes, text, and other elements to a “canvas” (like the DOM’s or even a virtual canvas for rendering server-side in Node).
Webpack 5 breaks dynamic wasm import for SSR
Want to see the code or try the demo? Check out the Github repo for the final code here: solid-canvaskit-renderer.
After a little research, I found that someone has already beat me to it for React — react-canvaskit. This implementation used react-reconciler to create a custom renderer for React. This is the same process used by **react-three-fiber** (aka R3F) to bring ThreeJS elements to the React VDOM/lifecycle (e.g. when you use ).
After a little research, I found that someone has already beat me to it for React — react-canvaskit. This implementation used react-reconciler to create a custom renderer for React. This is the same process used by **react-three-fiber** (aka R3F) to bring ThreeJS elements to the React VDOM/lifecycle (e.g. when you use ).
What really attracted me to SolidJS was the Universal renderer. It’s like being able to create your own version of React DOM.
When I first was looking into the universal renderer, I found **solid-three,** which is a universal renderer for ThreeJS. It’s actually based on react-three-fiber and features a similar architecture and API (using Zustand to store Scene context, or even a useFrame). This would prove as an excellent resource to help craft my own renderer that ditched the DOM.
When I first was looking into the universal renderer, I found **solid-three,** which is a universal renderer for ThreeJS. It’s actually based on react-three-fiber and features a similar architecture and API (using Zustand to store Scene context, or even a useFrame). This would prove as an excellent resource to help craft my own renderer that ditched the DOM.
To do this, I spun up a quick NextJS app, installed the CanvasKit WASM module from NPM, and tried using the API inside some components. Here’s the commit with that initial attempt. This worked great — after I figured out some issues with NextJS and WASM modules (I basically tapped out at some point and just used a CDN version of the WASM module).
I had previously done some explorations into SolidJS and universal rendering where I tried to create a ThreeJS version (before I realized one existed). That project was basically a monorepo with a package for the universal renderer, and a “demo” Vite app to test the renderer. I basically just created a new Vite app using their SolidJS template. And for the monorepo — I just copied from my mountain of previous monorepo code.
Interested in making your own SolidJS universal renderer? I created a template based off an early iteration of my CanvasKit renderer (basically at the beginning console.log phase). This should be a clean*-ish* slate to get you started to plug in any API you’d like! Clone and try the code here on Github.
I had some time to dive into SolidJS a couple weeks ago, and it seems like a great and even much faster alternative to React. It’s basically the same as React — it uses JSX and hooks, with a couple minor differences.
I had previously done some explorations into SolidJS and universal rendering where I tried to create a ThreeJS version (before I realized one existed). That project was basically a monorepo with a package for the universal renderer, and a “demo” Vite app to test the renderer. I basically just created a new Vite app using their SolidJS template. And for the monorepo — I just copied from my mountain of previous monorepo code.
After a little research, I found that someone has already beat me to it for React — react-canvaskit. This implementation used react-reconciler to create a custom renderer for React. This is the same process used by **react-three-fiber** (aka R3F) to bring ThreeJS elements to the React VDOM/lifecycle (e.g. when you use ).
I’d become more interested in Skia when Shopify created a React Native integration for it - React Native Skia. It was cool to see you could take a C++ library like that and create bindings for different platforms like Android or iOS based on their graphic engines - like OpenGL vs Vulkan.