Hi everyone!
This week it's particularly exciting to see React Native Skia reaching 1.0. But we also have many other interesting releases to look at: Pigment, Storybook, Tailwind, Rolldown, MDXTS...
There were also some fun ones, such as Mist and Geist. I'm really curious to know what you think of them. Would you use these?
I'm trying to monitor more closely weak signals (PRs, RFCs and tweets), do you find this kind of news valuable?
π‘ Subscribe to the official newsletter to receive an email every week!
πΈ Sponsor
In-App Subscriptions Made Easy
RevenueCat gives you everything you need to monetize, analyze, and grow your app business. Effortlessly control customer access and entitlements, manage data, and experiment with pricing. See why over 30,000 apps trust RevenueCat to power their in-app purchase infrastructure.
βοΈ React
The MUI team is working on Pigment, their own zero-runtime CSS-in-JS to replace Emotion in Material UI v6. The first versions have been published to npm, including a Next.js withPigment()
plugin. Olivier explains in a π¦ tweet the motivations to create a new solution, and how it compares to existing ones (Panda, StyleX, Tailwind). Unlike all others, this one will ease the adoption for existing Emotion and Styled-Components users.
This new major version of Storybook comes with many improvements, including:
- Experimental React Server Components support
- Faster React control auto-generation (through
react-docgen
) - Faster static builds in "test mode" (CLI flag
--test
) - Built-in visual testing (through Chromatic)
- Re-architected Vite support, Vitest, Vite 5
- Improved mobile/desktop UI/UX
- πΈ Dive into React PDF viewing with Apryse. Seamless integration with PDF.js for an elevated experience. Learn more from our blog.
- π¦ Sebastian MarkbΓ₯ge recommends to use package.json βimportsβ for dependency injection instead of Context
- π React Core PR - Add Diffs to Hydration Warnings: The React team is working on improving the React hydration error messages by displaying a diff. You can get a π¦ preview from the unit tests.
- π React 19 - its not fine: React 19 currently π¦ breaks the βits-fineβ package, notably used to bridge React context from one renderer to another. It seems the React team is investigating bringing first-class support for this feature, although it looks like a challenging problem to solve.
- π Next.js PR merged - add Lightning CSS: A new experimental opt-in CSS loader should be available soon.
- π Remix RFC - Action Functions: new RFC suggests to implement React actions functions and reduce indirection/boilerplate. It should be implemented first on the client-side, and later add support for RPC βuse serverβ directive.
- π Vercel - Support for Remix + Vite
- π The Framework Field Guide: A polished three-part series of books that teaches you Angular, React and Vue all at once, helping you figure out the differences between frameworks, and including many interactive examples. The first part "Fundamentals" is available.
- π React Paris - 22 March: Next week I'll go to React Paris, and hope to meet some of you there. The conference is sold-out but you can still watch it online with a -20% discount.
- π React Compiler & React 19 - forget about memoization soon?: Great overview of what we know about the upcoming compiler, its release timeframe and what kind of React code we might get rid of.
- π Navigating the future of frontend: Well-documented article to better understand the current direction of the frontend ecosystem, including React with its Server Components.
- π Component Testing with SafeTest vs. Cypress vs. WebdriverIO: The newly released Netflix SafeTest framework was recently roasted by competitors in 2 detailed articles, illustrated with React test examples.
- π A Next.js package for managing third-party libraries: Presents the work of the Chrome Aurora team, notably the @next/third-parties package that enables you to efficiently load third-party scripts and embeds in a Next.js project
- π Implicit Assertions: Explains why a React render smoke test remains useful.
- π You can now deploy the Remotion Studio
- π How To Transform ReactJS Animation into Video - The Lightweight Version of Remotion
- π How to safely use dangerouslySetInnerHTML in React
- π Progressively Enhance Handling Your Forms With React.js Server Actions
- π Best Practices for Writing Tests with React Testing Library
- π¦ WinterJS 1.0 - WinterCG-compatible JS runtime built on Rust and SpiderMonkey: this new runtime claims to be the fastest, and can now run Next.js. A Hacker News RSC demo is available, and they plan to migrate their own Next.js frontend to it soon.
- π¦ React Geiger: Itβs like the audio version of WhyDidYouRender, emitting little audio farts whenever React re-renders. Thatβs a fun idea, but could actually be useful too.
- π¦ MistCSS - Write React components using CSS only: A crazy JS-from-CSS tool that permits to generate React components directly from CSS files, including Tailwind support π€ͺ.
- π¦ Shadcn/ui - March 2024 Update - New components: Breadcrumb, One-Time-Password Input
- π¦ MDXTS (Beta) - The Content & Documentation SDK for React: βIt's sort of a mashup of Contentlayer + Storybookβ
- π¦ Astro 4.5 - Dev Audit UI, View Transition improvements, Multi-CDN, Shiki 1.0β¦
- π¦ Remix-Dev-Tools 4.0 - now Vite/ESM-only, new docs site
- π¦ BlockNote 0.12 - Block-Based rich text editor - New website and features
- π¦ next-cache-toolbar - A toolbar that helps to identify data cache entries
- π₯ Theo - New JS Framework Just Dropped (TanStack Start)
- π₯ Jack Herrington - Forms Management with Next.js App Router
- ποΈ This Month in React - February 2024 - React 19 (but more details), Apple tries to kill PWAs
πΈ Sponsor
Refine - Open source Retool Alternative
The sweet spot between the low code and traditional development for CRUD-heavy applications.
As an open-source React meta-framework designed for Enterprise applications, Refine offers a headless solution ideal for tasks like admin panels, dashboards, and internal tools.
While low-code tools may offer initial promise, they often fall short in handling complex scenarios due to scalability issues, limited customization options, and the risk of vendor lock-in.
Refine enables teams to rapidly develop production-ready apps while maintaining flexibility.
π± React-Native
This section is now co-authored with Benedikt. Feel free to send us your comments by email or on Twitter!
π₯ William Candillon - Time to Fly - React Native Skia 1.0
Exciting major release of React Native Skia, with an inspiring launch video! This library was first released back in 2021 by William Candillon and Christian Falch and has been heavily supported by Shopify for a long time. Now, theyβve finally released a 1.0 and itβs packed with improvements and new features: Thanks to a new Paragraph API, Skia can now render rich text layouts, combining system fonts and custom fonts. Animations Hooks make it easier to build performant animations with the already existing RN Reanimated and Gesture Handler integration. Another highlight for me personally: RN Skia now also supports the web as a platform, via a package called canvaskit-js!
- πΈ React Universe Conf - Meet the first speakers, and maybe become a speaker yourself? Our CFP is open until March 22. Apply today!
- π¦ React Navigation 7 will support animations for Bottom Tabs: Number of alpha releases has picked up significantly over the last weeks, so I guess the release is coming close?
- π React Native Docs - About the New Architecture: We keep hearing βNew Architectureβ everywhere, and it will be the new default with RN 0.75. This new docs section explains what exactly this new architecture encompasses.
- π New docs - Drag Drop Content View: You mightβve seen this library in last weekβs newsletter, now it has shiny new docs.
- π Learn Once, Hack Everywhere: Interesting glimpse into reverse engineering mobile apps.
- π The Hidden Gems of React Native
- π Expo - Support for FCM HTTP v1 API
- π Expo - Launching EAS Updates with Orbit
- π The Morrow guide to Expo Router
- π The Mini Guide to React Native Optimization for Web3
- π Why you donβt need Flipper in your React Native app β¦ and how to get by without it
- π Consistently Improve App Performance With DMAIC and Reassure
- π RevenueCatβs State of Subscription Apps report 2024
- π Fine-tuning React Performance: A Subtle Insider Tip from a TV App
- π¦ react-native 0.74.0-rc.3
- π¦ react-native 0.73.6
- π¦ faster-image: New library for fast image rendering, wraps Nuke on iOS and Coil on Android.
- π¦ OP-SQLite 3.0 - Now (optionally) with encryption
- π¦ vision-camera-resize-plugin 2.1.0 - with two new features "mirror" and "rotate"
- π¦ react-native-graph 1.1.0 now uses REA values for updating on the UI Thread
- π¦ react-native-mmkv 2.12.2 contains a bunch of fixes
- π¦ Obytes Starter - RN starter app now with Expo 50, Expo Router, and NativeWind 4
- π₯ Simon Grimm - Role Based Navigation in React Native with Expo Router
- ποΈ Rocket Ship 33 - NativeWind & React Native Styling with Mark Lawlor
π Other
- π The Evolution of Shiki v1.0
- π The quiet, pervasive devaluation of frontend
- π Supercharge compression efficiency with shared dictionaries
- π Interaction to Next Paint is officially a Core Web Vital
- π¦ TypeScript 5.4 - NoInfer, groupBy, improved narrowing in closures
- π¦ Biome v1.6 - Partial support for Astro, Svelte and Vue files
- π¦ Rolldown - Fast Rust bundler for JavaScript with Rollup-compatible API
- π¦ Node.js 21.7 - API for styling text
- π¦ Tailwind CSS v4 alpha - Oxide engine, CSS-first config
- π¦ Speedometer 3.0 - The Best Way Yet to Measure Browser Performance
π€ Fun
See ya! π
Top comments (3)
Hello Sebastien!
I don't have a twitter so I was trying to find a way to reach you about Docusaurus, and found you on here. I am building an SSOT for my company to use as an internal documentation source ,using Docusaurus. So far it's been great, and very lightweight, which is perfect.
I was wondering, is there a way to generate a new md/mdx file by a non-local user? As in, after deployment, I would want anybody with access to be able to create a new Doc page, have it go into the correct file path, and make that the current version in the git repo. Is that possible to do?
The premise is that this would be a company wide hub that anybody could contribute to, and I want a way to forego an active administrator who would have to manually update the site. They could submit into an input form, and it would create the md/mdx file, push to the git repo, and make the localized change persist on the deployed site, and the page would be live immediately after.
I would be very grateful for any advice. If this platform is not good for a response, you can reach me at
Hey
You'd better ask questions on the Docusaurus Discord or the Docusaurus repo discussions π
You can try to use a Git-based CMS like TinaCMS or Decap.
Another approach could be to let users contribute to docs through StackBlitz Web Publisher. It is a bit more technical because users have to "submit" their contribution at the end, but is manageable.
developer.stackblitz.com/codeflow/...
At the end of the day users should be technical enough to understand how to author Markdown anyway
Thanks for getting back to me, I appreciate it Sebastien. And sounds good, I will give those a try, as well as the DocuDiscord, thank you!